Membuat Scrool Pada Sidebar Blogspot
Wah udah lama nih Coretan Tangan ngga bahas tentang blog tutorial.
Kali ini Coretan Tangan akan berbagi pengalaman tentang bagaimana membuat scroll di seidebar.
Oke, sebelumnya saya beri tau dulu. Tips ini bisa di terapkan di semua sidebar. Misalnya saja Arsip Blog, Popular Post, Recent post atau apapun deh, yang penting ada di sidebar. Yang membedakan adalah kode penamaannya saja...
Oke sebagai contoh, saya ambil cara membuat archive blog (arsip blog) di blogspot.
Caranya adalah sebagai berikut:
1. Log In blogger dulu (ini bagian awal yang paling penting)
2. Masuk Rancangan >> Edit HTML >> Centang Expand Template Widget
3. Cari kode seperti ini : (Kode berwarna biru) * Kalau kesulitan minta tolong ma tombol F3
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div></div>
<b:include name='quickedit'/>
</div>
</b:includable>
4. Sispkan kode berwarna merah sampai seperti ini :
<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 + "_ArchiveList"'>
<b:if cond='data:style == "HIERARCHY"'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == "FLAT"'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == "MENU"'>
<b:include data='data' name='menu'/>
</b:if>
</div></div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
5. Selesai deh tinggal di save....
* Yang height:200px adalah tinggi sidebarnya jadi bisa diganti - ganti sesuai selera....
Oke, itu barusan kalau di arsip blog. Lha terus kalau sidebar sendiri gimana???
Sebagai contoh di blog Coretan Tangan kan ada sidebar yang saya kasih nama "Friends", jadi cara buatnya gini :
1. Log In
2. Rancangan >> Edit HTML >> Expand Template Widget
3. Trus saya cari kata "Friends", nah katemunya kaya gini:
<b:widget id='HTML3' locked='false' title='Friends' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
4. Lalu masukkan kode yang sama seperti saat kita membuat scroll diarsip blog seperti ini:
<b:widget id='HTML3' locked='false' title='Friends' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow:auto; width:ancho; height:200px;'>
<data:content/>
</div>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
5. Tinggal disave deh....
* Yang height:200px adalah tinggi sidebarnya jadi bisa diganti - ganti sesuai selera....
Oke, sekian postingan Coretan Tangan kali ini, semoga bermanfaat...!!!
Posting Komentar