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 sajian Template
2. Tuju ke Edit HTML
3. Cari isyarat berikut ini :
<b:includable id='post' var='post'>
4. Tepat di bawahnya tambahkan isyarat 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/AVvXsEilXb46LCrzy9RcjwCEQOl_Qj2CQyag0caK_b9OQdPDivsA3xbwJFSGeaVyg91Rr_dcpE22Lqu7Ta5k1njIjv-NJ0AaYfYxqGpHSKYhAsNauGeRA3ERXTSi9qLqerI-1st2uw4kwojkoHA/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/AVvXsEilXb46LCrzy9RcjwCEQOl_Qj2CQyag0caK_b9OQdPDivsA3xbwJFSGeaVyg91Rr_dcpE22Lqu7Ta5k1njIjv-NJ0AaYfYxqGpHSKYhAsNauGeRA3ERXTSi9qLqerI-1st2uw4kwojkoHA/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/AVvXsEjB8ypI4Zh3F4wO4C3sIgyoHsShXkRLmXLZEUPhtqzWOyXGGI9jAzui2o2wrGYZPtxoHLqpwLU4yKClMi6gm5-TxaQQu5b75NWtX6XinXDNyZusO8eCA2qH3xjmPAiB4I0DHC_Xf-ll6V8/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>
<!-- No more works properly so removing it from vins list<span class='st_fblike_vcount' displaytext=''/>-->
<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=' ' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>
Keterangan :
- Sesuaikan margin-left dengan batas luar outer-wrappernya template sobat, supaya tidak kelihatan tumpang-tindih.
- Untuk mengubah background-color silahkan lihat isyarat warnanya disini.
- Ubah vinspirationz dengan username twitter sobat.
Sebagai tambahan, bila tombol Like Facebook-nya tidak bekerja, tambahkan script berikut di bawah isyarat <body>. Script ini cukup satu pada template blog sobat, jadi kalau 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 teman bila mengalami hambatan dalam menerapkan tutorial ini pada blog sobat. Akhir kata, semoga artikel ini bermanfaat buat kita semua, - Salam Blogging!
