Minggu, 14 Desember 2008

Membuat Widget Kotak Blogroll Hemat Tempat

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.

widget blogroll

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.

Selamat mencoba ^_^

2 komentar:

lover mengatakan...

Seperti ini mas, sudah saya coba. Tapi gak adaa scroollnya...Apa Templatenya perlu di edit? Css-nya apa perlu di tambah kode?

rudini76ban mengatakan...

thanks....

boleh neh tukaran link...

Selamat Datang Di Buabuazone Nusantara | Agama Islam Terbaru : Ekonomi Syariah, Segera : Tentang Agama Islam Lainnya | Bisnis Dan Internet Terbaru : Bisnis Minyak Nilam, Segera : Tutorial Bisnis Online Lainnya | Budaya Terbaru : Budaya Jawa, Segera : Budaya Papua | Ekonomi Dan Politik Terbaru : Penjelasan Tentang Inflasi, Deflasi, Dan Bank, Segera : Perkembangan Perekonomian Indonesia | Militer Terbaru : Tentara Nasional Indonesia, Segera : Armada Perang Tentara Nasional Indonesia | Musik Terbaru : Lagu-Lagu Anti Komersil Dan Lagu-Lagu Rock Festival Indonesia, Segera : Penyanyi-Penyanyi Legenda Indonesia | Olahraga Terbaru : Liputan Seputar Piala Dunia 2010, Segera : Berita Terbaru Dan Hasil Pertandingan Terbaru Piala Dunia 2010 | Pendidikan Dan Pengetahuan Terbaru : Tarsius, Primata Terkecil Di Dunia, Segera : Informasi Tentang Ilmu Pengetahuan Lainnya | Sastra Terbaru : Kisah Si Malin Kundang, Segera : Cerita-Cerita Rakyat Lainnya | Wisata Terbaru : 10 Monumen Yang Paling Menakjubkan Di Dunia , Segera : Kota-Kota Tujuan Wisata Indonesia | Selamat Membaca Dan Tataplah Dunia Bersama Buabuazone Nusantara...^_^
 
© Copyright by Buabuazone Nusantara  |  Template by http://blogtemplate4u.com/