Cara Membuat Tombol Share Button Sederhana Tapi Keren
Maka tutorial berikut patut untukdicoba di blog anda.
Cara Membuat Tombol Share Button Sederhana Tapi Keren, tau kan tombol share itu seperti apa?
Dan fungsinya buat apa...?
Tombol share berikut design yang menjadi target kali ini :
Tombol Share Button Sederhana Tapi Keren ini saya comot dari template Seo Elite,atau template karya Mas Bamz.
Mungkin jika anda merasa kurang menarik bisa skip artikel ini, jika merasa ingin memasang di blog anda, maka lanjutkan ke tutorial :
Copy kode berikut diatas ]]></b:skin>
* Tombol Share set */Jika sudah lanjutkan copy kode selanjutnya.
#share-button {
margin:0 0 8px;
padding:0;
overflow:hidden;
}
#share-button p {
margin: 0 3px 3px 0;
font-size: 100%;
float: left;
background: #f9f9f9;
display: block;
padding: 2px 5px;
margin: 0 3px 3px 0;
}
#share-button a {
position: relative;
float: left;
display: block;
color: #fafafa;
padding: 2px 5px;
border: 1px solid #fff;
}
#share-button a:hover {
top:1px;
left:1px;
box-shadow:0px 0px 3px rgba(1,1,1,.1);
}
<div id='share-button'>
<p>Share ke:</p>
<a class='facebook' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url + "&title=" + data:post.title' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a class='facebook' expr:href='"https://plus.google.com/share?url=" + data:post.url' rel='nofollow' style='background:#c0361a;' target='_blank' title='Google+'>Google+</a>
<a class='twitter' expr:data-text='data:post.title' expr:data-url='data:post.url' href='http://twitter.com/share' rel='nofollow' style='background:#4099ff;' target='_blank' title='Twitter'>Twitter</a>
<div class='clear'/>
</div>
Pastekan diatas realated post anda,atau dibawah <data:post.body/>, yang biasanya tempat anda menaruh iklan adsense. bisa dicoba satu satu.
Jika sudah maka simpan template anda dan lihat hasilnya.
Tombol Share Button Sederhana Tapi Keren ini ialah favorit saya,sangat simpel,sederhana,namun tetap enak dipandang mata atau keren.
0 komentar: