Rabu, 12 Juni 2013

"Sharing Buttons" Ringan tanpa JavaScript

Lama sudah tidak update. Kali ini saya hanya ingin berbagi tutorial dari +Damar Zaky tentang membuat tombol media sosial tanpa JavaScript yang pernah Ia bagikan di blognya dengan sedikit modifikasi agar terlihat lebih cantik :).

Demo gambar

Oke, langsung saja. Seperti biasa masuklah ke dasbor Blogger Anda masing-masing. Setelah itu, mari kita lihat kode sharing button ini.

KODE
<link href='http://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
#sharing-buttons {font-family:"Arial", Helvetica, Sans-Serif; font-size:0.8em; text-shadow:0 1px 0 rgba(0,0,0,.2);}
#sharing-buttons a {color:#fff; text-decoration:none; background-image: -webkit-gradient( linear, left top, left bottom, color-stop(.2, rgba(0,0,0,.0)), color-stop(1, rgba(0,0,0,.2)) ); background-image: -moz-linear-gradient( center top, rgba(0,0,0,.0) 20%, rgba(0,0,0,.2) 100% ); margin:0 5px 0 0; padding:2px 5px; border:1px solid rgba(0,0,0,.2); border-radius:3px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2), 1px 1px 0 rgba(255,255,255,.4), 1px 1px 2px rgba(0,0,0,.4); cursor:pointer;}
#sharing-buttons a:active {background-image: -webkit-gradient( linear, left top, left bottom, color-stop(.2, rgba(0,0,0,.2)), color-stop(1, rgba(0,0,0,.4)) ); background-image: -moz-linear-gradient( center top, rgba(0,0,0,.2) 20%, rgba(0,0,0,.4) 100% ); margin:0 4px 0 1px; box-shadow:inset 0 1px 0 rgba(255,255,255,.2);}
#sharing-buttons .icon {margin:0 0.5em 0 0; padding:0 0.5em 0 0; border-right:1px solid rgba(0,0,0,.2); box-shadow:1px 0 0 rgba(255,255,255,.2);}
#sharing-buttons .fb {background-color:#3B5998;}
#sharing-buttons .twtr {background-color:#4285F4;}
#sharing-buttons .gpls {background-color:#DF5138;}
#sharing-buttons .lkdn {background-color:#4393BB;}
#sharing-buttons .lkdn.last {margin-right:0px !important;}
/* Silakan dihapus di bawah ini haha :D */
.silakandihapus {margin:10px 0 0 0; font-family:"Arial", Helvetica, Sans-Serif; font-size:0.5em; text-transform:uppercase;}.silakandihapus a {color:#999; text-decoration:none;}.silakandihapus strong {font-size:1.2em; margin:0 0.5em 0 0;} 
</style>
<div style='clear:both'></div><!-- Just both --><div id='sharing-buttons'><a class='fb' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' target='_blank'><i class='icon icon-facebook'></i>Share</a><a class='twtr' expr:href='"http://twitter.com/share?url=" + data:post.url' target='_blank'><i class='icon icon-twitter'></i>Tweet</a><a class='gpls' expr:href='"https://plus.google.com/share?url=" + data:post.url' target='_blank'><i class='icon icon-google-plus'></i>Plus</a><a class='lkdn last' expr:href='"http://www.linkedin.com/cws/share?url=" + data:post.url' target='_blank'><i class='icon icon-linkedin'></i>Lnkd</a></div><div class='silakandihapus'><a href='http://dasbor7.blogspot.com/2013/06/sharing-buttons-ringan-tanpa-javascript.html' target='_blank'><strong>»</strong>Get this widget!</a></div><div style='clear:both'></div><!-- Just both -->

Letakkan kode di atas dimana saja Anda mau tampilkan. Namun, agar lebih rapi, Anda dapat meletakkan kode berwarna biru di atas kode </head>, meletakkan kode warna hijau di atas kode ]]></b:skin>, dan meletakkan kode warna merah di tempat Anda ingin tampilkan. Biasanya di bawah kode <data:post.body/> (di bawah posting).
Silakan hapus link saya, karena link itu mungkin sangat menganggu... :D

15 komentar:

  1. Balasan
    1. wihh, cepet amat udah ada aja di sini.. mentionnya berhasil ya...? :D

      Hapus
  2. edan ini templatenya simple banget, keren dah, kapan kapan promosiin di grup fb, dijamin banyak visitor datang (y)

    BalasHapus
    Balasan
    1. wkwkwk.. ini framework acakadul buat bikin template.. :v

      Hapus
  3. Ikut komentar mas..
    Karena tulisannya tentang tutorial dan tak tau harus erkomentar gimana, ya sudahlah asla berkomentar saja..
    Meski tidak dapat tanda yang berkedip itu tak apa, yang penting... "Berkomentar"..
    Biar si admin ke Kopiah Putih.. :)

    BalasHapus
  4. keren sob, thanks..
    visit me back ya..

    BalasHapus
  5. wkaokaokaokaokao...kalau saya malah hapus tombol ini :V

    BalasHapus
  6. wah keren deh kalau gak pake javascript

    BalasHapus
  7. wow thanks for sharing this tips its usefull

    BalasHapus
  8. simple, gak bikin berat. good job bro

    BalasHapus
  9. Ringan banget mas, udah di coba di salah satu blog saya.
    Mas kalau sayang pengen pasang pinterest gimana ya?
    Thank :)

    BalasHapus
  10. simple keren.. thanks masbro

    BalasHapus
Berkomentarlah dengan baik. Komentar anonim tidak akan dijawab.