Cara Membuat Sharing Buttons Melayang Pada Blogger

Widgets

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.
Tutorial Blog

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 == &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<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('http://4.bp.blogspot.com/--KrXppIQEDs/UqCZ8fP6a0I/AAAAAAAAAss/5RZwKhYQE3k/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('http://4.bp.blogspot.com/--KrXppIQEDs/UqCZ8fP6a0I/AAAAAAAAAss/5RZwKhYQE3k/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('http://4.bp.blogspot.com/-322rM_F_kRU/UqCZ8E11ikI/AAAAAAAAAso/VDXGZzR31Hw/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: &quot;vinspirations&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</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!




lazadda

Be the first to reply! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

Tukeran link


Vinspirations



DMCA.com
 

Info Blog

Recent Comments

Label

Copyright 2009  ©  Vinspirations | powered by Blogger

Template by vinspirations | Best View on Firefox