Menambahkan Widget Social Media Button Pada Blog

Memasang widget social media kita pada blog itu sepertinya menjadi sebuah hal yang cukup penting. Karena dengan adanya widget tersebut, bisa memudahkan kita atau pembaca blog kita untuk mengakses social media lain yang kita punya. Sebaiknya baca postingan saya tentang pentingnya media sosial instan jadi tahu alasan saya untuk memasang widget tersebut dalam blog saya.

Banyak sekali kreasi pemasangan widget untuk media sosial. Dulu saya membuat widget facebook dan twitter dengan lambang foto saya, tapi kok saya piki-pikir saya jadi terlihat narsis, hehe. Akhirnya saya memasang beberapa widget ukuran kecil yang menyerupai sebuah icon social media.  Untuk mendapatkannya pun mudah, banyak sekali paket widget social media gratis, jadi saya pun memanfaatkannya.

Dalam postingan ini saya akan membuat tutorial sederhana tentang pemasangan widget social media button pada blog versi saya khusus untuk blogspot. So, berikut langkah-langkahnya:
  • Siapkan icon widget yang akan kita pasang dalam blog. Bisa download atau membuat sendiri. Dan saya menggunakan icon free seperti contoh di bawah ini.
 
  • Pastikan kalian sudah mendapatkan URL dari gambar widget tersebut. Jika belum, upload menggunakan dropbox atau picasa atau media lain yang serupa dan kopi paste URL gambar. 
  • Login ke Blogger dan pilih Layout.
  • Klik add a gadget dan pilih HTML/Java Script
  • Kopi paste kode berikut ini:
  • </div> <a href="http://www.facebook.com/ning.aiyu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTug03h59pepgl491eDgo4l_UI_lTYujbkQZ8cBWCboRsvHcq6b1UuHATdb3wd-eI2k4xW0Gp06hHdw98RcbA8cppzXpFn-bctxvhaHzEhBx1l9gF53Re0YOBRPD22k0WlXxqPEdSf8X8/s1600/Scribble-Facebook.png" /></a><a href="https://twitter.com/ningaiyu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6P240ftKgg-7qkNlI6gw1lEyTAYHA2iUAbywQQMTKil0b9p1JyxP_5lwqClVqUvuJnI0l53HwKD2bs4ZJhZewX7J3aJr8aa4hu0Eyg1FNfbxtorVUuSV5JF8MinWOx9kB0b6gK7lFE6o/s1600/Scribble-twitter.png" /></a><a href="https://plus.google.com/104787909122889847028/posts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfC3sFXdMG6TNWjV2pskNteBs2Y6o4wRjU0IMWW7gYAuMvf2IfmhuPgfRLmxdKhdLh5LurFXkKSU57q6yUO6GyubIQRBzOi6so-KEefX5wfGzL9tPsjdRslG_GNKw2UxMFJlNa9qDPYYc/s1600/Scribble-google+.png" /></a><a href="http://feeds.feedburner.com/gendhiss" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglw0p3NMqR1LAGF-xPBa1sA0iqRI1sSX6kcYyFrPL9a6YgAK5ZtJuDO3VGftFSyNJkgSodVE6IDuCqxI74LElM6WDXROBuOaYVh_6LzarHPqVdGXrcwK31bteJ0H_Oy291l4W-mMT6gZs/s1600/Scribble-RSS.png" /></a></div>
  • Keterangan kode:
  1. Ganti kode yang berwarna merah dengan URL tujuan (misal: akun facebook)
  2. Ganti kode yang berwana biru dengan URL gambar. 
  • Dan hasilnya menjadi horizontal seperti ini:
    • Jika ingin membuat tampilan secara vertikal maka kode yang digunakan adalah sebagai berikut:
    • <div> <ul style="text-align: center;"><a href="http://www.facebook.com/ning.aiyu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTug03h59pepgl491eDgo4l_UI_lTYujbkQZ8cBWCboRsvHcq6b1UuHATdb3wd-eI2k4xW0Gp06hHdw98RcbA8cppzXpFn-bctxvhaHzEhBx1l9gF53Re0YOBRPD22k0WlXxqPEdSf8X8/s1600/Scribble-Facebook.png" /></a></ul> <ul style="text-align: center;"><a href="https://twitter.com/ningaiyu" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6P240ftKgg-7qkNlI6gw1lEyTAYHA2iUAbywQQMTKil0b9p1JyxP_5lwqClVqUvuJnI0l53HwKD2bs4ZJhZewX7J3aJr8aa4hu0Eyg1FNfbxtorVUuSV5JF8MinWOx9kB0b6gK7lFE6o/s1600/Scribble-twitter.png" /></a></ul> <ul style="text-align: center;"><a href="https://plus.google.com/104787909122889847028/posts" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjfC3sFXdMG6TNWjV2pskNteBs2Y6o4wRjU0IMWW7gYAuMvf2IfmhuPgfRLmxdKhdLh5LurFXkKSU57q6yUO6GyubIQRBzOi6so-KEefX5wfGzL9tPsjdRslG_GNKw2UxMFJlNa9qDPYYc/s1600/Scribble-google+.png" /></a></ul> <ul style="text-align: center;"><a href="http://feeds.feedburner.com/gendhiss" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglw0p3NMqR1LAGF-xPBa1sA0iqRI1sSX6kcYyFrPL9a6YgAK5ZtJuDO3VGftFSyNJkgSodVE6IDuCqxI74LElM6WDXROBuOaYVh_6LzarHPqVdGXrcwK31bteJ0H_Oy291l4W-mMT6gZs/s1600/Scribble-RSS.png" /></a></ul> </div>
    • Keterangan kode:
    1. Ganti kode yang berwarna merah dengan URL tujuan (misal: akun facebook)
    2. Ganti kode yang berwana biru dengan URL gambar. 
    3. Ganti kode yang berwana orange dengan kode aligment: center, left, atau right.
    • Dan hasilnya menjadi vertikal dengan center align seperti ini:
    Nah, demikian tutorial sederhana untuk menambahkan widget social media button pada blog, terlihat lebih cantik dan praktis kan? Mungkin banyak blog-blog lain yang sudah memberikan tutorial yang sama, tapi ini kan tutorial ala saya, hehe. Semoga bermanfaat ya..

    8 comments:

    1. sip sip...
      ntar dicoba deh mbak yaa ^^

      ReplyDelete
    2. keren...terima kasih artikel nya.

      ReplyDelete
    3. Iconnya lucu deh, warnanya cantik

      ReplyDelete
    4. wehweeeh, warnanya pada ngejreng gitu yak.

      tapi udah ada default tombol socmed di tiap artikel, hehe :)

      ReplyDelete
    5. waaaaahh.. icon yang cantiiik. thanks yaa.. akhirnya socmed button di blog ku jadi cantik! thanks beraaaaatt!!

      ReplyDelete
    6. saya suka social media button yang ada di blog kamu. ada htmlnya? thankyou.

      ReplyDelete
    7. kak, saya sudah coba, dan hasilnya gambarnya nggak mau keluar :( terus kalau mau nambah sosmed yang lain gimana? apa cukup copy paste link yang di atasnya? tapi ada yang gak kebaca kak.. gimana ya?

      ReplyDelete
    8. ok berkunjung jg di http://downloadmadeinindonesia.blogspot.com/

      ReplyDelete

    Terima kasih sudah berkunjung, silakan tinggalkan komentar Anda ^.^