Cara Membuat Scroll Blog Archive di Sidebar Paling Mudah

Halo juragan… kita jumpa lagi dalam tips & trik membuat scroll untuk blog archive yang nantinya kita letakkan di widget sidebar blog kita. Fungsinya adalah sebagai sitemap atau daftar isi agar para pembaca bisa dengan mudah menavigasi blog kita.

Semua artikel yang ada di blog kita akan mudah ditemukan oleh para pengguna hanya dengan menavigasi sitemap ini.Ini lebih sempurna jika dibandingkan dengan sitemap model lain, misalnya daftar isi yang memanfaatkan rss feeds blog untuk memanggil artikel terbaru.

Karena teknik tersebut hanya terbatas pada artikel terbaru saja yang akan tampil di daftar isi, biasanya maksimal 100-125 artikel terbaru saja. Lagi pula jika koneksi internet pengguna lambat, maka daftar isi yang seperti itu tidak bisa tampil.

Namun dengan teknik yang satu ini, yaitu meletakkan blog archive pada kotak scroll di sidebar, maka semua artikel yang ada di blog akan bisa ditemukan semuanya tanpa terkecuali. Artikel pertama dan terakhir akan tampak disitu.

READ  Menyimpan File Data Secara Online di Cloud Storage

Selain itu akan membuat blog kita lebih rapi dan ringkas karena deretan archive artikel yang panjang akan dikemas ke dalam kotak scroll naik turun.

Dan yang lebih untung lagi teknik ini sangat baik dalam hal seo (search engine optimization). Karena banyak link internal yang tertaut di sidebar yang nantinya akan ikut tersimpan di indeks mesin pencari atau search engine. Sehingga blog kita mudah ditemukan oleh para pengguna internet atau netter.

Tampilannya bisa juragan lihat seperti gambar dibawah ini.

Sekarang kita mulai caranya;

1. Langsung saja pergi menuju dasbor blogger, buka HTML template, dan cari kode ini;

‘ArchiveList’

2. Jika sudah ketemu, copy kode dibawah ini dan pastekan tepat di atas  ‘ArchiveList’

<div style=’overflow:auto; width:ancho; height:250px;’>

3. Satu lagi, lihatlah kode <b:include name=’quickedit’/> yang ada dibawahnya. Lalu tambahkan kode </div> tepat di atasnya.

READ  Cara Merubah Ukuran Lebar Template Blogger Paling Mudah

* Maka hasilnya akan seperti dibawah ini

<div style=’overflow:auto; width:ancho; height:250px;’>
<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’/>

Note: 250 adalah tingginya. Sesuaikan sesuka anda.

4. Klik Preview/Pratinjau. Jika oke, klik Simpan dan lihat hasilnya. Begitulah.

Berikutnya>> Cara Memindah Sidebar Kanan ke Kiri Template Thesis Blog Juragan

Gambar Gravatar
Saya hanyalah seorang blogger biasa yang ingin berbagi pengalaman kepada pembaca melalui blog ini. Ilmu yang bermanfaat harus disampaikan kepada orang lain sebelum kita kembali padaNya. Indri Lidiawati

28 komentar

  1. trimakasih mastah saya sudah menerapkan tapi saya mau bertanya kalau misalnya pengen di beri warna yang nama BLOG ARCHIVE nya gimana seperti yang punya mastah di atas tuh kan ada warna merahnya.<br />maaf sebelumnya kalau sempat mampir yah ke blog newbie <br /><br />http://ciranjang-cianjur.blogspot.com/

    1. tergantung templatenya mastah 😀 silakan aja cari di sumber laman di deretan #sidebar-wrapper dan ubah warna backgroundnya 🙂

  2. oohh gitu ya soalnya saya pake template original blog cepot hehe saya coba telusuri ko malah yang rubah header nya cek cek cek

  3. makasi mastah ane langsung coba deh

  4. terima kasih mas…dicoba langsung work…:)

  5. terimakasih atas tutorialnya …salam kenal<br />

  6. ijin coba caranya ya gan . . .makasih

  7. aku coba ko eror ya mbak waktu meletakkan kode yang pertama kenapa?

    1. mungkin bisa saja templatenya gak support mbak, tapi coba aja deh utak atik lagi siapa tahu lama2 bisa hehehe 😀

  8. terima kasih mbak indri, tipsnya work bangetlah.sudah saya terapkan pada blog saya mbak.<br />oh iya mbak saya mau tanya mengenai cara membuat kotak pencarian pada menu diatas header bagaimana ya mbak?<br />terima kasih.<br />salam blogger wongjatim

  9. makasih mabk langsung sukses di pake di blog saya. :)<br /><br />ternyata ini blog pemilik IAPD. salam kenal mabk, saya dapet banyak ilmu di group IAPD

  10. mbak indri..
    mohon maaf, apa nggak kebalik ya yg itu. sepertinya seharusnya di bawah, bukan di copi di atasnya.

    1. itu sudah benar mas hanif, kodenya dipastekan tepat di atas archivelist 😀

  11. Yah.. Padahal saya cuman salah penempatannya doang.

  12. Mbak, coba perbaiki blockquote blog anda. Saya pastekan ke template dan gagal, karena saya copy code -> (‘) tanpa tanda kutip menjadi mereng alias italic. Mungkin browser ane yang eror atau blm update. ya itu aja terimakasih 😀

    1. Makasih sarannya mas Daniel, tapi saya periksa disini tidak ada masalah 🙂 Sebaiknya script nya pastekan dulu ke notepad agar script2 tersembunyi yg ikut tercopas bisa hilang 😀

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *