Memasang Tombol Share Di Blog Untuk Pemula

Memasang tombol bagi atau yang lebih dikenal dengan share, selain untuk mempercantik tampilan blog juga untuk membuat postingan diblog kita semakin dikenal oleh orang karena dibagikan keberbagai media sosial.

Mungkin bagi anda yang sudah terbiasa membuat postingan diblog, postingan ini sudah terlambat atau basi. Sudah banyak postingan yang dibuat orang tentang cara memasang tombol share di blog, namun tidak sedikit juga orang yang tidak mengerti cara memasangnya terutama untuk blogger pemula seperti yang saya alami.

Pada postingan kali ini saya akan memberikan dua cara  untuk memasang tombol share diblog yang telah di tes oleh penulis.

Pertama melalui edit HTML pada template, biasanya ini agak sulit untuk blogger pemula seperti yg alami, kendalanya terkadang tidak semua template yang kita pilih mendukung untuk memasangnya, yang kedua dengan memasang Widget yang menurut saya agak lumayan mudah.

Baiklah kita mulai dengan cara yang pertama

• Pertama-tama login pada blogger.com
• Setelah itu pada bagian kiri pilih Template dan Edit HTML

3q1 

• Setelah kita masuk pada bagian HTML yang terlihat seperti tidak beraturan, untuk memudahkan kita dalan memcari kata tekan Ctrl+F lalu ketikan

                                                        <data:post.body/>                    

• Menurut pengalaman yang saya alami saat mencari kata tersebut kebetulan template yang saya pilih tidak ada kata tersebut bahkan dengan bantuan Ctrl+F sekalipun, saya cari kata perkata sampai selesai semua tidak ada. untuk yang mengalami hal tersebut saran saya masuk Template dan pilih Sesuaikan, bila ingin mengikuti penulis pilih template Tanda Air dan pilih yang ketiga kemudian Pilih Terapkan ke Blog. 
• Kembali ketahap pertama dan cari kata <data:post.body/>, setelah ketemu pastekan script dibawah ini diatas kode <data:post.body/> agar tombol share berada di bawah postingan.

<b:if cond='data:blog.pageType == "item"'>
<div style='border-top:1px solid #ccc;border-bottom:1px solid #ccc; padding:8px 0px;margin:5px 0px 5px 0px;width:100%;float:left;height:20px;'>
<div style='float:left;padding-left:0px;font:normal 12px Georgia;'>
Share on :
</div>
<div style='float:left;padding-left:10px;'>
<a name='fb_share' type='button_count'/>
<script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share'
type='text/javascript'>
</script></div>
<div style='float:left;padding-left:10px;'>
<a class='twitter-share-button' data-count='horizontal'
data-via='User Name'
href='http://twitter.com/share'>Tweet</a><script
src='http://platform.twitter.com/widgets.js' type='text/javascript'/>
</div>
<div style='float:left;padding-left:10px;'>
<!-- Place this tag where you want the +1 button to render -->
<g:plusone size="medium"></g:plusone>
<!-- Place this render call where appropriate -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type =
'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>
</div>
</div>
</b:if>

setelah selesai jangan lupa untuk klik simpan, dan liat postingan ada sudah tombol share dibawah postingan. 

Sekarang kita masuk ke cara yg kedua.

• Pertama-tama login seperti biasa ke blogger.com
• Pilih pada menu disamping kiri "Tata Letak/Tambahkan Gadget/Tambahkan HTML/Java Script".
• Copykan kode dibawah ini

<b:if cond='data:blog.isMobileRequest == "false"'><!--Widget Share like FB tweet google plus digg Button Melayang Start--><br />
<style>
    #pageshare {position:fixed; bottom:15%; left:10px; float:left; border: 1px solidblack; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px
    0;z-index:10;}
    #pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
    .fb_share_count_top {width:48px !important;}
    .fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
    .FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
    .FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
    </style><div id='pageshare' title="bagikan ke teman anda">
<div class='sbutton' id='gb'>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>
<div class='sbutton' id='rt'>
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>
<div class='sbutton' id='gplusone'>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'>
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'>
<script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></div>
<div class='sbutton' id='fb'>
<a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div>
<br />
<div style="clear: both;font-size: 8px;text-align:center;">
<a href=" http://curhat4hati.blogspot.co.id/"  target="blank"><font color="blue"><font></font></font></a></div>
</div>
<!--Widget Share like FB tweet google plus digg  Button Melayang End--></b:if>

• Ganti tulisan "curhat4hati.blogspot.co.id" dengan alamat blog anda
• Terakhir jangan lupa simpan dan lihat di blog anda tombol share sudah ada.

Mudah-mudahan apa yg saya share bisa bermanfaat. Mohon ide dan masukannya untu saya agar lebih baik dalam menulis

Terima kasih

Sumber : Blogooblok.com dan kokoh blospot.co.id

Baca juga postingan :

• Mengaji diri
• santet
• korupsi
• garam