Membuat Kotak Blogroll

Membuat Kotak Blogroll

                                             Membuat Kotak Blogroll

Bagi anda yang blogrollnya berantakan / terlalu panjang kebawah anda bisa menggunakan blogroll dengan
border seperti gambar diatas sehingga tidak berantakan,adapun kode htmlnya bisa anda lihat dibawah ini.

1. Login  ke blogger dengan account anda
2. Pilih Tata Letak kemudian klik Add Widget Elements
3. Pilih menu HTML/JavaScript
4. Pilih salah satu kode HTML blogroll yang anda mau pada kode html diatas , lalu copas di kotak HTML simpan dan lihat hasilnya ! violla !

catatan :  

kamu 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 .
Untuk align text dan background Anda bisa mengubah left (kiri), right (kanan) atau center
(tengah). Setelah "ext align:" dan mengubah kode warna setelah "background:# …"
disesuaikan dengan warna template Anda.

Tag HTML  (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 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>

 Selamat mencoba !

 

 Sumber : http://maringeblogg.blogspot.com/2011/01/classcode-styleborder-1px-solid-rgb153.html