Cara Membuat Scroll Box Pada Blog

        Scroll BOX? Apa Itu Scroll BOX?.. Buat apa kita buat scroll box? Mungkin pertanyaan itu akan sepintas di pikiran kita yang masih merasa sebagai pemula di blog, Saya juga masih Pemula dasar Blog, Karena saya Masih Baru di dunia Blog, Sekitar 2 Mingguan yang lalu saya membuat blog ini. Saya udah punya beberapa Postingan, tapi saya berpikir kalo Postingan yang saya buat akan memenuhi Blog Archive saya, Dan saya mulai berpikir untuk Membuat Blog saya supaya Banyak posting tapi Rapih, Dan hasil nya saya Browsing di Google, saya menemukan sedikit solusi untuk mengatasi masalah ini,  walau pun saya mendapatkan beberapa jawaban yang berbeda dar yang satu dengan yang lainya, di sini Creatif kita sebagai pemula dan pelajar blog, Pemula daan pelajar Blog Pingin menemukan Hasil yang Simple, Mudah dan Bisa Cepat Di buat, Jawaban yang saya ambil dari beberapa hasil yang saya dapat dari Browsing di internet yaitu "MEMBUAT SCROLL BOX" ini cara yang paling simple san mudah bagi para Pemula dan Pelajar blog,

   
  Dengan membuat scroll pada arsip blog, akan membuat panjang sidebar ke bawah tetap. Walau pada bulan tertentu banyak postingan atau sedikit arsip blog yang tampilannya herarki akan terlihat rapi dengan adanya scroll. Jika kita sudah menambahkan widget arsip blog dengan model herarki, langsung saja lakukan langkah selanjutnya.

Cara Membuat Scroll Pada Blog Archive (Arsip Blog)

1. Login ke Blogger.                                                                                                                                                   

2. Di halaman Dasbor, kita pilih Rancangan.                                                                                                        

3. Kemudian pilih Edit HTML                                                                                                               

4. Beri tanda centang pada Expand Template Widget

5. Cari kode berikut                                                                                                                                   

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>

6. Kode lengkapnya adalah seperti ini                                                                                                       

<b:widget id='BlogArchive2' locked='false' title='Arsip Blog' type='BlogArchive'>                         

<b:includable id='main'>                                                                                                                                 

<b:if cond='data:title'>                                                                                                                              

<h2><data:title/></h2>

</b:if>

<div class='widget-content'>

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

<div id='ArchiveList'>

<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

<b:if cond='data:style == &quot;HIERARCHY&quot;'>

<b:include data='data' name='interval'/>

</b:if>

<b:if cond='data:style == &quot;FLAT&quot;'>

<b:include data='data' name='flat'/>

</b:if>

<b:if cond='data:style == &quot;MENU&quot;'>

<b:include data='data' name='menu'/>

</b:if>

</div>

</div></div>

<b:include name='quickedit'/>

</div>

</b:includable>

<b:includable id='flat' var='data'>

<ul>

<b:loop values='data:data' var='i'>

<li class='archivedate'>

<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)

</li>

</b:loop>

</ul>

</b:includable>

<b:includable id='menu' var='data'>

<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>

<option value=''><data:title/></option>

<b:loop values='data:data' var='i'>

<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>

</b:loop>

</select>

</b:includable>

<b:includable id='interval' var='intervalData'>

<b:loop values='data:intervalData' var='i'>

<ul>

<li expr:class='&quot;archivedate &quot; + data:i.expclass'>

<b:include data='i' name='toggle'/>

<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>

<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>

<b:if cond='data:i.data'>

<b:include data='i.data' name='interval'/>

</b:if>

<b:if cond='data:i.posts'>

<b:include data='i.posts' name='posts'/>

</b:if>

</li>

</ul>

</b:loop>

</b:includable>

<b:includable id='toggle' var='interval'>

<b:if cond='data:interval.toggleId'>

<b:if cond='data:interval.expclass == &quot;expanded&quot;'>

<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=close&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>

<span class='zippy toggle-open'>&#9660; </span>

</a>

<b:else/>

<a class='toggle' expr:href='data:widget.actionUrl + &quot;&amp;action=toggle&quot; + &quot;&amp;dir=open&amp;toggle=&quot; + data:interval.toggleId + &quot;&amp;toggleopen=&quot; + data:toggleopen'>

<span class='zippy'>

<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>

&#9668;

<b:else/>

&#9658;

</b:if>

</span>

</a>

</b:if>

</b:if>

</b:includable>

<b:includable id='posts' var='posts'>

<ul class='posts'>

<b:loop values='data:posts' var='i'>

<li><a expr:href='data:i.url'><data:i.title/></a></li>

</b:loop>

</ul>

</b:includable>

</b:widget>

7. Kode warna merah dan hijau adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.

 8. Simpan jika sudah selesai.

Semoga Artikel Ini Bisa Bermanfaat Bagi Anda Semua, Bisa Jadi Pengetahuan baru yang berguna, Dan Semoga bisa di coba dalam blog nya,

Baca Artikel lainya, dan kunjungi lagi lain waktu

Terima Kasih Atas Kunjungan nya

Salam Blogger Indonesia 

Posted in: