Cara Membuat Social Share Button Keren

Cara Membuat Social Share Button Keren. Sobat Blogger, widget Social Share Button atau bisa disebut widget tombol berbagi, berhubung bahwa kegunaan widget ini sangat efektif untuk kemajuan blog dalam hal share artikel, maka saya akan memberi anda tutorial membuat widget social share. Dalam widget ini menggunakan empat kode jaringan yang populer seperti media sosial berbagi ke (facebook, twitter, google + dan linkedin) dan menggunakan slide-in dan slide-out, untuk melihat tampilannya silahkan anda lihat gambar di bawah ini.

Cara Membuat Social Share Button Keren

Untuk penempatannya sendiri widget ini akan saya pasangkan di bawah posting blog dan jika anda tertarik dengan widget ini silahkan ikuti tutorialnya.

Cara Menambahkan Widget Social Share Button :
1. Buka akun blogger anda.
2. Pilih menu > template > klik edit Html
3. Copy code dibawah ini dan letakan tepat di atas kode </head>

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js"></script>

4. Selanjutnya copy code dibawah ini dan letakan tepat di atas </head> , Simpan template.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>  <style type='text/css'>/*<![CDATA[*//*-----Social Sharing CSS code widget by www.digitalhubinc.com----*/@import url(http://fonts.googleapis.com/css?family=Open+Sans:400);@import "//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css";#sbuttons {    border-radius: 5px;    padding: 14px 7px;    background: white;    width: 680px;    overflow: hidden;    margin: 2px auto 0;    box-shadow:0 2px 3px rgba(71, 71, 71, 0.31);}.button {    background: #DCE0E0;    position: relative;    display: block;    float: left;    height: 40px;    margin: 0 7px;    overflow: hidden;    width: 150px;    border-radius: 3px;    -o-border-radius: 3px;    -ms-border-radius: 3px;    -moz-border-radius: 3px;    -webkit-border-radius: 3px;}.icon {    display: block;    float: left;    position: relative;    z-index: 3;    height: 100%;    vertical-align: top;    width: 38px;    -moz-border-radius-topleft: 3px;    -moz-border-radius-topright: 0px;    -moz-border-radius-bottomright: 0px;    -moz-border-radius-bottomleft: 3px;    -webkit-border-radius: 3px 0px 0px 3px;    border-radius: 3px 0px 0px 3px;    text-align: center;}.icon i {    color: #fff;    line-height: 42px;}.slide {    z-index: 2;    display: block;    margin: 0;    height: 100%;    left: 38px;    position: absolute;    width: 112px;    -moz-border-radius-topleft: 0px;    -moz-border-radius-topright: 3px;    -moz-border-radius-bottomright: 3px;    -moz-border-radius-bottomleft: 0px;    -webkit-border-radius: 0px 3px 3px 0px;    border-radius: 0px 3px 3px 0px;}.slide p {    font-family: Open Sans;    font-weight: 400;    border-left: 1px solid #fff;    border-left: 1px solid rgba(255,255,255,0.35);    color: #fff;    font-size: 16px;    left: 0;    margin: 0;    position: absolute;    text-align: center;    top: 10px;    width: 100%;}.button .slide {    -webkit-transition: all 0.2s ease-in-out;    -moz-transition: all 0.2s ease-in-out;    -ms-transition: all 0.2s ease-in-out;    -o-transition: all 0.2s ease-in-out;    transition: all 0.2s ease-in-out;}.facebook iframe {    display: block;    position: absolute;    right: -16px;    top: 10px;    z-index: 1;}.twitter iframe {    width: 90px !important;    right: 5px;    top: 10px;    z-index: 1;    display: block;    position: absolute;}.google #___plusone_0 {    width: 70px !important;    top: 10px;    right: 15px;    position: absolute;    display: block;    z-index: 1;}.linkedin .IN-widget {    top: 10px;    right: 2px;    position: absolute;    display: block;    z-index: 1;}.facebook:hover .slide {    left: 150px;}.twitter:hover .slide {    top: -40px;}.google:hover .slide {    bottom: -40px;}.linkedin:hover .slide {    left: -150px;}.facebook .icon, .facebook .slide {    background: #305c99;}.twitter .icon, .twitter .slide {    background: #00cdff;}.google .icon, .google .slide {    background: #d24228;}.linkedin .icon, .linkedin .slide {    background: #007bb6;}    /*]]>*/</style>  </b:if>

5. Langkah selanjutnya copy kode dibawah ini dan letakan tepat dibawah code <data:post.body/>

 <div style='border-bottom: 1px solid #CCCCCC; padding: 10px 10%;margin:5px;'/><div id='sbuttons'><div class='facebook button'><i class='icon'><i class='icon-facebook'></i></i><div class='slide'><p>facebook</p></div><fb:share-button type='button_count'/> </div> <div class='twitter button'><i class='icon'><i class='icon-twitter'></i></i><div class='slide'><p>twitter</p></div><a class='twitter-share-button' data-via='digitalhubinc' href='https://twitter.com/share'>Tweet</a><script>!function(d,s,id){      var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?&#39;http&#39;:&#39;https&#39;;      if(!d.getElementById(id)){        js=d.createElement(s);        js.id=id;        js.src=p+&#39;://platform.twitter.com/widgets.js&#39;;fjs.parentNode.insertBefore(js,fjs);}}(document, &#39;script&#39;, &#39;twitter-wjs&#39;);  </script>  </div> <div class='google button'><i class='icon'><i class='icon-google-plus'></i></i><div class='slide'><p> google+</p></div><!-- Place this tag where you want the +1 button to render. --><div class='g-plusone' data-size='medium'></div><!-- Place this tag after the last +1 button tag. --><script type='text/javascript'>    (function() {      var po = document.createElement(&#39;script&#39;);      po.type = &#39;text/javascript&#39;;      po.async = true;      po.src = &#39;https://apis.google.com/js/plusone.js&#39;;      var s = document.getElementsByTagName(&#39;script&#39;)[0];      s.parentNode.insertBefore(po, s);    }    )();  </script>  </div>  <div class='linkedin button'><i class='icon'><i class='icon-linkedin'></i></i><div class='slide'><p>linkedin</p></div><script data-counter='right' type='IN/Share'></script><script src='//platform.linkedin.com/in.js' type='text/javascript'> lang: en_US</script></div></div><div style='border-bottom: 1px solid #CCCCCC; padding: 5px 10%;margin:2px;'/> </b:if>  

6. Selipkan code <b:if cond='data:blog.pageType == &quot;item&quot;'> di antar kedua code tag.

Contoh :

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
Widget code social....bla bla bla

Catatan : Biasanya code <data:post.body/> , lebih dari satu silahkan anda sesuiakan penempatannya, maka misalkan anda meletakan di code pertama tidak muncul, maka di ulang di kode kedua dan selanjtnya.

16 Responses to "Cara Membuat Social Share Button Keren"

  1. Nah Kalo yang ini Lebuh bagus Mba, Saya Suka Nih, Saya sudah berhasil mencobanya, silakan dicoba cek fokus-belajar.blogspot.com

    BalasHapus
  2. nambah blog berat sis kebanyakan css =(

    BalasHapus
    Balasan
    1. kalo itu merasa memberatkan blog, silahkan untuk tidak di pergunakan

      Hapus
  3. Manstabb Artikelnya ditunggu kunjungan baliknya gan
    digubuk ane

    BalasHapus
  4. Terimakasih gan ,,,,
    Kunjungan balik
    http://movies-populer.blogspot.com
    http://mp39jelly.blogspot.com

    BalasHapus
  5. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  6. thx ya infonya agan...backlink ya...
    http://diinformasikita.blogspot.com/

    BalasHapus
    Balasan
    1. kunjungan balik dnk...??

      http://habibifbq.blogspot.co.id

      Hapus
    2. kunjungan balik dnk...??

      http://habibifbq.blogspot.co.id

      Hapus
  7. kereennn... pada mampir ya http://tuturahmad.blogspot.co.id/
    kita ngopi yang bebas sianida

    BalasHapus
  8. klo hanya ingin menampilkan tombol share facebook, twitter dan google plus bagaimana caranya (tanpa linkedin, seperti contoh datas)? salam kenal, kunjungan balik
    http://amalan-islami.blogspot.co.id/

    BalasHapus
  9. minta yg ori dong... bingung masukin link di url share nya

    BalasHapus
  10. Banyak juga ya langkahnya, kalau yg langsung script untuk di pasang di widget ada gak ya mas :)

    BalasHapus
  11. Gabung yuk di situs judi kami,

    terpercaya, Domino 99, bandarQ, Hanya di

    CebanQQ, c*m
    Bonus cashback: 0.4%
    Refferal: 20%
    Bagi member baru tingkat kemenangan diatas 78%+

    berdasarkan statistik bosku :)
    tunggu promo menarik dari kami :)

    BalasHapus
  12. link alternatif poker online :
    https://tipstrickspoker.online
    https://tipstrickpoker.online
    http://tipstrickpoker.pw

    BalasHapus