Membuat Widget Kotak Blogroll Hemat Tempat

12.02.2008
Berikut ini tiga tipe contoh blogroll yang bisa Anda gunakan baik yang bernaung dibawah bendera blogger ataupun blog wordpress self hosted maupun dengan hosting wordpress (free). Dan widget blogroll ini hanya memerlukan tag HTML biasa dengan menggunakan semacam “kotak” kemudian diberi overflow dengan dibatasi width (lebar) dan height (tinggi) sehingga overflow pun berfungsi dengan baik jika link blog teman-teman Anda sudah begitu banyaknya. Tiga tipe tersebut adalah dengan border (garis tepi) tanpa border dan menggunakan warna background.

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>

Anda 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. Lalu untuk align teks dan backgroundnya, Anda bisa mengubah left (kiri), right (kanan) atau center (tengah) setalah text-align: dan mengubah kode warna setelah background:# … disesuaikan dengan warna template Anda.

Inspirasi :Mas hakimtea

14 komentar:

  • welly

    artikel yang sangat berguna, kudu diarsip ke harddisc nih. ..

  • rAjaKlik

    Blognya keren bro, berguna lagi... tuker link yah, biar aku gampang kesini...

  • TUKANG ARSIP

    :nnj: @Mingto dan @Welly: Mksh sdh koment:pis:
    :nnj: @Raja Klik : Sdh dmskin tuh linknya...

  • Rie21

    Bagus banget ya ilmu nya. . . :clp:

    Makasih ya. . .

  • amien

    tag blogrol itu di letakkan dmn boos...

  • nath

    artikel-artikelnya sangat membantu... makasi dahhh

  • haqi

    yaph membantu banget

  • Rian

    terimakasih atas artikel yang bermanfaat ini. Jangan lupa mampir ke blog saya. Minta bantuanx donk tuk mempercantik blog saya.

  • semua tentang bangka barat

    siiiiiiiiiiip, visiy my blog om...............sangant membantu............

  • Posting Komentar

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)