Membuat Widget Share Button di Bawah Postingan Blog

Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren | Assalamualikum wr.wb hai sobat blogger semuanya apa kabarnya hari ini ?? saya doakan baik baik saja, nah pada postingan kali ini admin cyber 88 akan share nih buat anda semua yakni Cara Membuat Widget Tombol Share keren ( Share Button dibawah Postingan Blog .

Share Button atau Tombol Berbagi merupakan suatu widget social media yang berfungsi untuk menambah jumlah visitor atau pengunjung bagi blog kita masing masing dan juga agar postingan tersebut bisa tersebar ke dunia maya hanya dengan klik tombol tersebut.

Baca Juga > Cara Membuat Widget Social Media Melayang Disamping sidebar Blog

Demo "Widget Share Button Keren Dibawah Postingan Blog"

Memang sekarang ini widget Share Button dibawah postingan tidak asing lagi bagi para sobat blogger namun tetapi para pemula pemula blogger sekarang ini juga perlu untuk mengetahui lebih lanjut tentang Membuat Widget Share Button di Bawah Postingan Blog.

Dengan demikian memasang widget share button dibawah postingan juga perlu untuk kita semua nah untuk tutorial atau tipsnya anda juga bisa mendapatkanya dibawah ini.

Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren

• Login di Blogger.com
• Masuk ke Dashboard > Template
• Terus click Edit HTML > lalu tekan tombol di keyboard secara bersamaan "CTRL + F" > Akan muncul kotak search .
• Kemudian cari kode ]]></b:skin> > jika sudah masukkan kode CSS ini diatas kode tersebut .

   ul.social_cyber88 {
    list-style:none;
    display:inline-block;
    margin:15px auto;
    }
    ul.social_cyber88 li {
    display:inline;
    float:left;
    background-repeat:no-repeat;
    }
    ul.social_cyber88 li a {
    display:block;
    width:50px;
    height:50px;
    padding-right:10px;
    position:relative;
    text-decoration:none;
    }
    ul.social_cyber88 li a strong {
    font-weight:400;
    position:absolute;
    left:20px;
    top:-1px;
    color:#fff;
    z-index:9999;
    text-shadow:1px 1px 0 rgba(0,0,0,0.75);
    background-color:rgba(0,0,0,0.7);
    -moz-border-radius:3px;
    -moz-box-shadow:0 0 5px rgba(0,0,0,0.5);
    -webkit-border-radius:3px;
    -webkit-box-shadow:0 0 5px rgba(0,0,0,0.5);
    border-radius:3px;
    box-shadow:0 0 5px rgba(0,0,0,0.5);
    padding:3px;
    }
    ul.social_cyber88 li.abfacebook {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizW1Gx80YzVVWpKgl12z_CtWaR5uJCmo1PBnS5jKW4DEfVdgJ03uTYjkM555Mag1xQz1_QZYBxkvOMwgo4yIkguJTDHGhYG2jsk9UVV7hdajaLOANeQbyMw5tRtfJT6kP07GVrjlMy-zCQ/s1600/btrix-facebook-icon.png);
    }
    ul.social_cyber88 li.abtwitter {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHzgEP6wCf4LWKdpdQqlZFtg0wj3fm6Iho4mYlNS7DctVMpJiKbU7c_ZknufYuJ2xTM9C_wjWc4eW6J3ZALhCdPk9ZsDfw35N0_Lp7EKDRltcQg72K_xRjQQliKsdUEN2kB0A_Och-94-3/s1600/btrix-twitter-icon.png);
    }
    ul.social_cyber88 li.abgoogleplus {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTRBdHf0SovX2ztxl4NUB8rasCkvQNBnjPpagKOltiADkiK5q7VBb_mHN27fa0N5YXP6W7Ah6P8lkAt8Zz1o9JqjkOXOTK_nlcJK6Re2B27s5Pmq0JeydiKrtHy1v_ojUFRLy7qqoaZwIQ/s1600/btrix-google-icon.png);
    }
    ul li.abpinterest {
    background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzIC7IZVFhf5UAvxAvhKPzb3q7m9XfGsq1ovFQwiN3ixYZ-HzF4aILv_hiLTobrnSJ3-foWlKNSGtv5WF7jG8jnict6pZ7hROqew5S2KdNzSb9ckny5My2n0u46tBJ2Dd6_DXiWDXCl_2D/s1600/btrix-Pinterest-icon.png);
    }
    ul.social_cyber88 li.abstumbleupon {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyTaVUacM6eCxwyQg_NnfZhAOTvzcDh-ag6Kcf9iLlIz-lqUpfANnN-Buz2fybkRdDUqnPNldvwtVsa1GG8GIEmgRim6yDZPKF0de-Wttn_31Jx-HM1pzubT8xabHa_Vi4NlNWGpnqgyEy/s1600/btrix-StumbleUpon-icon.png);
    }
    ul.social_cyber88 li.abdig {background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF9Qv346ItgvOkFDnJMdcsFIIFY8uM7sJgm3C8nkuTCtanAlsL5Iin9OFLCuiKUPQ9P9xiKQSn6Nr0e-QEwueIRrPmf_xXVS7N5ZQJ6tmu81zdLJsUP8hca1598EHVhmRXFe0buvjkgD-x/s1600/btrix-Digg-icon.png);
    }
    ul.social_cyber88 li.ablinkedin {
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiT-HoLs3EdS1wjCwbX0jUVhZXPacCPOdsG3iCq18Xkna1fm5oExQThMXu9W-RnV13OW5G-z3DQzQDh9H2cgmSvDWA8XTb8sqoiC_H0EoMqGIqKsrIkUqrv2_6nObFy_ECzHzs_ln6KrctY/s1600/btrix-Linkedin-icon.png);
    }
    #animation_cyber88:hover li {
    opacity:0.2;
    }
    #animation_cyber88 li {
    -webkit-transition-property:opacity;
    -webkit-transition-duration:500ms;
    -moz-transition-property:opacity;
    -moz-transition-duration:500ms;
    }
    #animation_cyber88 li a strong {
    opacity:0;
    -webkit-transition-property:opacity, top;
    -webkit-transition-duration:300ms;
    -moz-transition-property:opacity, top;
    -moz-transition-duration:300ms;
    }
    #animation_cyber88 li:hover {
    opacity:1;
    }

