49 Cara Membuat Widget Follow Us Social Media Buttons Keren

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Widget follow us Social MediaHampir setiap blog atau website memiliki widget follow social media dengan tombol icons yang beragam. Dengan memasang widget sosial media pada blog, anda dapat mengundang pembaca/pengunjung blog untuk terlibat dalam jejaring sosial anda, dan tentunya dapat meningkatkan reputasi blog anda. Namun hal itu tak akan terjadi jika pengunjung tidak mengklik tombol follow pada widget jaring sosial anda, dan mereka hanya akan mengklik atau mengikuti update blog anda kecuali mereka merasa atau menemukan hal yang berguna dan bermanfaat pada blog anda.

Widget ini tidak otomatis dapat meningkatkan follower blog anda 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 sexy Embarrassed smile. Efek hover ini kita buat dengan bantuan CSS3 transisi.

Widget ini juga tanpa javascript, tanpa JQuery, murni hanya dengan CSS. Widget akan terlihat rapi dan bersih disidebar blog anda atau dibagian manapun anda meletakkannya.

Nah silahkan lihat demo widget ini terlebih dahulu, jika anda menemukannya menakjubkan atau tertarik sekedar mencoba membuatnya atau menambahkannya pada blog anda silahkan melangkah pada tahapan pembuatannya

View Demo

Fitur:

Widget ini cukup sederhana tapi memiliki beberapa fitur utama:

• Meliputi empat tombol jejaring sosial yang paling sering digunakan dan ditambah ikon RSS

• Efek memperluas, mulus dan sexy pada hover

• Penggunaan CSS sprite

• Sangat rapi dan bersih

• Tidak ada JavaScript. JQuery No. Ini murni CSS

CSS sprite Teknik cukup keren dan berguna terutama ketika Anda memiliki terlalu banyak gambar. Dalam widget ini Anda akan berpikir bahwa satu gambar atau ikon yang digunakan untuk setiap tombol yang membuat total 5 gambar. Tapi sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon. Teknik ini berguna karena bukannya 5 permintaan HTTP, Anda hanya membuat satu permintaan yang mempercepat waktu loading. Teknik ini tidak sangat umum di blog Blogger tetapi dalam blog WordPress teknik ini sering digunakan.

Sekarang mari kita menambahkan widget ini di blog Anda.

Catatan:

Jika Anda ingin menambahkan widget pada tempat tertentu, gunakan HTML terpisah dan CSS dan jika Anda ingin widget untuk muncul di suatu tempat di sidebar Anda, silahkan melompat langsung di bagian Alternatif di bagian bawah.

HTML

  1. Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
  2. Letakkan kode berikut pada bagian yang anda inginkan dari blog anda

<!--Sexy Social Buttons Widget RePost TipsTrikBlogging.com-->
<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>
<!--Sexy Social Buttons Widget RePost TipsTrikBlogging.com—>

<small><div style="font-size:80%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://www.tipstrikblogging.com/2012/12/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti semua tanda # dengan URL jejaring sosial anda.

CSS

Sekarang tambahkan kode CSS yang akan membuat tombol ini sexy Open-mouthed smile

  1. Login ke akun Blogger anda-> Template -> Edit HTML -> Proceed
  2. Cari kode ]]></b:skin> Letakkan kode berikut diatasx

/* Sexy Social Buttons Widget RePost TipsTrikBlogging.com*/
#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);}
/* Sexy Social Buttons Widget By RePost TipsTrikBlogging.com*/

Alternatif

Jika ingin menambahkan widget ini pada sidebar blog anda

  1. Login ke akun Blogger anda-> Layout
  2. Klik tambah gadget pada sidebar
  3. PilihHTML/JavaScript pada form letakkan kode berikut

<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://www.tipstrikblogging.com/2012/12/cara-membuat-widget-follow-us-social.html" target="_blank" title="Widget Follow Us">+ Get This Widget Here</a></div></small>

Ganti semua tanda # yang berwarna biru dengan URL jejaring sosial anda

4. Simpan dan lihat hasilnya diblog anda!

Nah demikian tutorial membuat widget follow social media dengan tombol sexy. Semoga bermanfaat!

Original Resaurce


ٱلْحَمْدُ لِلَّهِ رَبِّ ٱلْعَٰلَمِين

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blogging

