Cara Membuat Scroll Pada Blog Archive

Scroll Pada Blog ArchiveCara Membuat Scroll Pada Blog ArchiveKamu udah posting bayak? udah pasang Archive di widget? takut nanti makan tempat jika posting banyak? gak usah takut, karena Mas Hanif bakal kasih solusinya. 

Okeh 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:


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 biru adalah kode yang ditambahkan kedalam script tersebut, 200 adalah tingginya, dan kita bisa ubah seseuai selera.

8. Simpan jika sudah selesai. 

Blog ini menganut sistem dofollow, silahkan koment dan dapatkan backlink gratis. 
Sekian kurang lebihnya mohon maaf, jika anda berkenan tolong follow blog ini, anda juga bisa request Software dan Tutorial ke saya dengan cara like dan comment di FP blog ini. Baca juga artikel tentang Advaced System Care With Antivirus 2013BitDefender Total Security 2013Cara Menambah Followers Twitter Gratis.

Anda sedang membaca Artikel tentang Cara Membuat Scroll Pada Blog Archive dan anda bisa menemukan Artikel Cara Membuat Scroll Pada Blog Archive ini dengan URL http://blogmashanif.blogspot.com/2012/08/membuat-scroll-pada-blog-archive.html. Diharapkan agar tidak melakukan copy paste terhadap Artikel Cara Membuat Scroll Pada Blog Archive ini, untuk pengutipan harus meletakkan link Cara Membuat Scroll Pada Blog Archive sebagai sumbernya.

Enter your email address:

readers

8 komentar:

  1. udah saya follow ..
    follow my blog :
    http://ramadhanakurnia.blogspot.com

    BalasHapus
  2. oke mas sangat bermanfaat.
    langsung praktek dan siiiip

    BalasHapus
  3. ok masbrow minta kunbalnya ya. ..

    BalasHapus
  4. Manteb Bener Artikel Nya...

    Oiya Jangan Lupa Mampir ya Ke Blog Saya...

    BalasHapus
  5. Mantabs...
    bisa langsung praktek nehh...

    BalasHapus

Berkomentarlah dengan sopan dan bijak. Dilarang berkomentar dengan menyertakan link hidup atau unsur yang berbau spam. Jika ingin minta followback silahkan dan jangan sungkan, karena saya juga senang jika teman saya bertambah.