Cara Membuat Tombol Share Button Sederhana Tapi Keren

Tutorial berikut ialah tentang design template anda, mungkin sudah bosan dengan tampilan yang itu - itu aja.
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 :
Cara Membuat Tombol Share Button Sederhana Tapi Keren
Dan fungsinya ialah untuk membagikan artikel di blog anda, misal si pengunjung merasa artikel anda sangat bermanfaat, dan ingin membagikan kepada temanya via facebook,google+,twitter atau yang lainya tanpa repot mengcopy urlnya, jadi tinggal klik tombol share buttonya.

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 */
#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);
}
Jika sudah lanjutkan copy kode selanjutnya.
<div id='share-button'>
<p>Share ke:</p>
<a class='facebook' expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' style='background:#3b5998;' target='_blank' title='Facebook'>Facebook</a>
<a class='facebook' expr:href='&quot;https://plus.google.com/share?url=&quot; + 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.
Share This :

Artikel terkait : Cara Membuat Tombol Share Button Sederhana Tapi Keren

Posting Lebih Baru Posting Lama

0 komentar: