Selasa, Juni 05, 2012

Membuat Daftar Link dengan Icon

Postingan ini untuk menjawab pertanyaan dari seorang kawan blogger mba Erika Hime mengenai cara membuat list social media atau daftar link lengkap dengan icon yang diletakkan di sidebar blog.

Caranya mudah kok, berikut langkah-langkahnya :
1. Masuk ke akun blog
2. Pilih Design >> Page Element
3. Klik Add Gadget
4. Pilih Add HTML/JavaScript, lalu masukkan kode dibawah ini.

------------------------------------------------------------------------------------

<div style="float: left">
   <div id="footer1">
     <div class="footer_box" id="text-10">
<h3 class="footer_title"></h3>
            <div class="textwidget"><ul class="xoxo blogroll">

<li><a href="https://twitter.com/anistahara" title=""  target="_blank"><img src="http://www.howjoyful.com/wp-content/themes/howjoyful-blog/img/twitter.png"  border="0" /> &nbsp;  &nbsp; Twitter</a></li>

<li><a href="https://www.facebook.com/anistahara/" title=""  target="_blank"><img src="http://www.howjoyful.com/wp-content/themes/howjoyful-blog/img/facebook.png"  border="0" /> &nbsp;  &nbsp; Facebook</a></li>

<li><a href="http://facelim.com/kakros/" title=""  target="_blank"><img src="http://mob1191.photobucket.com/albums/z476/ayari_165/facelim-1.png"  border="0" /> &nbsp;  &nbsp; Facelim</a></li>

<li><a href="http://mymfb.com/ayari/" title=""  target="_blank"><img src="http://mob1191.photobucket.com/albums/z476/ayari_165/mfb.png"  border="0" /> &nbsp;  &nbsp; My MFB </a></li></ul></div></div></div></div>

------------------------------------------------------------------------------------

Keterangan :
Ganti tulisan yang berwarna biru dengan URL akun social media anda.
Ganti tulisan yang berwarna hijau dengan URL icon yang ingin digunakan.
Ganti tulisan yang berwarna merah dengan judul yang akan tampil di daftar.
Anda bisa menambah link lebih banyak lagi sesuai keinginan.

Semoga ini bisa membantu. Selamat mencoba :)

37 komentar:

  1. eh, semutna makin atraktif aje

    BalasHapus
    Balasan
    1. baru liad ya jeng ^^
      padahal sdh lama lho...

      Hapus
  2. makasih tutorialnya, disave dulu ah..

    happy nice blogging

    BalasHapus
    Balasan
    1. monggo, monggo pak 'eL
      happy blogging juga...

      Hapus
    2. assalamu alaikum, mampir lg disini sekalian jawab pertanyaannya..
      recent coment tanpa admin scriptnya sy dapat dari kang Asep, silakan tarik scroll sampai ke bawah recent coment punya saya, nanti ketemu dengan tulisan "sakahayang dot com", silakan buka link-nya yg mengarah langsung ke tutorial tersebut...

      selamat mencoba, jika ada kesulitan silakan bisa ditanyakan lagi, happy blogging

      Hapus
  3. saya kurang ngerti mbak dengan edit HTML dan pernah kapok dengan coba-coba mengeditnya
    cara baiknya gemana ya cara edit yang aman ?

    BalasHapus
    Balasan
    1. kalau edit html, amannya di download full template dulu pak fajar :)
      supaya kalau html yang di edit ga berhasil, kita masih menyimpan cadangan kode template yang lama.
      sy juga ga ngerti2 amat kok pak masalah html. paling bantuan dari mister google doang.

      Hapus
  4. arigatou gozaimasu sempai infonya XD

    BalasHapus
  5. makasih sharenya, saya coba ya mbak... :)

    BalasHapus
    Balasan
    1. sama2 mba adenia, trimakasih jg sdh mampir yaa :)

      Hapus
  6. Wah Nhinies hebat juga. Ane suka permainan javascript-nya. Dari sini juga ane belajar inline css dan javascript. Semangat ya kak dalam membuat postingan. Supaya ane juga bisa terus belajar.

    BalasHapus
    Balasan
    1. Masih awam juga kok saya :)
      Mari sama2 belajar.
      Smangat !

      Hapus
  7. Ini hanya perlu tambah gadget kan? Jd gak samapi edit HTML code..
    Ma kasih tutorialnya...InsyaAllah mau ikutan nyoba..sebenranya beberapa kali sempat bertanya -tanya ttg socialnetwork g nampang di side bar itu..

    Sekali lagi tengkyuu

    BalasHapus
    Balasan
    1. sama2 mba ririe.
      iya ini cuma nambah gadget kok.
      trimakasih atas kunjungannya yaa, smoga sukses :)

      Hapus
  8. info yang menarik, punya belum ada ne.. hehehe
    itu semutnya imut kaya penulisnya ya? :p

    BalasHapus
    Balasan
    1. Hehe, asal semutnya ga bikin geli aja mba :D

      Hapus
  9. Terima kasih ilmunya, Mbak.
    Salam kenal. Oh ya, semutnya bikin kaget, saya kira itu beneran, ternyata bukan. hehehe...

    BalasHapus
  10. Tutorialnya mudah, makasih kk :)

    BalasHapus
    Balasan
    1. sama2 :)
      trimakasih jg atas kunjunganx ya...

      Hapus
  11. ehm, nhis itu garis-garis background ya?

    BalasHapus
    Balasan
    1. Iya may, critanya seperti kertas buku :)

      Hapus
  12. asyikk.

    kalo random post yg slider ntu mbuatnya gmn ya?

    BalasHapus
    Balasan
    1. Wah itu sy kurang tau, coba googling sj, kyknya banyak yg posting ttg itu :)

      Hapus
  13. Wah menarik sekali artikel ini. Baru dapat ilmu baru neh. Numpang sedot ya gan. Izin follow blog mu ya. Salam dari Blogger Pontianak. Kalimantan Barat

    BalasHapus
    Balasan
    1. Trimakasih kunjungannya pak Asep.
      Sy sdh follow balik jg di blognya :)

      Hapus
  14. Salam kenal mbak :)
    Kunjungan perdana sekalian blogwalking ^^
    Btw, infonya keren nie d(^___^)b

    BalasHapus
  15. Tq infox sgt membantu lebih mudah dan gak bingung lgi emang ini yg saya cari slm knal..

    BalasHapus
  16. MAS CARA MENAMBAHKAN TULISAN HURUF JEPANG DI PALING ATAS ITU GIMANA MAS ????

    BalasHapus
    Balasan
    1. Balesnya ke no ini aja mas 089616810749

      Hapus
    2. Kalo cuma bagian huruf jepang itu pake tambahan kolom diatas header.

      Cara nambahin kolom diatas header bisa buka link ini :
      http://imajinasi-hari.blogspot.com/2012/05/menambahkan-2-dua-kolom-di-atas-header.html

      Nanti kolomnya terserah mau diisi apa, bisa gambar, text, atau kode html, terserah. Yang diatas itu aku isi pake text jepang.

      Hapus
    3. yaiks ninis dipanggil mas mas ;))

      Hapus
    4. hehe...klo siang mba2, klo malam mas2 :P

      Hapus

Jangan lupa tinggalkan jejak ya
Trimakasih...