Cara Membuat Sharing Buttons Melayang Pada Blogger

PopAds.net - The Best Popunder Adnetwork

Banyak cara yang dapat dilakukan oleh pemilik blog dalam meningkatkan traffic serta mempopulerkan content blognya. Salah satunya adalah dengan menambahkan tombol sharing pada blog, dan berharap para pembaca blognya berkenan untuk mensharing blognya ke semua jejaring sosial seperti Facebook, Twitter, Pinterest,dan lain sebagainya. Oleh sebab itu, disini saya ingin berbagi tutorial mengenai Cara Membuat Sharing Button Melayang Pada Blogger, seperti yang tampak pada tampilan artikel saya di samping.

Cara Memasang Sharing Buttons

Untuk memasang sharing buttons ini pada template blog sobat, sehingga akan tampil setiap penayangan artikel blog sobat, silahkan ikuti tutorialnya berikut.
1. Masuk ke menu Template
2. Tuju ke Edit HTML
3. Cari kode berikut ini :

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

4. Tepat di bawahnya tambahkan kode berikut,

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<style>
.vins_social_floating {
position:fixed;
bottom:10%;
margin-left:-60px;
float:left;
width:60px;
background-color:#f7f7f7;
padding: 5px 0 0px 0px;
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; }
.vins_social_floating .vins_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.vins_social_floating .st_twitter_vcount, .vins_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.vins_social_floating .st_fblike_vcount{
margin-left:5px;
}
.vins_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.vins_social_floating .chicklets, .vins_social_floating .stMainServices {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuB6Z912rwF5jJvJKDUZ2xasGHbz4eZiqq2Bhwz_yVOPnMu_BzM_yZ2IysiYMsQ9C4yA2w-hDTbBZ3Up73xwpNewDfyYBGrdES8MBZ-WvO_lvCV4D3SXOaGqhyphenhyphentCsGvNrHnKzyJUP6n08/s1600/Sub_pint.png') no-repeat !important;
height:19px !important;
width:45px !important;
padding:0 !important;
}
.st_email .chicklets{
background-position:0 -77px !important;
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuB6Z912rwF5jJvJKDUZ2xasGHbz4eZiqq2Bhwz_yVOPnMu_BzM_yZ2IysiYMsQ9C4yA2w-hDTbBZ3Up73xwpNewDfyYBGrdES8MBZ-WvO_lvCV4D3SXOaGqhyphenhyphentCsGvNrHnKzyJUP6n08/s1600/Sub_pint.png') !important;
}
.vins_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.vins_social_floating .stButton_gradient{
border:none !important;
}
.vins_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;
}
.vins_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;
}
.vins_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}.vins_social_floating .st_pinterest_vcount{
margin-left:5px;
}
.vins_social_floating .st_pinterest_vcount .st-pinterest-counter{
background-position:0 -19px !important;
}
.vins_social_floating .st_pinterest_vcount .stBubble_count{
color:#FF0505;
background-color:#fbf8f8 !important;
}
.vins_social_floating .st_pinterest_vcount .stBubble{
background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfpRfnrRRKsfd_5A8_JTVGPEZhiIeuvsodjAcr2aWe_Npl-aQrFM6nopwrscpFUrWKm-fTgghd9OHIFy9lgqwEMHQwU_BhXhTR4MF_LgDATgSy7p4g0LNFCmiw7D2nQ7M28X97Cc-_q_Y/s1600/pinterest_arrow.png') !important;
}
.st_pinterest_vcount{
margin-bottom: 0px;
display: block;
}
</style>

<div class='vins_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, , doNotHash: true, doNotCopy: true, hashAddressBar: false});</script>

<div style='margin:0px 0 0px 10px;'><div id='fb-root'/><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/><fb:like font='' href='' layout='box_count' send='false' show_faces='false'/></div>
<span class='st_twitter_vcount' displaytext='' st_via='vinspirationz'/>
<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: "vinspirations",
ui_header_color: "#ffffff",
ui_header_background: "#0080FF"
}
</script>
<span class='st_email' displaytext=''/>
<p style=' line-height:0px; font-size:10px; font-weight:bold; text-align:center;'><a href='http://vinspirations.blogspot.com/2013/12/cara-membuat-sharing-buttons-melayang.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Keterangan :

Sesuaikan margin-left dengan batas luar outer-wrappernya template sobat, agar tidak kelihatan tumpang-tindih.
Untuk mengubah background-color silahkan lihat kode warnanya disini.
Ubah vinspirationz dengan username twitter sobat.

Sebagai tambahan, bila tombol Like Facebook-nya tidak bekerja, tambahkan script berikut di bawah kode <body>. Script ini cukup satu pada template blog sobat, jadi jika sudah ada, maka tidak perlu ditambah lagi. Berikut script-nya.

<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

Last Words

Demikianlah tutorial mengenai Cara Membuat Sharing Buttons Melayang Pada Blogger. Beri komentar sobat bila mengalami kendala dalam menerapkan tutorial ini pada blog sobat. Akhir kata, semoga artikel ini bermanfaat buat kita semua, - Salam Blogging!