Home » » Cara Membuat Tombol Social Media Keren Di Blog

Cara Membuat Tombol Social Media Keren Di Blog

Written By Afrizal Syaifudin on Thursday, March 14, 2013 | 8:00 AM

.
Cara Membuat Tombol Social Media Keren Di Blog
Z-T Blog - hay sobat maaf nih baru ngepost lagi karena sibuk terganggu dengan jadwal ujian tengah semester -_- ,bingung mau share apa.. :( saya share cara membuat widget tombol social media di blog ya..? :) widget ini mungkin bisa jadi bermanfaat untuk sobat, Dengan memasang widget sosial media pada blog, sobat dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial sobat, dan tentunya dapat meningkatkan reputasi blog sobat. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik tombol follow pada widget jaring sosial sobat, dan mereka hanya akan mengklik atau mengikuti update blog sobat kecuali mereka merasa atau menemukan hal yang berguna dan bermanfaat pada blog sobat. Widget ini tidak otomatis dapat meningkatkan follower blog sobat diberbagai jaring sosial tapi setidaknya kita dapat memancing mereka untuk setidaknya mengklik sekali pada tombol dengan membuat/menampilkan tombol widget ini lebih menarik dan memiliki efek hover yang meluas, mulus dan rapih . Efek hover ini kita buat dengan bantuan CSS3 transisi.

Fitur Dari Widget Ini :
  • Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS
  • Efek memperluas ke samping
  • Penggunaan CSS sprite
  • Sangat rapi dan bersih

Tidak ada JavaScript. JQuery No. Ini murni CSS
sudah jelas yaa.. :D oke langsung ke caranya.. :)
  1. masuk ke tata letak
  2. Tambah Gadget
  3. pilih HTML / JavaScript
  4. Lalu Masukan Kode Di Bawah Ini..
  5. Simpan.. :)

<style> 

#tbisose{list-style:none; text-decoration:none; font-size:0.9em; font-family:trebuchet ms,sans-serif;} 
#tbisose a{text-decoration:none; font-family:trebuchet ms,sans-serif;} 
#tbisose li{position:relative; height:38px; cursor:pointer; padding: 0 !important;} 
#tbisose .facebook, .googleplus, .pinterest, .rss, .twitter{position:relative; z-index:5; display:block; float:none; margin:10px 0 0; width:210px; height:38px; border-radius:5px; background:url(https://lh4.googleusercontent.com/-l0EYSSxxuc8/UFd37FdwjzI/AAAAAAAAG2E/CDbmwPO4haA/s800/sprites.png) no-repeat; background-color:rgba(217,30,118,.42); -webkit-box-shadow:rgba(0,0,0,.28) 0 2px 3px; -moz-box-shadow:rgba(0,0,0,.28) 0 2px 3px; box-shadow:rgba(0,0,0,.28) 0 2px 3px; color:#141414; text-align:left; text-indent:50px; text-shadow:#333 0 1px 0; white-space:nowrap; line-height:32px; -webkit-transition:width .25s ease-in-out,background-color .25s ease-in-out; -moz-transition:width .25s ease-in-out,background-color .25s ease-in-out; -ms-transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-transition:width .25s ease-in-out,background-color .25s ease-in-out; transition:width .25s ease-in-out,background-color .25s ease-in-out; -o-box-shadow:rgba(0,0,0,.28) 0 2px 3px;}
#tbisose li:after{position:absolute; top:0; left:50px; z-index:2; display:block; height:38px; color:#141414; content:attr(data-alt); line-height:32px;} 
#tbisose .icon{overflow:hidden; color:#fafafa;} 
#tbisose .facebook{width:32px; height:32px; background-color:rgba(59,89,152,0.42); background-position:0 0;} 
#tbisose .twitter{width:32px; height:32px; background-color:rgba(64,153,255,0.42); background-position:0 -33px;} 
#tbisose .googleplus{width:32px; height:32px; background-color:rgba(228,69,36,0.42); background-position:-3px -66px;} 
#tbisose .pinterest{width:32px; height:32px; background-color:rgba(174,45,39,0.42); background-position:0 -95px;} 
#tbisose .rss{ width:32px; height:32px; background-color:rgba(255,102,0,0.42); background-position:-3px -126px;} 
#tbisose li:hover .icon, 
.touch #tbisose li .icon{width:210px;} 
.touch #tbisose li .facebook, #tbisose li:hover .facebook{background-color:rgba(59,89,152,1);} 
.touch #tbisose li .twitter, #tbisose li:hover .twitter{background-color:rgba(64,153,255,1);} 
.touch #tbisose li .googleplus, #tbisose li:hover .googleplus{background-color:rgba(228,69,36,1);} 
.touch #tbisose li .pinterest, #tbisose li:hover .pinterest{background-color:rgba(174,45,39,1);} 
.touch #tbisose li .rss, #tbisose li:hover .rss{background-color:rgba(255,102,0,1);} 
</style> 
<ul id="tbisose"> 
<li data-alt="Follow us on Facebook"><a class="icon facebook" href="#">Follow us on Facebook</a></li> 
<li data-alt="Follow us on Twitter"><a class="icon twitter" href="#">Follow us on Twitter</a></li> 
<li data-alt="Follow us on Google+"><a class="icon googleplus" href="#">Follow us on Google+</a></li> 
<li data-alt="Follow us on Pinterest"><a class="icon pinterest" href="#">Follow us on Pinterest</a></li> 
<li data-alt="Subscribe with RSS"><a class="icon rss" href="#">Subscribe with RSS</a></li> 
</ul>
<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://zhalltrozans.blogspot.com/2013/03/cara-membuat-tombol-social-media-keren.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Keterangan :
  • Kode yang berwarna Orange, ganti dengan masing-masing alamat social media sobat..
