Cara Membuat Arsip Blog dengan Gaya Scroll

I. Cara ini sudah sangat umum tetapi mungkin ada yang belum menggunakan cara yang satu ini, cara ini sangat efektif untuk menghemat isi dari arsip blog kita, karena kalau blog yang sudah memiliki postingan lebih dari 1000 pasti arsip blognya akan sangat panjang jika ditampilkan dengan gaya hirarki.

Bagi yang mau mencoba silakan ikuti langkah berikut:
1. Masuk tab rancangan - edit HTML
2. Centang expand template widget
3. Ctrl+F cari kode berikut

</b:includable>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>

4. Tambahkan kode berikut pada script di atas sehingga akan seperti ini tampilannya:

</b:includable>
<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:300px;'>
  <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>

5. Kode yang saya tandai dengan warna merah, itu adalah kode yang harus anda tambahkan. Anda juga bisa mengatur tingginya dengan mengatur height:300px.

Sumber :  http://gumanta-info.blogspot.com/2012/03/cara-membuat-arsip-blog-dengan-gaya.html

II. Membuat Arsip blog / Daftar isi dengan fungsi scroll

Pada postingan kali ini saya akan menguraikan cara membuat Arsip blog / Daftar isi dengan fungsi scroll.
Dibawah ini adalah screenshot pada saat posting ini saya tulis:

Bagi sobat yang ingin menampilkan widgat Arsip / Daftar isi dengan fungsi scroll silahkan ikuti tips ngeblog berikut ini:

1. Login terlebih dahulu mengunakan akun bloger
2. Buatlah Arsip blog dengan menambah Gadget pada sidebar, beri nama dengan "Arsip"  ( bisa diganti sesuai keingian )  pilih gaya hierarki
   
3. Simpan/save. sampai disini anda telah membuat Arsip ( tanpa fungsi scroll ).
4. Utuk menambahkan fungsi scroll pada Arsip Sekarang tuju Tata letak -- -->>Edit HTML.
5. Beri tanda centang pada Expand Template Widgets.
6. Cari Arsip yang sudah di buat tadi, dengan CTRL+F dan ketikkan kata “Arsip”, ( biasanya di pojok kanan bawah ). akan muncul kode hatml seperti di bawah ini:
   
   
   <b:widget id='BlogArchive2' locked='false' title='Arsip' 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>
   
   
7. Perhatikan tulisan yang berwarna merah di atas, kode itulah yang harus disisipkan kedalam arsip yang telah dibuat, sedangkan tulisan yang berwarna biru pada height:200px; adalah ukuran tinggi pada fungsi scroll ( ganti angka 200 sesuai dengan keinginan )
   
8. Simpan template dan lihatlah hasilnya

Copyright : Galery Zone - : http://galeryzone.blogspot.com/2011/12/membuat-arsip-blog-daftar-isi-dengan.html#ixzz26S8MjKI2

III. Membuat Scroll Pada Blog Archive (Arsip Blog)

Bulan lalu berapa tulisan yang sudah kamu posting? Coba deh, yang pasang widget Arsip Blog dilihat! Bulan lalu saya berhasil memposting 8 tulisan di blog ini. Dan kali ini kita akan belajar ngeblog lagi, yaitu membuat scroll untuk arsip blog. Jika tampilan drop down sih tidak terlalu bermasalah. Tapi jika memilih tampilan herarki yang mempunyai kelebihan bisa menampilkan jumlah tulisan perbulan dan judul akan sedikit membuat blog terlihat kurang rapi. Iya kalau kita rutin mengupdate blog, kan sebagian blogger dan saya tidak pasti rajinnya mengurus 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.

Sumber : http://kurniasepta.blogspot.com/2011/10/membuat-scroll-pada-blog-archive-arsip.html

IV. Cara Mudah Membuat Scroll Blog Archive Widget

Mungkin sudah banyak blog di luar sana yang posting tentang  tips ini, namun tips ini saya berikan kepada temen saya yang kemarin tanya tentang bagaimana cara untuk memberi scroll pada Blog Archive.

Bayangkan jika pada suatu blog yang disitu sudah banyak artikelnya dan di situ dipasang widget Arsip Blog, tentu itu akan sangat memakan ruang di sidebar blog anda kan.?? nah, dengan memberi batasan tinggi pada widget blog arcive tersebut ini akan membuatnya lebih simpel dan tidak memakan ruang di sidebar, dan tentunya akan ada fasilitas scroll kebawah untuk melihat seluruh isi arsive blog tersebut.

Tips ini saya kasih cara dengan menambahkan kode css, karena lebih mudah Menggunakan Css Tanpa Harus mencari dan menambahkan kode div pada kode widget Archive Blog, seperti pada artikel sebelumya Menambahkan scroll pada Label Blogspot. Yuk langsung aja kita simak.

Membuat Scroll Pada Archive Blog dengan CSS
1. Login ke blogger
2. Sebelumnya buat dulu widget Arsip Blog, yaitu dengan cara menuju ke Tata Letak >> Tambah Gadget >> Pilih Arsip Blog/Blog Archive.
3. Tapi jika sebelumnya sobat udah memasang widget/gadget Arsip Blog pada blog sobat, maka langkah nomer 2 dilewati saja.
4. setelah sesesai membuat widget arsip blognya, Langsung menuju halaman Template >> Edit HTML
5. Cari kode BlogArchive1 dengan menggunakan Ctrl + F, usahakan saat anda cari kode tersebeut harus ada, karena itu adalah ID dari widget yang kita edit, jadi pada CSS harus sama.

6. Setelah itu Cari kode ]]></b:skin>
Kemudian, letakkan kode berikut di atas kode ]]></b:skin>

#BlogArchive1 .widget-content{
height:250px;
width:auto;
overflow:auto;
}

Yang perlu di perhatikan adalah :

• BlogArchive1 adalah ID dari widget BlogArchive1.
• height:250px; adalah tinggi dari widget Arsip Blognya. Ganti dengan ukuran tinggi yang anda inginkan

Sumber :  http://abdu-green.blogspot.com/2012/05/membuat-scroll-blog-archive-widget.html