Cara mudah membuat scroll pada widget standar blogger

Assalamualaikum Wr. Wb.

     Cara mudah membuat scroll pada widget standar blogger - Terkadang saat kita pingin bikin menambahkan manfaat scroll pada widget standar blogger yang kita pasang tak tahu dihalaman sidebar serta footer layaknya arsip situs, artikel popular serta atau yang lain, bikin kita bingung bagaimana langkah memodifikasi tiap-tiap daftar widget tersebut ? supaya seluruh widget ada keseragaman serta hingga penampilan halaman situs (blog) kita lebih terkesan menarik dilihat.

     Disamping itu juga karenanya ada manfaat scroll pada tiap-tiap widget dapat menghemat area dihalaman sidebar atau pada halaman footer blog yang memanjang kebawah. lantas untuk memodifikasi seluruh widget yang sudah kita pasang pada mulanya, butuh dikerjakan sebagian trik yang amat sederhana. oleh sebab itu, untuk mengaplikasikan trik tersebut, silakan saudara ikuti uraian singkat di bawah ini : 

✔ Masuk terlebih dulu ke blog blogger yang anda kelola, apabila sebelumnya sudah masuk, pada halaman draft blogger klik menu Template.
✔ Backup template, untuk menjaga kemungkinan terjadi eror.
✔ Lalu klik Edit HTML.
✔Kemudian cari nama widget yang akan diberi fungsi scroll, caranya adalah sebagai berikut :

• Tekan Ctrl F pada keyboard, lalu ketik nama widget. Sebagai contoh : daftar widget Artikel Populer, maka lihat nama widget pada blog yang anda kelola untuk mencari pada editor template.

• Contoh struktur widget artikel populer pada editor template Blog ini adalah sebagai berikut :

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>

Rangkaian kode disini :

</div>
</b:includable>
</b:widget>

• Atau contoh widget Like, Follow & Review seperti pada halaman sidebar disamping, struktur rangkaian kode dalam editor template blog ini adalah sebagai berikut :

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

</b:includable>
</b:widget>

• Apabila telah menemukan nama widget yang ingin anda tambahkan fungsi scroll, letakkan kode berikut :

<div style='overflow:auto; width:auto; height:250px;'>

tepat dibawah kode <div class='widget-content popular-posts'> atau <div class='widget-content'>.

• Kemudian scroll kebawah cari lagi kode </b:includable> atau untuk mempermudah jika dalam editor template anda terdapat kode <b:include name='quickedit'/>, letakkan kode

</div> 

tepat diatas kode tersebut, sehingga terbentuk seperti struktur kode dibawah :

<b:widget id='PopularPosts1' locked='false' title='Artikel Populer' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content popular-posts'>    <=== perhatikan bagian ini.
<div style='overflow:auto; width:auto; height:250px;'>

Rangkaian Kode disini :

</div>
</div>
</b:includable>  <=== perhatikan bagian ini.
</b:widget>

Atau seperti contoh dibawah

<b:widget id='HTML3' locked='false' title='Like, Follow &amp;amp; Review' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>   <=== perhatikan bagian ini.
<div style='overflow:auto; width:auto; height:250px;'>
<data:content/>
</div>

</div>
</b:includable>  <=== perhatikan bagian ini.
</b:widget>

✔ Untuk melihat hasilnya klik tombol Pratinjau.
✔ Jika sudah, Simpan Template anda dan Tutup kembali editor template.
✔ Selesai.

Keterangan :

• Untuk mempermudah cara mencari nama widget selalu gunakan Ctrl F, lalu ketik nama widget seperti pada contoh uraian diatas.

• 250px adalah tinggi scroll, anda bisa menyesuaikan dengan kebutuhan, misalnya menjadi 100px, 150px atau 200px.

• <div class='widget-content'>, sebagai kunci utama untuk meletakkan kode pembuka <div style='overflow:auto; width:auto; height:250px;'>, dibawahnya. Anda bisa melihat perbedaannya pada contoh struktur widget Artikel Populer dan Like, Follow & Review.

• </b:includable> dan <b:include name='quickedit'/> sebagai tempat penutup kode </div>, diatasnya.

• Jika sebelumnya anda pernah menghapus kode <b:include name='quickedit'/>, letakkan kode penutup </div> tepat diatas </b:includable>, seperti pada contoh diatas.

OK, semoga bermanfaat untuk anda, dan terima kasih sudah mau berkunjung dan membaca artikel...

Wassalamualaikum Wr. Wb.

Cara mudah membuat scroll pada widget standar blogger

Artikel Terkait

^0^)~ YIS Backlinks ~(^o^

URL

Code For Forum

HTML Code <a href='http://yogismr.blogspot.com/2013/06/cara-mudah-membuat-scroll-pada-widget.html' target='_blank'>Cara mudah membuat scroll pada widget standar blogger</a>