Blogroll Scrolling Dengan Inline Style

M elanjutkan kisah kemarin tentang membuat blogroll scrolling , yakni membuat kotak atau box  untuk link blogroll kita yang bisa di scroll. contoh na seperti blogroll My Link di blog ini.

Namun pada tulisan kali ini, kita tidak mengunakan atau membuat dulu sinstaks di halaman css -nya, tetapi langusng menerapkan properti kodenya pada elemen Html. bahasa kampung-nya Inline Style Sheet gitu lho :)

Baiklah tampa basa basi langsung saja pada penerapanya. dalam layout buka tab Edit Html .

kemudian tandai Expand Template Widget.

Setelah itu cari elemen Daftar link Blogroll kita, yaitu ber- id "linklist1". kalau di blog kita ada dua daftar link maka menjadi"linklist2" dst. atau kalau daftar link kita di beri judul semisal " My link ", "blogroll" dst. maka cari tulisan itu. ( gunakan kotak pencarian di browser ie atau firefox lihat cara mudah mencari kode css dan html di sini.)

Jika sudah ketemu masukan kode ini.

<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px;font-size: 12px; height: 200px;width: 94%;text-align: left;">

dan di tutup dengan kode ini.

</div>

Hasil penerapan kode di atas pada elemen daftar link "lisklist"  kira-kira menjadi seperti ini. ( lihat tulisan yang dipertebal )

<b:widget id='LinkList1' locked='false' title='Link Teman' type='LinkList'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div style="overflow: auto;background-color:#C7DFB5; margin: 0px auto; padding: 5px;font-size: 12px; height: 200px;width: 94%;text-align: left;">
<div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>  
<b:include name='quickedit'/>
</div></div>
</b:includable>
</b:widget>

Dan untuk kolom sidebarnya yang terlalu lebar seperti blog ini, atau daftar link-nya di simpan di bagian bawah ( footer ), bagusnya buang saja tag ini <ul> <li> </li> dan </ul>. biar daftar link-nya memanjang.

Penjelasan yang tidak jelas namun perlu biar jelas.

Overflow: auto; -> Mengatur batas sebuah konten atau isi. jika conten-nya melebihi batas yang telah di tentukan maka scrollbar akan di tampilkan.

height:200px; -> ukuran tinggi sebuah objek/box.

width: 94%; -> ukuran lebar sebuah objek/box. mengunakan satuan persen ( % ), untuk memudahkan bagi kita yang tidak tahu persis berapa ukuran lebar sidebar yang kita miliki. karena dengan satuan persen akan secara otomotis mengikuti ukuran sidebar yang kita miliki.

Tulisan Rada Nyambung

membuat kotak scroll untuk blogroll

Technorati tags: Blogroll Scrolling, New Blogger Tutorial

Page views this post: reader