Advertise

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.

19 komentar:

  1. 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....

    BalasHapus
  2. 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.

    BalasHapus
  3. 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

    BalasHapus
  4. owh.. pantesan.. dikirain tadi browser saya yang bermasalah.. oke deh klo gitu selamat berburu solusinya...

    BalasHapus
  5. wah..saya masih pake yang setandar nech sob hehe maklumlah ga punya keahlian utak atik jadi user aja hehe, nice trik sob

    BalasHapus
  6. Aww, sugeng enjing Kang.
    Ane menyimak aja dulu, sebab loading pakies makin hari makin beraat. nih masih nyari mana yang harus di sortir

    BalasHapus
  7. thanks sob tutornya.
    share button aku juga mau pasang.
    follow you

    BalasHapus
  8. 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 :)

    BalasHapus
  9. Salam
    Ijin save dulu kawan, nice share..

    Salam kawan

    BalasHapus
  10. 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 ...

    BalasHapus
  11. keren2 nih sob, tp saya jarang dan hampir g pernah share blog aq abisnya g ada waktu sob

    BalasHapus
  12. 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?.

    BalasHapus
  13. mAS ugi gugug, rekuest template dong saya,

    BalasHapus
  14. 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

    BalasHapus
  15. Terima kasih berbagi ilmunya.
    Ilmu diprakktekkan dan alhamdulillah berhasil

    BalasHapus
  16. Alhamdulillah berhasil diterapkan sobat.
    Terima kasih atas sharing ilmunya

    BalasHapus
  17. Alhamdulillah ilmunya sukses diterapkan

    BalasHapus