11 Juni 2008

Membuat bingkai Scroll pada widget baru blog

Kita ketahui bahwa pada layanan blogger terutama pada elemen halaman ada fasilitas baru yaitu “Daftar blog”. Fasilitas ini bila kita manfaatkan sebagai wadah daripada link-link sahabat blogger tentunya akan lebih menarik.

Karena dengan fasilitas ini kita akan tahu posting terbaru dari blog sobat yang sudah kita link.tanpa harus membuka link daripada blog tersebut. Kita pun tidak direpotkan harus mengurutkan abjad daripada nama blog yang akan kita link.
Hanya saja kita perlu menambahkan bingkai scroll agar daftar dari blog yang sudah kita link tidak terlalu panjang, langkah ini untuk mengantisipasi blog yang kita link banyak sekali.

Kopi kode dibawah ini

#scrolling {
overflow: auto; height: xxxpx; width: xx%;
background-color:#xxxxxx; border:xpx solid #xxx;
margin: xpx auto; padding:xpx; font-size: xxpx;
color: #xxx; text-align: left;
}

Ganti tanda x dengan ukuran dan kode warna sesuai selera anda

Kemudian kita masuk dalam halaman layout,kita buka tab Edit Html jangan tandai kotak Expand Template widget, Paste kode tersebut diatas kode : ]]></b:skin> kemudian kita simpan template.

Masih pada tab Edit Html, tandai kotak Expand Template widget

Lalu cari kode berikut :

<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div class='widget-content'>

Tambahkan kode <div id='scrolling'> diantara kode </b:if> dan kode <div class='widget-content'>

Hasilnya akan seperti ini

<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<div id='blog-list-title'>
<h2 class='title'><data:title/></h2>
</div>
</b:if>
<div id='scrolling'>
<div class='widget-content'>

Kemudian tambahkan kode </div> diatas kode dibawah ini

</b:includable>
</b:widget>

Selamat mencoba

10 komentar:

uNieQ mengatakan...

mau ta coba ah mas.. ntar klo dah sukses sy kabarin lagiiii

terus kasi ilmu ya mas???

Kristina Dian Safitry mengatakan...

oke juga nih...

Eucalyptus mengatakan...

Waduh, pusing aku... he he he..

reDs mengatakan...

aku mo nanya,,, ukuran standarnnya brapa yagh mas?

marsudiyanto mengatakan...

Makasih Ilmunya. Semoga sukses selalu

Nataludin mengatakan...

to reDs :

Udah aku kirim infonya lewat email anda, selamat mencoba...ntar kalau bingung lewat YM aja

gi3 mengatakan...

Mas,code warna dan ukuran standarnya berapa?

Daniel MG mengatakan...

coba ahhh....

cyber3 mengatakan...

sipps dah

Asmara Susanto mengatakan...

langsung k TKP

Posting Komentar

 
Foto saya
Ketidaktahuan anda adalah kepedulianku untuk selalu memberikan informasi, meski hanya sekedar hilangkan rasa ingin tahu saja.