Membuat Widget Tombol Share Mengambang di Halaman Postingan

Widget tombol berbagi yang mengambang di blog semakin populer akhir-akhir ini. Kali ini saya akan berbagi tutorial cara membuat tombol berbagi yang mengambang disebelah kiri postingan. Widget ditampilkan di halaman posting saja dan tidak akan ditampilkan pada homepage. Versi ini berbeda dengan yang lain karena menerapkan dua efek yaitu Jquery dan CSS3. Menggunakan tombol Twitter yang telah dimodifikasi, ditambah dengan tombol Pinterest, AddThis dan tombol Email serta tombol wajib Facebook dan Google Plus.

Langkah-langkah yang dilakukan sangat mudah, cukup dengan Copy-Paste.
1. Login ke Blogger -> Template
2. Backup template Anda untuk mencegah hal-hal yang tidak diinginkan
3. Edit HTML -> Centang Expand Template Widget
4. Cari kode:

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

5. Tepat dibawahnya paste kode berikut:

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <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/AVvXsEgpk7TXqjoVtRiSKgus-kVkHAVvIlbrQhlU-P_FqOJ0kr7eGmPf4mQuiNEHsz3NTg5LJJ1Tbjpnhw03JqP6GQD0P_MN_mP-VtuzUyFUvCISz_yWhGREp6-s-_xTvWHD-avZvjt1mc0FSLvV/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/AVvXsEgpk7TXqjoVtRiSKgus-kVkHAVvIlbrQhlU-P_FqOJ0kr7eGmPf4mQuiNEHsz3NTg5LJJ1Tbjpnhw03JqP6GQD0P_MN_mP-VtuzUyFUvCISz_yWhGREp6-s-_xTvWHD-avZvjt1mc0FSLvV/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='mainbom'/>
    <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;MainBom.Com&quot;,
    ui_header_color: &quot;#ffffff&quot;,
         ui_header_background: &quot;#0080FF&quot;
    }
    </script>
    <span class='st_email' displaytext=''/>
    </div>
    </b:if></b:if>

6. Ganti mainbom dengan username Twitter Anda
7. Save template, selesai.

Sesuaikan letak widget dengan Template Anda.

• facebook
• linkedin
• twitter
• google+
• pinterest