Cara Membuat Social Share Button Keren

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.

Bagikan Ke
13 Komentar untuk "Cara Membuat Social Share Button Keren"

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

nambah blog berat sis kebanyakan css =(

kalo itu merasa memberatkan blog, silahkan untuk tidak di pergunakan

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

Manstabb Artikelnya ditunggu kunjungan baliknya gan
digubuk ane

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

This comment has been removed by the author. - Hapus

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

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

kunjungan balik dnk...??

http://habibifbq.blogspot.co.id

kunjungan balik dnk...??

http://habibifbq.blogspot.co.id

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/