Scrolbar Box adalah kotak yang mampu menampung banyak baris link dan ukuran box nya bisa dibatasi . Yach… begitulah kira-kira pengertian mudahnya 
.
Karena mampu menampung banyak baris dan box nya bisa kita batasi, maka properties ini sangat cocok jika kita ingin menampilkan banyak link agar link-link tersebut terindeks juga oleh google . Sip.
Nah… Berikut caranya, Ada 2 langkah utama dalam pembuatannya :
- Tambahkan kode untuk div id di css theme antum (style.css)
- Apply dan panggil kostumisasinya di template yang di inginkan.
Langkah Pertama >>
#tutorbox {
overflow: auto;
width: 560px !important;
height: 911px;
padding:9px !important;
border:1px solid #ddd !important;
margin:5px 0px 0px !important;
background-color: #F0E68C;
font-size: 14px
}
Penejelasan kode diatas sangat simple sekali :
overflow > kode untuk membuat scrolbox
width > lebar (kesamping) box yang diinginkan
height > panjang (kebawah) yang diinginkan
Padding > jarak antara isi dan box
Background-colour > pengaturan warnanya
Font-size > ukuran hurufnya
Itulah penjelasan simple nya , silakan antum sesuaikan kebutuhan masing-masing.
Copy kode berikut dan paste ke style.css template antum.
Langkah Kedua>>
Apply kode berikut ke template yang di inginkan.
<h1>Tutorial Blog Mesin WordPress</h1></div>
<div id=”tutorbox“>
<ul>
<?php $recent = new WP_Query(“cat=12&showposts=15″); while($recent->have_posts()) : $recent->the_post();?>
<li>
<a title=”Meluncur langsung ke <?php the_title(); ?>” href=”<?php the_permalink() ?>” rel=”bookmark”><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
</div>
Pada contoh diatas, ane ingin menampilkan 15 postingan terakhir dari cat id 12 yaitu kategori “wordpress”.
Dan Berikut hasilnya jika memakai contoh kode diatas :
Selamat mencoba, semoga beruntung.
Semoga bermanfaat.
Postingan hebat lainnya yang berhubungan :
- Cara Mudah Membuat Blinking Text Dengan Bantuan CSS Theme
- Cara Menampilkan Postingan Dengan Category Tertentu Didalam ScrollBar Box
- Cara Membuat ScrollBar Box Dengan Isi Random Post
- Cara membuat list-style dengan css
- Cara Sangat Mudah Membuat Post Thumbnail Dengan Timthumb
- Cara Mudah Membuat Fadding Marquee Text ( Efeks teks menghilang secara perlahan) Pada Mesin WordPress
- Cara Membuat Transparansi Unsur dengan Opacity di CSS3
- Cara Membuat Menu Hierarki (Menu-Submenu) Pada Mesin WordPress
wah keren banget mas tuh tipsnya…
tapi q sering ada kendala di CSS..
ada cara lain gak…???
mohon bimbingannxa..!! terima kasih..