49 komentar :

  1. keren neh, aku coba ya, terimakasih sudah berbagi sukses selalu

    BalasHapus
    Balasan
    1. Silahkan dicoba, sama-sama thanks juga tuk apresiasinya, and sukses jg tuk anda.

      Hapus
  2. Salam blogger..

    Terima kasih sudah peringatkan blog saya, sekarang blog saya komentarnya dah OKE cuy, dah bisa komentar dengan baik,

    silahkan di coba :)

    http://www.putrakomputer.com/

    Thank's

    BalasHapus
    Balasan
    1. Alhamdulillah, sama-sama klu ada saran kritik membangun dari anda kami juga insyaAllah akn menerimaterix. Terimaksh jg tuk kunjungan dan apresiasinya.

      Hapus
  3. Assalamu'alaikum
    blognya keren nih,aq aja jadi follower yg ke 1084 amazing dah pokoknya :)
    salam silahturrahmi,salam blogger.

    mau nanya nih sob,kira2 kode script widget diatas buat loading blog tambah berat ga ya?
    btw keren juga hasilnya.

    BalasHapus
    Balasan
    1. Wa'alaikumusslm warahmatullah. Postingannya sdh dibaca belum sblm komentar? :p
      Widget diats tanpa script, murni CSS3 dan image yg digunakan jg image sprite jadi dijamin fast loading, silahkan tes deh tuk jelasnya!

      Thanks apresiasinya.

      Hapus
  4. Tutorialnya sangat bermanfaat sekali sobat
    terima kasih sudah berbagi

    BalasHapus
    Balasan
    1. Sama-sama terimaksh jg tuk apresiasinya.

      Hapus
  5. Wih Keren Nih Izin Coba Gan !!
    http://miki-maru.blogspot.com/

    BalasHapus
  6. Balasan
    1. Iya keren, thanks kunjungan dan apresiasinya ya.

      Hapus
  7. wah bagus ini, blogny khusus mnyediakan berbagai triks blog ya,, kalo gitu izin buat rujukan untuk mempercantik blog kami dee,,
    jngn lupa berkunjung dn untuk silaturahmi kita jngn lupa di follow ya,, blog sobat sdh kami follow #1089 (iyo)

    oce salam sahabat,,

    BalasHapus
  8. Kelihatannya Bagus nih Izin Di Coba !!
    #http://miki-maru.blogspot.com/

    BalasHapus
    Balasan
    1. Baguslh, silahkan dicoba, thanks apresiasinya.

      Hapus
  9. boleh di coba ini.. keren tampilan nya.

    BalasHapus
    Balasan
    1. Silahkan dicoba. Thanks kunjungan dan apresiasinya.

      Hapus
  10. trimakasih kawan, sangat bermanfaat

    BalasHapus
    Balasan
    1. Sama2, trimaksh jg kunjungan dan apresiasinya.

      Hapus
  11. Balasan
    1. Iya, thanks jg tk kunjungan dan apresiasix.

      Hapus
  12. jika ingin meletakkannya di header gimana ya???.

    BalasHapus
    Balasan
    1. Buat dulu kolom tambah gadget dibagian headernya, lihat tutorial membagi header menjadi dua kolom pada label desain. Kemudian copy kode pada bagian alternatif diatas miz. Semoga membantu.

      Hapus
  13. terima kasih mass.. :)
    saya suka ini..

    BalasHapus
    Balasan
    1. waduh keliru sapaanx kawan, liat-liat profil about the author di sidebar dong! :-s

      Hapus
  14. widgetnya jos gandhos kotos-kotos nganti bledhos...

    BalasHapus
  15. assalamualaikum.
    aku baru nih di dunia blog. baru aja seminggu. aku dah coba ikutin kok gak bisa ya.
    sekedar catatan. aku gak ngerti bahasa CSS HTML dan Javescript.
    mohon bantuannya.
    darimana aku harus memulai belajar kalo mau mendesign template?

    BalasHapus
    Balasan
    1. wa'alaikumussalam. Baiknya anda ikuti bagian terakhir, langkah alternatif pas untuk yang baru belajar karena tinggal copy codenya dan paste dikolom konten HTML. Coba dibaca kembali bagian alternatif diatas, dipraktekkan kembali dan semoga berhasi.

      Terimakasih

      Hapus
  16. Assalamualaykum :)
    Syukron ukhti atas ilmunya..
    oiya btw gimana caranya nambahin bahasa arab di awal postingan dan sesudahnya seperti basmallah n hamdallah yg ada di postingan ukhti tsb?

    BalasHapus
    Balasan
    1. Wa'alaikumussalam warahmatullah. Sama-sama ukh. InsyaAllah nanti saya posting tutorialnya khusus menjawab pertanyaan ukhty. Terimakasih tuk kunjungan dan apresiasinya.

      Hapus
  17. pengen aktif di dunia blogger..
    tapi gimana caranya?
    :O

    BalasHapus
  18. keeren nih tombolnya,, :>) numpang share boleh dong yya.. :d

    BalasHapus
  19. asik, biar gampang nambah2 follower juga jadinya nih.

    hipnoterapi surabaya

    BalasHapus
  20. Bagus mas, nambah cantik blog :D mksih

    BalasHapus
  21. Keren tombol nya, bagus buat blog. mksih mas

    BalasHapus
  22. Wah bisa membantu promosi sos med nih.


    Adrian

    BalasHapus
  23. thanks infonya.. mampir-mampir bisa nih..

    http://torotoroyihaa.blogspot.com/

    BalasHapus
  24. widget ini kagak work di template mas gan,,,
    ada alternative lain kagak ya...???

    BalasHapus
  25. udh saya coba keren gan. http://artofcils.blogspot.com

    BalasHapus
  26. thx banget, ditunggu kunjungan baliknya ya koplokinfo.blogspot.com

    BalasHapus
  27. Waw keren.. Izin copy ya. Semoga jadi ilmu yg bermanfaat. Terimakasih dan sukses selalu :)

    BalasHapus
  28. siang kak, mau nanyak saya newbie disini.. gimana ya caranya nambahin menu sosial media baru di widget nya itu? saya mau nambahin instagram kak, tapi icon instagramnya gak muncul. mohon tutorialnya, makasih

    BalasHapus

Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA DI SINI...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA DI SINI...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

NB:Sebelum menyisipkan kode silahkan gunakan tool konversi kode terlebih dahulu untuk menampilkan kode tersebut pada kolom komentar
Konversi Kode di Sini!