Membuat Scroll di Widget/Elemen Blog

Postingan kali ini akan mengupas tutorial blog (tips trik blog) yang lain. Sekarang adalah yang berhubungan dengan masalah scroll. Fungsi scroll dalam sebuah web/ blog sangat membantu, karena dengan fungsi scroll web/ blog yang kita miliki tidak terlalu memanjang kebawah.

OK. silahkan sobat ikuti langkah-langkahnya di bawah ini :

Memberi Scoll Pada Setiap Postingan
Bagi sobat menginginkan setelah readmore artikel tetep terlihat pendek sehingga tidak memnajang ke bawah, sobat bisa menambahkan scroll pada postingan blog sobat dengan kode dibawah ini :

.post {

height:200px;

overflow:auto;

}

Hanya Pada Postingan Tertentu
Untuk masalah ini sebenarnya bisa dilakukan dengan cara yang pertama, Namun akan lebih mudah jika sobat memberikan sedikit css pada edit html. So, sobat bisa memanggilnya kapan saja dengan mudah.

Silahkan sobat letakkan kode dibawah ini sebelum ]]></b:skin>

.scrollpost {

height:100px;

width:500px;

overflow:auto;

}

Nah, ketika sobat menulis sebuah postingan awali dengan model penulisan seperti berikut ini.

<div class="scrollpost">

Tulis postingan Anda disini

</div>

Kode tersebut bisa diletakkan ditengah postingan tergantung bagian postingan mana yang akan di beri scroll.

Membuat Widget Dengan Scroll
Cara ini digunakan untuk memberi scroll pada teks atau html kode. Nah, caranya mudah sekali. Silahkan gunakan script seperti ini:

<div style="overflow:auto; padding:5px; width:80px; height:80px; background-color: rgb(255, 255, 255); border:1px solid #ccc;">

Tambahkan teks atau script disini

</div>

yang berwarna biru sobat bisa menggantinya dengan lebar/ tinggi sesuai dengan selera sobat.

Menambahkan Scroll Pada Widget Bawaan Blogger
Nah, kalo kasus ini adalah cara untuk memberikan sroll pada widget blogger seperti archives, Recent Posts dsb.

* Masuk ke Tata Letak, pilih Edit HTML.
* Jangan lupa centang Expand Widget Templates
* Cari kode widget yang sobat inginkan

cara mencari yang paling mudah adalah dengan ctrl+f lalu masukkan judul widget di kotak pencarian. OK, saya ambil contoh penambahan scroll pada widget recent posts.

<b:widget id='Gadget1' locked='false' title='Recent Posts' type='Gadget'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:renderingUrl != &quot;&quot;'>
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div style='border: 0px solid #F5003D; overflow: auto; width: 310px; height: 100px; text-align: left;'>

<b:if cond='data:gadgetSnippet != &quot;&quot;'>
<data:gadgetSnippet/>
<b:else/>
<div class='widget-content'>
...............................................................
..................................................................
</div>
</b:if>

</div>

<b:else/>
<data:errorMessage/>
</b:if>
<b:include name='quickedit'/>
...............................................

Kode yang berwarna biru adalah kode scroll yang harus sobat tambahkan.