Pentingnya Tombol Like dan Share di blog

Tombol like dan share merupakan salah satu komponen penting, Karena dengan adanya tombol like dan share maka akan memudahkan pembaca untuk menyebarkan postingan blog yang dianggapnya menarik dan layak untuk disebarkan melalui akun media sosial. Dengan disebarkannya postingan blog ke sosial media, maka memperoleh pengunjung yang banyak menjadi lebih mudah. Tombol tersebut sering ditempatkan di bawah posting, namun adapula yang menepatkannya di samping postingan, contohnya telah kalian lihat di gambar .

Jika ada yang berminat atau tertarik untuk memasang tombol like dan share di samping postingan, maka kalian berada di tempat tepat. Karena kali ini saya ingin membagikan cara memasang tombol-tombol tersebut di samping kiri postingan. Perlu kalian ketahui bahwa tombol share ini akan melayang di sebelah kiri posting blog kalian dan akan mengikuti scroll pengunjung ke atas atau ke bawah postingan



Berikut cara memasang tombol like dan share melayang:

1. Masuk ke akun Blogger kalian, kemudian klik menu Template
2. Penting!!! Selalu ingat Back up dulu template kalian sebelum template
3. Klik Edit HTML
4. Kemudian cari kode berikut, tekan Ctrl+F untuk mempermudah pencarian:

<b:includable id='post' var='post'>

 5. Copy kode di bawah ini dan letakkan tepat di bawah kode tadi:

 KETERANGAN:

position:fixed; bottom:6%;   : mengatur tinggi rendah tombol
margin-left:-72px; float:left;  : mengatur kiri kanan tombol
background-color:#f7f7f7;   : menganti warna background tombol

'ahmad_site   : ganti dengan username Twitter kalian

 

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<style>
.gnr_social_floating{
        position:fixed; bottom:6%; margin-left:-72px; float:left;     width:60px;
    background-color:#f7f7f7;     padding: 5px 0 0px 0p;
     border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
z-index:9999px !important;
border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;
}
.gnr_social_floating .gnr_side_social_button{
    margin-bottom:5px;
    float:none;
    height:auto;
    width:60px;
}
.gnr_social_floating .st_twitter_vcount, .gnr_social_floating.st_plusone_vcount, .st_email{
    margin-left:5px;
}
.gnr_social_floating .st_fblike_vcount{
    margin-left:5px;
}
.gnr_social_floating .stButton_gradient{
    background:none !important;
    height:21px !important;
    padding-left:0 !important;
}
.gnr_social_floating .chicklets, .gnr_social_floating .stMainServices {
    background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXZ3_7cn_XsXpz5-vRSbxcamHMVDCaoQsoaleFwCY-mZFiTk_RoqvSi49ZBl4kaSGKpDTwnQMWNfBbmKzST_S_E_Ka7YB399okyxZPzBqb3VMCFgfvXBlE-a-on5D82BXO0NLKxKS1Gjp/s400/gc_social_sprite.gif&#39;) no-repeat !important;
    height:19px !important;
    width:45px !important;
    padding:0 !important;
}
.st_email .chicklets{
    background-position:0 -77px !important;
    background-image:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitXZ3_7cn_XsXpz5-vRSbxcamHMVDCaoQsoaleFwCY-mZFiTk_RoqvSi49ZBl4kaSGKpDTwnQMWNfBbmKzST_S_E_Ka7YB399okyxZPzBqb3VMCFgfvXBlE-a-on5D82BXO0NLKxKS1Gjp/s400/gc_social_sprite.gif&#39;) !important;
}
.gnr_social_floating .st_twitter_vcount .st-twitter-counter{
    background-position:0 -58px !important;
}
.gnr_social_floating  .stButton_gradient{
    border:none !important;
}
.gnr_social_floating .stBubble_count{
    width:44px !important;
    font-size: 15px !important;
    font-weight: normal !important;
    padding-top:7px !important;
    height:23px !important;
    background:none !important;
}
.gnr_social_floating .st_twitter_vcount .stBubble_count{
    color:#00a6df;
    background-color:#f8fbfc !important;
}
.st_fblike_vcount{
    margin-bottom: 0px;
    display: block;
}
.st_twitter_vcount{
    margin-bottom: 3px;
    display: block;
}
.st_email{
    margin-bottom: 5px; margin-top: 3px;
    display: block;
}
.gnr_social_floating .stBubble{
    background-position: 21px 31px !important;
    height:35px !important;
}.gnr_social_floating .st_pinterest_vcount{
    margin-left:5px;
}
.gnr_social_floating .st_pinterest_vcount .st-pinterest-counter{
    background-position:0 -19px !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble_count{
    color:#FF0505;
    background-color:#fbf8f8 !important;
}
.gnr_social_floating .st_pinterest_vcount .stBubble{
    background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMo022x2wK7jqfOCUerElGeAEVUQXGVFemlSA9oGdS3NYMZhqUSlM3s6whoG0Kq5_lICk0zhGtvSeY6tiz5z3ORRuBqz4MTaYc_rxJpcG7M8HiksOArd4KHhHqJDtdKninABEeuBTmgd2o/s400/bubble_arrow_pinterest.png') !important;
}
.st_pinterest_vcount{
    margin-bottom: 0px;
    display: block;
}
</style>
<div class='gnr_social_floating'>
    <script type='text/javascript'>var switchTo5x=true;</script>
    <script src='http://w.sharethis.com/button/buttons.js' type='text/javascript'/>
    <script type='text/javascript'>stLight.options({onhover:false});</script>
    <span class='st_fblike_vcount' displaytext=''/>
    <span class='st_twitter_vcount' displaytext='' st_via='ahmad_site'/>
<span class='st_pinterest_vcount' displaytext=''/>
<div style='margin:0px 0 0 5px;'>
    <span class='st_plusone_vcount' displaytext=''/>
</div>
<div class='addthis_toolbox addthis_default_style ' style='margin:5px 0px 5px 8px;'>
<a class='addthis_counter'/>
</div>
<script src='http://s7.addthis.com/js/250/addthis_widget.js' type='text/javascript'/>
<script type='text/javascript'>
var addthis_config = {
     ui_cobrand: &quot;D-GENERA BLOG&quot;,
ui_header_color: &quot;#ffffff&quot;,
     ui_header_background: &quot;#0080FF&quot;
}
</script>
<script type='text/javascript'>var addthis_config = {&quot;data_track_addressbar&quot;:true};</script>
<script src='//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-5064705719d41eef' type='text/javascript'/>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://genlovers.blogspot.com/2014/11/pentingnya-tombol-like-dan-share-di-blog.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>