Hanya Ingin Berbagi

Membuat Blogroll Sahabat di Sidebar WordPress dengan Avatar

Sebenarnya Wordpres telah menyediakan widget untuk membuat blogroll ini, yaitu dengan menambahkan Widget Tautan ke sidebar Anda, setelah menabahkan widgetnya selanjutnya masuk ke Menu Tautan dan Anda bisa menambahkan link sahabat dengan memasukkan Nama dan Alamat blog teman Anda. Tetapi kekurangan dari blogroll otomatis ini adalah tampilannya yang panjang, karena setelah menambahkan alamat link baru maka akan bertambah panjang pula tampilan dari blogroll Anda. Untuk itu saya akan berbagi bagaimana cara agar blogroll disidebar dengan gambar avatar dapat tampil cantik di sidebar blog Anda, seperti yang terlihat  pada blogroll dibawah ini.

Caranya, Anda tinggal mengcopy kode dibawah ini ke Widget>Text Anda.

<div style="overflow: auto; width: 220px; height: 175px; background-attachment: scroll; background-image: url('http://alamat gambar yang anda inginkan.jpg'); border: 0 solid #0000ff; padding: 5px; border: 2px solid #0000ff;">

<div><a href="http://irfanhandi.wordpress.com/">
</a><img style="border: 0;" src="http://1.gravatar.com/avatar/5ad09839666b4d5fbb04ce40ddf0e799?s=32&amp;d=&amp;r=G" alt="hanya ingin berbagi" /> <a href="http://irfanhandi.wordpress.com/" target="_blank">Irfan Handi</a>

<div><a href="http://bootingskoblog.wordpress.com/">
</a><img style="border: 0;" src="http://1.gravatar.com/avatar/796a34a8dadd051816e835195e4fc57e?s=32&amp;d=retro&amp;r=G" alt="bootingskoblog" /> <a href="http://irfanhandi.wordpress.com/2011/09/24/bootingskoblog-datang-lagi/" target="_blank">bootingskoblog</a></div>

<div><a href="http://kangtatang.wordpress.com/">
</a><img style="border: 0;" src="http://0.gravatar.com/avatar/0769fa7be64265ec1bfd63197c210239?s=32&amp;d=&amp;r=G" alt="kangtatang" /> <a href="http://kangtatang.wordpress.com/" target="_blank">kangtatang</a></div>

<div><a href="http://teman-baru-anda.wordpress.com/">
</a><img style="border: 0;" src="alamat-avatar-teman-baru-anda" alt="teman-baru-anda" /> <a href="http://teman-baru-anda.wordpress.com/" target="_blank">teman-baru-anda</a></div>


</div>

Ket :

  • width : lebar text area (sesuaikan lebar sidebar anda)
  • height : tinggi text area
  • padding : jarak antara tulisan dengan garis
  • Ganti alamat URL blog teman anda dan alamat avatar teman anda.
  • Ganti angka pada alamat avatar untuk merubah ukuran avatar, misalnya:

"http://1.gravatar.com/avatar/5ad09839666b4d5fbb04ce40ddf0e799?s=32&amp;d=&amp;r=G"

diganti dengan:

"http://1.gravatar.com/avatar/5ad09839666b4d5fbb04ce40ddf0e799?s=64&amp;d=&amp;r=G"

Keterangan:

Angka diatas bisa disesuaikan dengan ukuran yang Anda inginkan.

Tambahkan teman sesuai contoh diatas.

Dan jika Sahabat ingin tampilan blogrollnya seperti blogroll yang saya gunakan, silahkan copy paste code berikut.

Untuk melihat Cara Sederhana Membuat Blogroll dengan Scroll di Sidebar WordPress.com Anda lihat disini

Semoga Bermanfaat.

69 Tanggapan

  1. my bro, ilmu yg ini ane pake bro,, thnx a lot bro.. sangat bermanfaat infonya, blog ane jd tambah yahuuddd !!! hehe
    skali lg thnx ;-)

    Desember 18, 2011 pada 3:51 am

  2. susah ah kalo pake gravatarnya.. nyari kode gravatar temennya dari mana..???
    terus kalo ganti warna border/garis dari mana..??

    Januari 6, 2012 pada 12:44 pm

  3. my bro irfan, mohon izin ane mo ambil link posting ini mo ane kasih ke sobat Fauzan Mars, doi tanya ma ane soal ini, tp ane ga bisa jwb, jd ane ksh referensi ke blog ente neh,, gpp ya… thnx :)

    Januari 21, 2012 pada 11:10 am

  4. Ping-balik: Cara Sederhana Membuat Blogroll dengan Scroll di Sidebar WordPress.com « Irfan Handi

  5. Ping-balik: Cara Sederhana Membuat Blogroll dengan Scroll di Sidebar WordPress.com | 16novemberdotme

  6. Asslmkm wr.wb. Makasih infonya bro. Sudah saya coba ^_____^

    Maret 12, 2012 pada 11:09 am

  7. Ping-balik: DODI'S BLOG

  8. Ping-balik: Trick WordPress | Anak Leuwidamar

  9. Ping-balik: Cara Sederhana Membuat Blog Roll di WordPress « belajarsendiridotme

  10. thx gan… setengah hari sy mampir di blog agan… copas.. copas ilmunya.. mhn keikhlasannya… ini hasilnya…

    http://ensiklopebanten.wordpress.com/

    Mei 10, 2012 pada 5:09 am

Kasih Komentar Dong Om & Tante Semua . . .

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Ubah )

Twitter picture

You are commenting using your Twitter account. Log Out / Ubah )

Facebook photo

You are commenting using your Facebook account. Log Out / Ubah )

Connecting to %s