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.

15 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

    ReplyDelete
  2. nambah blog berat sis kebanyakan css =(

    ReplyDelete
    Replies
    1. kalo itu merasa memberatkan blog, silahkan untuk tidak di pergunakan

      Delete
  3. nice post gan, terimakasih, kunjung balik ya :)
    http://goo.gl/hSnIaa

    ReplyDelete
  4. Manstabb Artikelnya ditunggu kunjungan baliknya gan
    digubuk ane

    ReplyDelete
  5. Terimakasih gan ,,,,
    Kunjungan balik
    http://movies-populer.blogspot.com
    http://mp39jelly.blogspot.com

    ReplyDelete
  6. This comment has been removed by the author.

    ReplyDelete
  7. thx ya infonya agan...backlink ya...
    http://diinformasikita.blogspot.com/

    ReplyDelete
    Replies
    1. kunjungan balik dnk...??

      http://habibifbq.blogspot.co.id

      Delete
    2. kunjungan balik dnk...??

      http://habibifbq.blogspot.co.id

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

    ReplyDelete
  9. 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/

    ReplyDelete
  10. minta yg ori dong... bingung masukin link di url share nya

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

    ReplyDelete