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.

Irfan Handi

bootingskoblog

kangtatang

Dan seterusnya…

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&d=&r=G"

diganti dengan:

"http://1.gravatar.com/avatar/5ad09839666b4d5fbb04ce40ddf0e799?s=64&d=&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.