Membuat tombol share Dengan CSS3 "Button Share CSS3 Style"

Penggunaan share button (Social booksmark) di blog sangat berguna sekali untuk meningkatkan popularitas blog, tentunya blogger semua sudah tahu salah satu cara untuk meningkatkan popularitas blog yaitu dengan memasang tombol share (Social booksmark).

Sekarang saya coba membuat share button dengan CSS3, share button ini menggunakan ikon dan teks secara horizontal dan juga teks shadow, background gradient dengan CSS3.

Contoh Tombol Share dengan CSS3 seperti dibawah ini.
Button Share CSS3 Style
Tombol share ini saya coba pasang dibawah postingan, tapi anda bisa saja memasang di bagian yang anda inginkan.

Untuk cara pembuatan tombol share dibawah posting seperti berikut :

Masuk pada Edit HTML > Expand Template Widget
Masukan kode dibawah ini sebelum kode ]]></b:skin>

#bookmarks {
padding:6px 0px;text-align:left; overflow: hidden;}
#bookmarks a {
padding:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
color: #9999; text-shadow:1px 1px 0px rgba(255,255,255,0.8);
border: solid 1px #c0c0c0; background: #fff;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
background: -moz-linear-gradient(top, #fff, #ededed);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); }

#bookmarks a:hover {
background: #ededed; border: solid 1px #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#dcdcdc));
background: -moz-linear-gradient(top, #fff, #dcdcdc);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dcdcdc'); }

Lalu cari kode <data:post.body/>
Masukan kode tombol share di bawah ini setelah kode <data:post.body/>

<div id='bookmarks'>
<a expr:share_url='data:post.url' name='fb_share' rel='nofollow' type='button_count'/> <script src='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/>

<a class='tweet' expr:href='&quot;http://twitter.com/home?status=Reading: &quot; + data:blog.title + &quot; - &quot; + data:post.url + &quot; (@BBW)&quot;' rel='nofollow' title='Tweet This!'><img src='http://a1.twimg.com/a/1286563368/images/favicon.ico' style='vertical-align:middle;'/> Twitter</a>

<a class='digg' expr:href='&quot;http://digg.com/submit?phase=2&amp;url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Digg this!'><img src='http://cdn1.diggstatic.com/img/favicon.a015f25c.ico' style='vertical-align:middle;'/> Digg this</a>

<a class='save' expr:href='&quot;http://del.icio.us/post?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Share this on del.icio.us'><img src='https://secure.delicious.com/favicon.ico' style='vertical-align:middle;'/> Del.icio.us</a>

<a class='stumble' expr:href='&quot;http://www.stumbleupon.com/submit?url=&quot;+ data:post.url + &quot;&amp;title=&quot; + data:post.title' rel='nofollow' title='Stumble upon something good? Share it on StumbleUpon'><img src='http://cdn.stumble-upon.com/favicon.ico' style='vertical-align:middle;'/>Stumble It</a>
</div>

Jika sudah silahkan disimpan.

Untuk tombol share ini saya hanya menggunakan lima (5) Button share yang paling populer dan banyak digunakan diantaranya yaitu :
1. Button Share Facebook
2. Button Share Twitter
3. Button Share Digg It
4. Button Share Del.ici.us
5. Button share Stumble

Jika ingin menambahkan button share lainnya silahkan masukan di bagian kode button share diatas. Jangan lupa untuk share postingan ini dengan menekan tombol share button di bawah ok. Selamat mencoba.

Komentar

Athur Alam mengatakan…
Mas Ugy.. sebelumnya saya minta ijin klo komennya bukan tentang tema button share seperti yg sedang dibahas.. tapi mau infoin aja klo tampilan layout template blog ini tidak beda kalo dibuka dengan browser google chrome.. beberapa posting malah tampil full dihalaman muka, jadi tak ada linebreak nya... ujung2nya jadi sedikit terlihat gado2..

mudah2an bisa jadi masukan....
Chugy mengatakan…
aLamathuR d'hileudjapanist II :: Betul sekali Mas Alamathur, memang tampilan blog ini kalau di browser crome mengalami masalah dalam readmore, sehingga beberapa postingan tampil full di halaman muka...saya sendiri masih mencari solusi untuk masalah ini. Mudah2an bs cepat mendapatkan solusinya

Terimakasih untuk konfirmasinya mas....Sukses selalu.
Belantara Indonesia mengatakan…
kalo yg ini kayaknya punyaku blm perlu di ganti deh brad...hehehhee....makasih lho..tak tungu yg lain2..pasti msh banya tertanam di otak bukan brader?....salam
Athur Alam mengatakan…
owh.. pantesan.. dikirain tadi browser saya yang bermasalah.. oke deh klo gitu selamat berburu solusinya...
Blogger mengatakan…
wah..saya masih pake yang setandar nech sob hehe maklumlah ga punya keahlian utak atik jadi user aja hehe, nice trik sob
Djangan Pakies mengatakan…
Aww, sugeng enjing Kang.
Ane menyimak aja dulu, sebab loading pakies makin hari makin beraat. nih masih nyari mana yang harus di sortir
Sungai Awan mengatakan…
thanks sob tutornya.
share button aku juga mau pasang.
follow you
inung halaman samping mengatakan…
Tinggal klik nih :) saya mah awam soal istilah teknis tapi bisa paham sedikit. tombol ini bagi saya, terasa membantu karena kemudahan navigasi untuk 'mengawinkan' blog dengan social network lainnya :)
DenBaGas mengatakan…
Salam
Ijin save dulu kawan, nice share..

Salam kawan
Ferdinand mengatakan…
Jiah.. kayanya ini yg aku request kemaren ya Sob haha.... mantabz.. langsung ditest di blog sebelah... soalnya aku mau masang kebanyakan ditambah Jquery.. jadi males hhe.. thnx Sob.... maksih ya.... happy blogging n semangat ...
Unknown mengatakan…
Sangat Bermanfaad
Wajah Baru mengatakan…
keren2 nih sob, tp saya jarang dan hampir g pernah share blog aq abisnya g ada waktu sob
om rame mengatakan…
waktu itu pernah pasang tomboL sejenis ini (FB), tapi pada saat di Link koq maLah di anggap spam dan enggak berhasiL. ngeLink manuaL juga hasiLnya begono, seteLah urLnya di perpendek pake "mcaf.ee" baru mau. kenapa yah?.
Abdullah (Fish Seller) mengatakan…
mAS ugi gugug, rekuest template dong saya,
Viyan Pradita mengatakan…
Keren Sob.... Ijin share jg yak... \m/
Oia di blogq cara ngasih jarak antara postingan sm tombol share buton gmn ya ??
mohon lihat blogq Sob... Terimakasih
Admin Banvill mengatakan…
ijin pasang sob
Ibnu Siswoyo mengatakan…
Terima kasih berbagi ilmunya.
Ilmu diprakktekkan dan alhamdulillah berhasil
Web mdmk mengatakan…
Alhamdulillah berhasil diterapkan sobat.
Terima kasih atas sharing ilmunya
blog-nailah mengatakan…
Alhamdulillah ilmunya sukses diterapkan

Postingan populer dari blog ini

Motion Tween dan Shape Tween

Mengenal Symbol dalam Animasi Flash

Membuat Bayangan Di Dalam Text