#animation_cyber88 li:hover a strong {
    opacity:1;
    top:-10px;
    }

• Kemudian cari kode <data:post.body/> jika kalian menemukan beberapa kode tersebut ( biasanya ada 3 ) pilih yg nomor terakhir saja jika kalian sudah memasang read more otomatis .
• Jika sudah pastekan kode Pemanggilnya dibawah ini.

<!-- Share Button Cyber88 Widget Mulai-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='font-size: 22px;padding: 7px;margin: 0px auto;text-align: center;font-family: Oswald;text-transform: uppercase;color: #216A93;background: none repeat scroll 0% 0% #DDD;border: 1px dotted #AAA;'><b>Share this article with your friends</b></div>
<div style='text-align:center'>
    <ul class='social_cyber88' id='animation_cyber88'>
    <li class='abfacebook'>
    <a expr:href='&quot;http://www.facebook.com/share.php?v=4&amp;src=bm&amp;u=&quot; + data:post.url + &quot;&amp;t=&quot; + data:post.title ' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' ><strong>Facebook</strong></a>
    </li>
    <li class='abtwitter'>
    <a expr:href='&quot;http://twitter.com/home?status=&quot; + data:post.title + &quot; -- &quot; + data:post.url ' title='Twitter' target='_blank'><strong>Twitter</strong></a>
    </li>
    <li class='abgoogleplus'>
<a expr:href='&quot;https://plusone.google.com/_/+1/confirm?hl=en&amp;url=&quot; + data:post.url' onclick='window.open(this.href,&apos;sharer&apos;,&apos;toolbar=0,status=0,width=626,height=436&apos;); return false;' title='G+'  target='_blank'><strong>Google+</strong></a>
    </li>
    <li class='abpinterest'>
<a href='javascript:void((function()%7Bvar%20e=document.createElement(&apos;script&apos;);e.setAttribute(&apos;type&apos;,&apos;text/javascript&apos;);e.setAttribute(&apos;charset&apos;,&apos;UTF-8&apos;);e.setAttribute(&apos;src&apos;,&apos;http://assets.pinterest.com/js/pinmarklet.js?r=&apos;+Math.random()*99999999);document.body.appendChild(e)%7D)());'  target='_blank' title='Pinterest'><strong>Pinterest</strong></a>
    </li>
    <li class='abstumbleupon'>
    <a expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title ' title='Stumbleupon'  target='_blank'><strong>StumbleUpon</strong></a>
    </li>
    <li class='abdig'>
      <a expr:href='&quot;http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' title='Dig'  target='_blank'><strong>Dig</strong></a>
    </li>
    <li class='ablinkedin'>
    <a expr:href='&quot;http://www.linkedin.com/shareArticle?mini=true&amp;url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title + &quot;&amp;summary=&amp;source=&quot;'  target='_blank' title='LinkedIn'><strong>LinkedIn</strong></a>
    </li>
  </ul></div>
</b:if>
<!-- Share Button Cyber88 Widget Selesai-->

• Eiit jangan simpan dulu templatenya , jika kalian ingin Share Button persis seperti gambar diatas kalian pasang dulu Script Font :Oswald nya .
• Cari Kode <head> > Paste kan kode dibawah ini dibawah kode <head>.

<link href='http://fonts.googleapis.com/css?family=Oswald:400,700' rel='stylesheet' type='text/css'/>

• Kemudian Klik Simpan Template anda .
• Enjoy.

Nah itulah Artikel tentang Cara Membuat Widget Tombol Share atau Share Button di Bawah Postingan Blog Keren dan semoga kalian bisa memasangnya diblog kalian masing masing dan semoga kalian bisa mendapatkan visitor yang lebih oke :D . Demikianlah artikel tentang Membuat Widget Share Button di Bawah Postingan Blog semoga artikel ini bisa bermanfaat bagi kita dan kalian semua wassalamualikum wr.wb.