Cara Mudah Membuat Efek Scroll di kolom postingan di Blog

Cara Membuat Scroll Bar di kolom postingan di Blog –

 Jika anda sering mengunjungi blog atau website pasti pernah melihat kotak dengan efek scroll yang membatasi objek menjadi lebih rapi dan tidak memakan banyak tempat.

Efek scroll ini sering digunakan pada widget sidebar seperti arsip, artikel terbaru, random post, popular post atau widged pengumuman yang berada pada sidebar. Selain itu juga sering digunakan dalam postingan blog.

Scroll Bar ini dapat digunakan untuk pengguna platform blogger maupun wordpress, scrip yang digunakan dapat berjalan dengan baik. Pada kesempatan ini saya akan memberikan contoh lengkap cara menggunakan scroll di blog.

Cara Membuat Scroll Bar di Postingan Blog

Scroll bar pada postingan blog ini sangat sering dijumpai untuk blog tutorial yang membagikan kode HTML atau yang lainnya, dengan memakai scroll box maka dapat menghemat ruang postingan dan terlihat lebih elegan.

Berikut kodenya dan Contoh scroll bar pada postingan: 

 

<div style="overflow:auto;max-height: 300px;background: #f7f7f7;border: 1px solid #DDD;padding: 10px;">
Isi dengan tulisan atau kode yang ingin anda masukkan pada scroll box
</div>

Cara Memasang di postingan blog:

1. Silahkan buka postingan yang ingin diberi scrool bar (bisa juga postingan baru)
2. Kemudian pilih mode HTML bukan Compose, lalu masukkan kode diatas.
3. Selesai dan lihat hasilnya.

Keterangan :

• max-height: 300px : adalah batas maksimal tinggi, bisa anda atur sesuai keinginan.
• background: #f7f7f7 : warna background, bisa diganti dengan warna favorit anda
• border: 1px solid #DDD : adalah garis kotak pada scroll box

Cara Menambahkan Scroll Pada Widget Sidebar

Caranya sama dengan memasang scroll pada postingan,  silahkan tambahkan gadet lalu pilih HTML/javascript lalu masukkan kode diatas. Maka akan secara otomatis membentuk kotak scroll.

Lalu bagaimana dengan widget popular post atau yang lainnya? cara cukup mudah anda tinggal menambahkan kode max-height dan overlow.

Sebagai contoh saya menggunakan scroll pada popular post. Silahkan cari kodenya .PopularPosts ul atau .PopularPost lalu tambahkan kode overflow:auto;max-height: 300px; pada bagian terakhir sebelum penutup } jadinya seperti ini:

.PopularPosts ul{font-family:'Poppins', sans-serif;list-style:none;margin:0;padding:0;overflow:hidden;text-align:left!important;overflow:auto;max-height: 300px;}

Jika pada widget arsip blog maka penerapannya seperti berikut:

1. Buka edit HTML, kemudian cari kode <div class='widget-content'>      
2. Setelah ketemu silahkan pasang kode <div style='height:300px;width:auto;overflow:auto;'> tepat dibawahnya. Dan tambahkan kode penutup </div> sebelum kode </b:includable>
3. Maka jika diterapkan akan seperti ini:

   <div class='widget-content'>
   <div style='height:300px;width:auto;overflow:auto;'>
   <div id='ArchiveList'>
   <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
   <b:include cond='data:style == &quot;HIERARCHY&quot;' data='data' name='interval'/>
   <b:include cond='data:style == &quot;FLAT&quot;' data='data' name='flat'/>
   <b:include cond='data:style == &quot;MENU&quot;' data='data' name='menu'/>
   </div>
   </div>
   </div>
   </div>
   </b:includable>

4. Selesai dan lihat hasilnya.

Demikian share tentang membuat scroll bar atau kotak scroll, semoga dapat bermanfaat dan menjadikan blog terlihat lebih cantik dan elegan. Selamat Mencoba.