Minggu, 29 Agustus 2010

Membuat Widget Kotak Blogroll Hemat Tempat

Blogroll atau daftar link blog memang sangat penting saat ini diperlukan. Sebab, dengan membuat blogroll kita akan mempunyai banyak teman-teman blogger lainnya yang bertukaran link dengan blog kita. Lebih-lebih jika pagerank blog teman kita itu mempunyai pagerank (PR) yang tinggi, menguntungkan bukan. Nah, untuk itulah blogroll sangat diperlukan. Mau tau cara membuat widget blogroll yang hemat tempat?

Berikut ini adalah tiga contoh preview blogroll yang bisa anda gunakan. Dan widget blogroll ini hanya memerlukan tag HTML biasa dengan menggunakan semacam “kotak” kemudian diberi sentuhan “overflow” dengan dibatasi width (lebar) dan height (tinggi), sehingga overflow pun berfungsi dengan baik jika nantinya link blog teman-teman anda sudah begitu banyaknya. Dari tiga tipe ini ada yang menggunakan border (garis tepi), ada yang tanpa border, dan ada yang hanya menggunakan warna background saja. Semua terlihat bagus bukan? :)


Keuntungan yang kita rasakan dari membuat dan memasang widget blogroll ini adalah kita bisa menghemat penggunaan tempat di sidebar blog kita. Banyak di antara blogger-blogger lainnya yang mengeluh karena melihat proporsi tampilan blognya tidak bagus akibat widget blogrollnya yang terlalu besar dan lebar. Nah, maka dari itulah saya memposting artikel ini. :)

Untuk membuat widget kotak blogroll tersebut yang Anda perlukan adalah tag HTML sebagai berikut :

Tag HTML blogroll dengan border (Blogroll 1)

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 200px; text-align: center; background:#FFFFF;">
<a href="http://URL-BLOG" target="_blank">Tekslink 01</a><br/>
<a href="http://URL-BLOG" target="_blank">Tekslink 02</a><br/>
Link lainnya
</div>

Tag HTML blogroll tanpa border (Blogroll 2)

<div style="border: 0px; overflow: auto; width: 150px; height: 200px; text-align: center; background:#FFFFFF;">
<a href="http://URL-BLOG" target="_blank">Tekslink 01</a><br/>
<a href="http://URL-BLOG" target="_blank">Tekslink 02</a><br/>
Link lainnya
</div>

Tag HTML blogroll dengan background (Blogroll 3)

<div style="border: 1px solid rgb(153, 153, 153); overflow: auto; width: 150px; height: 200px; text-align: left; background:#FEA8A1;">
<a href="http://URL-BLOG" target="_blank">Tekslink 01</a><br/>
<a href="http://URL-BLOG" target="_blank">Tekslink 02</a><br/>
Link lainnya
</div>

Sebelumnya, untuk memasang salah satu dari blogroll di atas, seperti biasa lakukan terlebih dahulu langkah di bawah ini!

  1. Login dulu ke Blogger menggunakan account anda
  2. Pilih Tata Letak, kemudian klik Add Widget Elements
  3. Lalu pilih menu HTML/JavaScript
  4. Setelah itu, pilih salah satu kode HTML blogroll yang anda sukai di atas, lalu copy paste dan letakkan di kotak HTML tersebut.

NB:
·         Anda juga bisa mengubah lebar dan tinggi kotak widget blogroll tersebut dengan mengubah angka yang terdapat setelah width (lebar) dan height (tinggi) disesuaikan dengan ukuran sidebar template Anda.
·         Untuk align text dan background-nya, Anda bisa mengubah left (kiri), right (kanan) atau center (tengah). Setelah text-align: dan mengubah kode warna setelah background:# … disesuaikan dengan warna template Anda.

Selamat mencoba! :)

Terima kasih.


Tidak ada komentar:

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.