Postingan kali ini, saya akan membahas tentang cara membuat arsip dan label blog yang model scroll, seperti yang sedang saya gunakan diblog ini. Btw, tau scroll kan? Coba tarik halaman blog ini keatas dan kebawah, nah naek turun kan? Itulah yang dinamakan model scroll. Fungsi Arsip dan Label dibuat scroll tentu adalah menghemat tempat Blog Anda seperti blog ini. Jika tidak diakali dengan menggunakan scroll tentu akan membuat label atau arsip akan memanjang terus menerus sehingga membuat halaman blog menjadi tidak karuan. Contoh model archive dan label yang memakai scroll adalah sebagi berikut :
Untuk membuatnya kita hanya menambahkan script berikut : <div style='overflow:auto; width:ancho; height:100px;'>
Dan, untuk letaknya akan saya beberkan satu persatu :
Arsip Model Scroll :
1. Login > Layout > Elemen Halaman
2. Buat widget Arsip dengan nama Arsip Blog
3. Pilih model yang Hirearchy
4. Masuk ke Edit HTML > centang kotak Expand Template Widget
5. Carilah 'Arsip Blog'. Selengkapnya begini:
<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:100px;'>
<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'/>
6. Sebelumnya tidak ada kode merah di template Anda. Tambahkan kode itu untuk mengaktifkan scrolling-nya
7. Dan untuk warna hijau, itu adalah tinggi arsip scrollnya. Jika kurang pas dengan templatenya, gantilah sesuai selera Anda.
8. Langkah terakhir, tentu adalah Simpan Template
Label Model Scroll :
1. Saya anggap anda telah memakai widget ini, dan langsung aja menuju Edit HTML
2. Klik Expand Widget Template
3. Carilah dengan kata kunci Label. Selengkapnya begini :
<b:widget id='Label1' locked='false' title='Label' type='Label'>
<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:100px;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
4. Kode warna merah, tentu belum ada ditemplate Anda. Tambahkan kode tersebut dan label model scroll akan aktif.
5. Dan untuk warna biru, itu adalah tinggi label scrollnya. Jika kurang pas dengan templatenya, gantilah sesuai selera Anda.
6. SImpan Template.
Blogger
- Kamus Nama bagus
- Efek Box Gelap Terang Menggunakan Opacity Effect dan CSS3 Transition
- Merubah Lebar Template Blog
- Cara Membuat New Recent Comment dengan Scroll Down di Blogspot
- Cara Memasang Yahoo Messenger Di Blogger
- Cara membuat browser bergetar saat klik kanan
- Cara Membuat Sitemap di Blogspot
- Membuat Widget Agar Selalu Tetep Berada Di Kiri,Kanan,Dll
- Cara Pasang Buku Tamu Facebook di Blog
- Tips Cara Pasang Status / ikon YM (yahoo messenger) di blog/web/friendster !
- Mengganti Tulisan Newer Post Older Post Dengan Gambar
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Memasang Radio Online atau MP3 di Blog
- SEXY BOOKMARKS V2 FOR BLOGGER
- Show Comment Bubble at Top Right of each Blogger Posts
- Automatic Read More with Thumbnail for Blogger
- Social Bookmarking Widget for Blogger with auto scrolling function
- CARA MEMBUAT EXPLORER D-TREE...
- Cara Pasang Tag Meta Robot Blogspot
- Cara Membuat Drop Caps Otomatis di Posting Blog
- Koleksi banner blog dofollow
- Cara mengecek kecepatan Blog
- Membuat Link Terbuka Pada Halaman Baru
- Memasang Feedjit Pada Blogger
- Membuat Gradient Effect dengan CSS
CSS
- Cara Membuat Vertical Sliding Info Panel With jQuery
- Membuat Gradient Effect dengan CSS
- CSS Shadow - Membuat Bayangan Dengan CSS
- Trik Rotasi Gambar Dengan CSS
- Kenalan Dengan Border Lengkung
- Image Gallery With CSS3
- Membuat Back To Top Dengan CSS
- Membuat Gambar Melayang di Blog
- CARA MEMBUAT TOOLTIPS DI BLOG...
- Membuat Sliding Login/Register Form Panel di Blogspot [JQery]
Arsip
0 komentar:
Posting Komentar