BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

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

Page views this post: reader

13 komentar:

DJ (Wahyudin) said...

Pak klo pengen buat yang persis seperti blogrol my link bapak, gmn Pak? Soalnya lebih irit dan rapih

Aya said...

Iyah. Biar ada garis pemisahnya gitu, gimana cara bikinnya? Soale, klo sesuai dgn cara2 di atas, hasilnya ga ada garis pemisahnya :)

Jaloee said...

kalau pingin ada garis pemisah setelah tag < /a> tekan di keyboard Ctrl dan \ = hasilnya |

JoVie said...

oh..gitu yah...
baru tahu deh gw,....

Jameel said...

semakin banyak belajar semakin banyak ketidak tahuan kita

Bang Irwan said...

Wah..kang, makasih banget yak elmunya. Blogroll link temn2ku jd hemat tempat. Makasih...

pekebun said...

Ada yang untuk wordpress nggak?, maunya nambah widget bloroll lagi, kalo 1 kurang
Mohon info dong...

lina said...

Alhamdulillah, udah saya praktekan
dan langsung bisa
terimakasih ya Pak
semoga jadi amal ibadah buat Bapak :)

Jaloee said...

@ lina

yup sama2 makasih jg atas kunjuganya :D

Subkhan Al MZ said...

Makasih infonya langsung dicoba,Salam kenal...

drhyudi said...

salam kenal.tips2 bagus2

Indonesia News Aggregator said...

terimakasih banyak atas informasinya sobat, ini akan sangat berguna untuk kita semua Job Feed Aggregator, General Forum Discussion

salam

Teguh Bayu said...

thanks you very much... so much i like it

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial