Button share ringan dan lengkap

button share adalah tombol untuk berbagi ke sosial media. buuton ini biasanya di letakan di bawah posting atau melayang di samping blog. Button share ini sangat berbguna sekali untuk blog anda karena sangat memudahkan para pengunjung blog untuk membagikan posting atau artikel anda. Dengan membagikan artikel anda ke berbagai sosial media itu artinya artikel anda dapat di lihat di sosial media dan mendapatkan pengunjung baru dari sosial media tersebut, maka trafik blog anda akan semakin meningkat.

button share ringan, responsive dan lengkap

Untuk kali ini saya akan membagikan button share di bawah posting seperti gambar di atas. button share yang akan saya bagikan ini tidak hanya untuk Facebook,Twitter, Google+, dan Lintasme saja. namun ketika anda menyentuh +More dengan kursor anda maka akan muncul button share yang lebih banyak lagi seperti gambar dibawah ini.

share buttton lengkap

Dan langsung saja ikuti caranya di bawah ini dengan seksama . he :)

Buka Template > Edit HTML
Taruh CSS di bawah ini di atas atau sebelum ]]></b:skin>

/* share */
#buton-share{float:left;padding:14px 15px;background:#c5c5c5;font-size:13px;font-weight:bold;color:#333;cursor:pointer;display:inline-block}
#share-to{text-align:left;background:#c5c5c5;color:#fff;padding:4px 4px}
.boxsocial{overflow:hidden;padding:5px;background:#e5e5e5}
.boxsocial a:hover{background:#34343C}
.boxsocial:before{content:'';position:absolute;bottom:0;left:-12px;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px}
.boxsocial:after{content:'';position:absolute;bottom:0;right:-12px;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px}
.boxsocial a{text-align:center;display:block;color:#fff!important;font:bold 12px Electrolize,sans-serif;text-decoration:none;transition:all 1s ease;padding:7px 0}
.boxsocial a:hover{box-shadow:0 0 5px #000;border:1px solid #fff}
.boxsocial .boxsocialtitle{font:bold 12px Electrolize,sans-serif;text-align:center;text-transform:uppercase;display:block;width:107px;border:1px solid #000;box-shadow:0 0 5px #444 inset;padding:7px 22px}
.boxfb{float:left;margin-right:3px;width:70px;background:#4154E8}
.boxtwit{float:left;margin-right:3px;width:70px;background:#2C95DD}
.boxgplus{float:left;margin-right:3px;width:70px;background:#DC2C1B}
.boxltsme{float:left;margin-right:3px;width:70px;background:#F0AD17}
.boxmore{float:left;margin-right:1px;width:70px;background:#413F43}

cari <data:post.body/>, biasanya <data:post.body/> di template banyaknya tiga, cari yang tempatnya paling akhir atau paling bawah.
kemudian taruh HTML di bawah ini setelah atau di bawah <data:post.body/>

<div id='buton-share' title='klik untuk membagikan'>
SHARE TO » </div>
<div id='share-to'>
<div class='boxsocial'>
<div class='boxfb'>
<a expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Facebook'>Facebook</a>
</div>
<div class='boxtwit'>
<a expr:href='"http://twittter.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Twitter'>Twitter</a>
</div>
<div class='boxgplus'>
<a expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' target='_blank' title='Share ke Google+'>Google+</a>
</div>
<div class='boxltsme'>
<script>
//<![CDATA[
var uri = window.location.href;
var ttle = document.title;
document.write("<a href='http://www.lintas.me/?c=bookmarklet&url="+uri+"&title="+ttle+"' rel='nofollow' target='_blank' title='Share ke Lintasme'>Lintasme</a>");
//]]>
</script>
</div>
<div class='boxmore'>
<a class='a2a_dd more' href='http://www.addtoany.com/share_save' rel='nofollow' title='More Share'>✚ More</a>
<script async='async' src='http://static.addtoany.com/menu/page.js' type='text/javascript'/>
</div>
</div>
</div>