Cara membuat tombol share melayang di pinggir posting

Cara membuat tombol share melayang di pinggir posting - Kali ini Copast master akan membahas masalah bagaimana cara memasang tombol share yang letaknya di samping posting. Widget ini mudah di gunakan dan widget share ini otomatis mengikui naik turunya scrol bar. Untuk menambakan widge ini di blog sobat silahkan ikuti langkah-langkah berikut ini :

Pertama login ke blog sobat.
Selanjutnya download dulu templatenya, hal ini dilakukan untuk mengantisipasi bila terjadi kesalahan
Pada menu pilih Rancangan ➨ Edit HTML.
Pada Edit Template jangan lupa untuk mencentang Expand Template Widget,
Cari code <b:includable id='post' var='post'>
Apa bila sudah ketemu sobat copast kode di bawah ini tepat di bawah kode di atas

<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilCbY-QfcZGnn1v0fKwqvKJM-Ia-J6VPuoulGeK7KjeFKksEyoiq8Kt2DyaWAImufltE1qjaAh5nLDVBQ5nHjjIMct3ZpUwxqkSrsGCA8O2W4C-Rc4r_eS0FaOh4XdI6lpTazLw1FuDmry/s400/gc_social_sprite.gif') 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/AVvXsEilCbY-QfcZGnn1v0fKwqvKJM-Ia-J6VPuoulGeK7KjeFKksEyoiq8Kt2DyaWAImufltE1qjaAh5nLDVBQ5nHjjIMct3ZpUwxqkSrsGCA8O2W4C-Rc4r_eS0FaOh4XdI6lpTazLw1FuDmry/s400/gc_social_sprite.gif') !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='CopastM'/>
<div style='margin:5px 0 0px 0;'>
<center><a class='pin-it-button' count-layout='vertical' expr:href='"http://pinterest.com/pin/create/button/?url=" + 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('script');
e.setAttribute('type','text/javascript');
e.setAttribute('charset','UTF-8');
e.setAttribute('src','http://assets.pinterest.com/js/pinmarklet.js?r=' + 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: "Copast Master",
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://copast-master.blogspot.com/2012/08/cara-membuat-tobol-share-melayang-di.html' style='color:#CAC8C8;'>Widgets</a></p>
</div>
</b:if></b:if>

Ganti tulisan CopastM dengan akun twitter sobat
Dan yang terakhir simpan dan lihat hasilnya

Apa bila ada ada kesulitan dalam pemasangan widget ini jangan sungkan untuk berkomentar. Dan menanyakan kepada Master Copast . Sekian dulu hasil Master Copast kali ini artikel Tutorial Blog, yang berjudul Cara membuat tombol share melayang di pinggir posting. Semoga bermanfaat Master Copast