Membuat Blogroll CSS Ringan Loading

Ada macam-macam jenis blogroll. Dan tentunya kita tahu fungsi blogroll untuk menyimpan url blog teman-teman. Dan saya suka dengan blogroll yang satu ini. Sederhana, cantik, padat, berisi, dan yang terpenting tidak memberatkan loading.

Untuk membuat blogroll seperti ini, arahkan mouse pada tulisan "blogroll" dibawah. Tampilan sempurna lihat pada sidebar blog ini. Maaf belum semua link teman-teman terpasang...

Blogroll

• Om Rame
• Ari
• Alfadila
• Teh Rinda
• Chomisah
• Elok
• kHasTer
• Sakura 21
• Shasha
• Gatel Band
• Hanu Muslem
• Coretan Fahmi
• Atanotonogoro

1. Hanya menempatkan CSS, di CSS ini kita bisa utak atik lebar dari blogroll yang harus disesuaikan dengan lebar dari sidebar blog, karena biasanya disimpan di sidebar.

2. Menyimpan image tampilan atas blogroll. Untuk pemakai blogspot seperti biasa simpan image di Picasa Web Album. Gratis sampai seribu photo atau image per album.

3. Simpan kode HTML di sidebar. Di HTML ini secara manual kita isi dengan link blog teman-teman kita.

Ok, langsung praktek. Ini kode CSSnya :

<style type="text/css">

body {font-family:Verdana,sans-serif;font-size:12px;line-height:20px;}

.blogroll {position:relative;width:200px;}
.blogroll p {width:200px;height:21px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglKwzb-RXO2YZvqNdwmEU1988uS9s_imGxhkTI6EhuKfDTfoQZqLmY4q3KYDFSAi6K-Jcry0tsikcM7UFrYDZU0FzeQApOpWcPoQeNC0SHhCHzuhCO-H_qrky0WV6hpSFcjtDzwguXvJRL/) 0 0 no-repeat;text-indent:-9999px;margin:0;}
.blogroll ul {width:200px;background:#214868;border:1px solid #48758d;border-width:0 1px 1px 1px;position:absolute;left:0;top:21px;margin:0;padding:0;list-style:none;}

.blogroll ul a:link, .blogroll ul a:visited {display:block;width:170px;padding:2px 10px 2px 10px;text-decoration:none;color:#93b8d3;font-weight:normal;}
.blogroll ul a:hover, .blogroll ul a:active {background:black;}

.blogroll {height:21px;overflow:hidden;}
.blogroll:hover {overflow:visible;}

.blogroll {display:none;}
html>body .blogroll {display:block;}

</style>


Simpan diatas kode :
]]></b:skin></head>
di Tata Letak, Edit HTML. Jangan lupa Simpan Perubahan.

Ingat... kode CSS diatas cari tulisan Wide lalu sesuaikan dengan wide dari sidebar blog. Warna link juga silahkan di utak atik sendiri.

Untuk url background silahkan memakai link image ini atau seharusnya save dahulu lalu simpan di hosting image sendiri yaitu ke Picasa saja. Saya khawatir bila memakai url image saya, suatu saat ada editan akan berpengaruh. Jadi, baiknya di save saja image tersebut lalu simpan sendiri di Picasa. Cara simpan gambar/image/foto ke Picasa disini.

Silahkan image blogrollnya dibawah ini di save :



Langkah selanjutnya, ke Tata Letak, lalu Tambah Gadget, pilih HTML/Javascript. Pastekan link-link blognya seperti ini. Silahkan rubah link-linknya :


<div class="blogroll">
Blogroll
<ul>
<li><a href="http://om-rame.blogspot.com/" target="_blank">Om Rame</a></li>
<li><a href="http://ari-j-fans.blogspot.com/">Ari</a></li>
<li><a href="http://alfadilatrishana.blogspot.com/" target="_blank">Alfadila</a></li>
<li><a href="http://rinda-holic.blogspot.com/" target="_blank">Teh Rinda</a></li>
<li><a href="http://limacahaya.blogspot.com/" target="_blank">Chomisah</a></li>
<li><a href="http://eloklangita.blogspot.com/" target="_blank">Elok</a></li>
<li><a href="http://catatan-quw.blogspot.com/" target="_blank">Sakura 21</a></li>
<li><a href="http://curahanrasa-pink.blogspot.com/" target="_blank">Shasha</a></li>
<li><a href="http://gatelband.cz.cc/" target="_blank">Gatel Band</a></li>
<li><a href="http://hanu-muslem.blogspot.com/" target="_blank">Hanu Muslem</a></li>
<li><a href="http://fahmiahmadfarizan.blogspot.com/" target="_blank">Coretan Fahmi</a></li>
<li><a href="http://atanotonogoro.blogspot.com/" target="_blank">Atanotonogoro</a></li>
</ul>
</div>

Selesai sudah... semoga tidak mengalami kesulitan.

Bila artikel ini bermanfaat, anda dapat berlangganan melalui email secara gratis dengan memasukkan email anda di kotak bawah ini lalu "Subscribe"


Delivered by FeedBurner