Membuat Menu Scroll di Blogspot

Pada kesempatan kali ini saya akan sedikit berbagi tips bagaimana cara Membuat dan Memasang Menu Scrool di Blogspot. Adapun fungsi dan kegunaan menu ini adalah agar daftar list artikel yang kita posting tidak memakan tempat karena lebar dan panjang menu bisa kita sesuaikan dengan lebar space halaman blog. Bagi blogger pemula seperti saya, membuat menu dengan fungsi scroll ini awalnya saya pikir susah, padahal jika kita mengerti bahasa pemrograman, membuat menu seperti ini sangatlah mudah. Untuk penghematan tempat jika anda mempunyai daftar menu yang sangat panjang, menu dengan fungsi scroll ini bisa menjadi solusi yang tepat selain menggunakan marquee atau text berjalan. Dan pembuatan menu ini tidak menggunakan kode HTML yang banyak dan ribet, hanya sedikit kode HTML, anda sudah bisa membuat menunya. Menu ini bisa juga anda menfaatkan dalam menempatkan blogroll yang panjang atau daftar menu postingan yang anda miliki.

Untuk membuat menunya anda hanya membutuhkan kode HTML seperti ini :

<div style="overflow:auto;width:320px;height:250px;padding:10px;border:1px solid #eee"> 

ISI MENU 

</div>

Keterangan :

• width --> lebar menu
  
• height --> tinggi menu
  
• padding --> jarak antar tulisan dengan garis pinggir
  
• border --> ketebalan garis pinggir

Tinggal teman-teman kreasikan sendiri sesuai dengan blog anda!

Contoh kode HTML untuk menu yang saya punya :

SPOILER

<div style="overflow:auto;width:310px;height:200px;padding:10px;border:1px solid #eee">

1. <a href="http://harfly.blogspot.com/2013/03/menghilangkan-langgan-entri-atom-dan.html">Menghilangkan Langgan : Entri (Atom) dan Subscribe to : Poskan Komentar (Atom)</a>

2. <a href="http://harfly.blogspot.com/2013/03/cara-cek-page-rangk-dengan-google.html">Cara Cek PageRank Dengan Google Toolbar</a>

3. <a href="http://harfly.blogspot.com/2013/03/tips-untuk-meningkatkan-google-pagerank.html">Tips Untuk Meningkatkan Google PageRank</a>

4. <a href="http://harfly.blogspot.com/2013/03/google-pagerank-dan-manfaatnya.html">Google PageRank dan Manfaatnya</a>

5. <a href="http://harfly.blogspot.com/2013/03/pengertian-seo-search-engine.html">Pengertian SEO (Search Engine Optimization)</a>

6. <a href="http://harfly.blogspot.com/2013/03/internet-download-manager-versi-609_5547.html">Internet Download Manager Versi 6.09 Patch + Keygen Full Version</a>

7. <a href="http://harfly.blogspot.com/2013/03/cara-ampuh-agar-postingan-blog-tidak_12.html">Cara Ampuh Agar Postingan Blog Tidak Bisa diCopy-Paste</a>

8. <a href="http://harfly.blogspot.com/2013/03/cara-muda-mengganti-tema-facebook-keren.html">Cara Mudah Mengganti Tema Facebook Keren</a>

9. <a href="http://harfly.blogspot.com/2013/03/cara-membuat-spoiler-bukatutup.html">Cara Membuat Spoiler Buka/Tutup, Show/Hidden di Postingan Blog</a>

10.<a href="http://harfly.blogspot.com/2013/03/b-uat-kalian-para-blogger-marilah-kita.html">Tukeran Link</a>

11.<a href="http://harfly.blogspot.com/2013/03/k-ali-ini-saya-akan-memberikan-sebuah.html">Mengatasi Loading Blog dengan Google Code</a>

12.<a href="http://harfly.blogspot.com/2013/03/modifikasi-popular-posrt-untuk-template.html">Modifikasi Popular Post Untuk Template Gallery</a>

13.<a href="http://harfly.blogspot.com/2013/03/membuat-menu-drop-down-di-blogspot.html">Membuat Menu Drop-Down di Blogspot</a>

</div> 

Hasilnya :

1. Menghilangkan Langgan: Entri(Atom) dan Subscribe to:
    Poskan Komentar(Atom)

2. Cara Cek PageRank Dengan Google Toolbar

3. Tips Untuk Meningkatkan Google PageRank

4. Google PageRank dan Manfaatnya

5. Pengertian SEO (Search Engine Optimization)

6. Internet Download Manager Versi 6.09 Patch + Keygen Full Version

7. Cara Ampuh Agar Postingan Blog Tidak Bisa diCopy-Paste

8. Cara Mudah Mengganti Tema Facebook Keren

9. Cara Membuat Spoiler Buka/Tutup, Show/Hidden di Postingan Blog

10.Tukeran Link

11.Mengatasi Loading Blog dengan Google Code

12.Modifikasi Popular Post Untuk Template Gallery

13.Membuat Menu Drop-Down di Blogspot

Sedikit keterangan tentang elemen diatas :

• overflow:auto adalah kode untuk penggulung halaman apabila isi dari halaman tersebut sudah melampaui batas tinggi atau lebar yang telah di tentukan.
• width:310px adalah lebar bidang yang di inginkan, dalam hal ini adalah sebesar 310 pixel, nilai ini tentunya di sesuaikan dengan keinginan atau di sesuaikan dengan lebar sidebar yang ada. namun, agar selalu sesuai dengan sidebar maka sebaiknya memakai nilai 100% (width:100%).
• height:200px adalah tinggi bidang yang di inginkan, nilai ini bisa di ubah sesuai keinginan, misal jadi 300px.
• padding:10px adalah jarak agar tulisan yang ada dalam halaman tersebut tidak menabrak dinding halaman, nilai ini tentu saja bisa di ubah sesuai keinginan. misal : padding:5px.
• border:1px solid #eee adalah garis pada pembatas setiap sisinya, #eee untuk kode warna abu-abu.

Yah.... diatas tadi adalah langkah-langkah membuat menu scroll di blog kita. Jika anda ada masalah atau kesulitan dalam menerapkan kode-kode diatas anda bisa isi kotak komentar yang ada di bawah.

Selamat Mencoba !!