nanti hasilnya akan seperti ini.. :)

Cara Membuat Tombol Social Media Keren Di Blog

bagaimana keren gak..? :D ,silahkan di coba.. :) jangan lupa tinggalkan jejak di komentar.. terima kasih.. :)

40 komentar:

  1. wah tombol nya keren sob :) makasih tutorialnya :)

    ReplyDelete
  2. haha ane udah pasang ,,hehehh,,,comeback okay??

    ReplyDelete
  3. Simple tp elegan, sob... Tp saya sdh cukup puas dg punya saya, hihi...

    Salam,

    ReplyDelete
  4. Keren dan simple sosmed nya, bisa di coba nich.

    ReplyDelete
  5. selamat siang sobat ZT.. kunjungan rutin sob.. ^_^
    terimkasih tutornya sob
    come back :D

    ReplyDelete
  6. zaidan @ siip.. :D

    ujungkelingking @ okee sobat.. :)

    mariyanto widodo @ silahkan dicoba.. :)

    dang murganto @ thx kunjungannya.. :)

    ReplyDelete
  7. Sungguh keren, mau nyoba ah..
    Di coba boleh ??

    ReplyDelete
  8. bs gk d tmbhkn social media yg lain bro??? :D

    ReplyDelete
  9. Informasi yang sangat bermanfaat sekali, salam kenal

    ReplyDelete
  10. wah, keren artikelnya gan.
    Bermanfaat banget
    jangan lupa komen backnya di http://adeputra-pkp.blogspot.com

    ReplyDelete
  11. wah ini nanti akan melayang diatas artikel itu yaaa
    :D

    ReplyDelete
  12. Wah makasih infonya sob ...

    come back ..

    ReplyDelete
  13. Seo murah terbaik @ ko di atas artikel..? :D

    Cara Membuat Jam Ditengah Status Bar @ silahkan dicoba.. :)

    SEO XT @ thx kunjungannya..

    ReplyDelete
  14. Wah ini sangat keren nih ...
    izin coba yah sobat

    ReplyDelete
  15. wahhh, mantep banget nih gan...
    sayangnya ane gk suka karena berat2in blog gan...

    tapi walaupun begitu, akan ane coba ke beberapa blog ane yang lain

    ReplyDelete
  16. punya yang kayak gini tapi yang ada follow on youtube gak bro ? keren dah widget yang ini.. udah aku pakai juga di blog ku...

    ReplyDelete
  17. @Download Games, ini tidak memberatkan blog sobat karena ini asli murni dari CSS.. :)

    @Dwi Rachmat, sepertinya tidak ada sobat.. :D ,ya sobat widgetnya bagus karena asli murni dari CSS.. :)

    ReplyDelete
  18. Keren nih kyknya floating social media nya, tapi gak ada demo nya ya sob! :)

    ReplyDelete
  19. ya sobat mohon maaf tidak ada demonya.. :D

    ReplyDelete
  20. sob jd tp kok ngak berfungsi tuh hanya jd pajangan aja ya?

    ReplyDelete
  21. gk sobat ganti kode yg berwarna orange dngn link masing".. baca di atas sobat..

    ReplyDelete
  22. Trimakasih gan, atas tutorial/HTML nya
    Gue coba ya :)

    ReplyDelete
  23. Keren Banget gan terimakasih dah saya tempel diblog, makasih yah

    ReplyDelete
  24. thanks infonya , visit balik yah ;) di http://rositaputri42.blogspot.com

    ReplyDelete
  25. Wah sangat bermanfaat ni Gan...tutor blognya thank 4 sharing

    ReplyDelete
    Replies
    1. terima kasih, sama" jangan lupa di coba . :D

      Delete

Terima kasih telah berkunjung! Silahkan tinggalkan komentar untuk respon/pertanyaan.

=== RULES ===

1. Dilarang Spam.
2. Dilarang live link.
3. Dilarang nama komentator menggunakan Keyword.
4. Dilarang berkomentar yang seolah memuji (Out Of Topic).
5. Isi komentar relevan dan berkualitas yang berkaitan dengan artikel.

Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.