Sunday, June 6, 2010

Membuat Blogroll CSS Ringan Loading

Stylin' with CSS: A Designer's Guide (2nd Edition)
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...


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(http://lh5.ggpht.com/_5aEfFT-0hkk/S-qoJ9F3n2I/AAAAAAAAA3M/xdbvFMYuiAs/blogroll-rollover-img.png) 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 :

Blogroll Image

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

9 comments:

  1. masih agak bingung, tapi mau nyoba duLu deh. mudah-mudahan berhasiL, berhasiL, hore!!!. semoga.
    terima kasih Ummi atas tutornya.

    ReplyDelete
  2. Saya ke blog om, kok blum keliatan blogroll barunya om...

    ReplyDelete
  3. kan baru mau dicoba, semoga berhasiL, nanti dikabarin deh. mau utak-atik

    ReplyDelete
  4. sudah pake ctrL+f, tapi disiniii... enggak ada (bLa..bLa..bLa..head), adanya cuma (bLa..bLa..bLa..skin).
    tapi coba copas diatas itu aja kaLi yah, mudah-mudahan bisa.

    ReplyDelete
  5. udah coba, tapi kok bentuknya jadi aneh yah. cuma ada tuLisan tapi enggak ada koLom dan garisnya, dicoba atur warnanya juga tetep aja begono. apa karena kode CCS-nya ditempat si_om enggak ada (headnya)?.

    ReplyDelete
  6. This comment has been removed by a blog administrator.

    ReplyDelete
  7. Tips nya bagus heheheh berguna baget neehh

    ReplyDelete
  8. nyoba dulu ah ...
    slam kenal :)

    ReplyDelete