Cara Membuat Tombol Share Melayang Di Blog

Serbatahu Blog, Widget - Cara membuat tombol share memang sudah biasa di kalangan blogger, tapi jika tombol share yang satu ini melayang disebelah kiri blog gimana, pastinya keren, disini ada beberapa tombol share seperti Twitter, Tombol Like, Share to Facebook, Tombol Pinterest, Google+, Email dan masih banyak lainnya.

Manfaat lainnya dari Tombol Share melayang ini antara lain, bisa meningkatkan pengunjung, bisa menambah daya tarik blog anda, membuat blog anda tampil Profesional, dan menarik minat pengunjung untuk membagikan artikel anda di berbagai jejaring social, cara membuatnya sangat mudah tidak ribet.

Cara Membuat :
1. Login ke Blog kamu.
2. Pilih Rancangan > Edit HTML > Centang Expand Widget Template
3. Cari kode <b:includable id='post' var='post'> setelah ketemu letakan kode di bawah ini tepat di bawah kode yang berwarna merah tadi.

<style>
.mbt_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;
}
.mbt_social_floating .mbt_side_social_button{
margin-bottom:5px;
float:none;
height:auto;
width:60px;
}
.mbt_social_floating .st_twitter_vcount, .mbt_social_floating.st_plusone_vcount, .st_email{
margin-left:5px;
}
.mbt_social_floating .st_fblike_vcount{
margin-left:5px;
}
.mbt_social_floating .stButton_gradient{
background:none !important;
height:21px !important;
padding-left:0 !important;
}
.mbt_social_floating .chicklets, .mbt_social_floating .stMainServices {
background:url(&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYMuXp2rCiHh6FYZ8NiRHy2KzYC1E-e1WR38l7EoVx63Ud8XlgsrB0ggn4yH9NCVRAQLbyk-zhF1Jt_nzYhP-i-KHVE9XfuB55fiLzXcRrevxq5XQ8GyvrEaHjHr4kU84TdErxPG2WnDyM/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/AVvXsEhYMuXp2rCiHh6FYZ8NiRHy2KzYC1E-e1WR38l7EoVx63Ud8XlgsrB0ggn4yH9NCVRAQLbyk-zhF1Jt_nzYhP-i-KHVE9XfuB55fiLzXcRrevxq5XQ8GyvrEaHjHr4kU84TdErxPG2WnDyM/s400/gc_social_sprite.gif&#39;) !important;
}
.mbt_social_floating .st_twitter_vcount .st-twitter-counter{
background-position:0 -58px !important;
}
.mbt_social_floating .stButton_gradient{
border:none !important;
}
.mbt_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;
}
.mbt_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;
}
.mbt_social_floating .stBubble{
background-position: 21px 31px !important;
height:35px !important;
}
</style>
<div class='mbt_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='blazer_blog'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='&quot;http://pinterest.com/pin/create/button/?url=&quot; + data:post.url'>Pin It</a>
<a href='javascript:void(run_pinmarklet())' style='margin-left:-46px; width:43px; height:20px; display:inline-block;'/>
<script src='http://assets.pinterest.com/js/pinit.js' type='text/javascript'/>
<script type='text/javascript'>
function run_pinmarklet() {
var e=document.createElement(&#39;script&#39;);
e.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
e.setAttribute(&#39;charset&#39;,&#39;UTF-8&#39;);
e.setAttribute(&#39;src&#39;,&#39;http://assets.pinterest.com/js/pinmarklet.js?r=&#39; + Math.random()*99999999);
document.body.appendChild(e);
}
</script> </center>
</div>
<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;Blazer Blog&quot;,
ui_header_color: &quot;#ffffff&quot;,
ui_header_background: &quot;#0080FF&quot;
}
</script>
<span class='st_email' displaytext=''/>
</div>

Ganti kode yang berwarna merah dengan Username Twitter kamu.
Setelah selesai jangan dulu disimpan, klik dulu Pertinjauan, jika sudah bagus baru simpan.

Tweet

Subscribe via Email