Selasa, 02 April 2013
Cara membuat menu scroll di blogspot - Dengan menu, pengunjung akan dapat dengan mudah menjelajahi sebuah blog. Menu bisa terletak di atas header, di bawah header, di foter, maupun di samping kanan atau kiri artikel. Dengan memasang menu pengunjung dapat mengklik link yang terdapat pada menu tersebut menuju link yang dimaksud. Anda bebas menentukan link mana yang akan dipasang, misal artikel terbaru, artikel paling banyak dibaca dan lain sebagainya.
Untuk kali ini Blogger Manyaran ingin berbagi cara membuat menu scroll yang bisa dipasang di sidebar (samping artikel). Tampilan menu tersebut seperti gambar di bawah ini:
Gambar menu scroll diatas terbentuk dari sekumpulan kode seperti dibawah ini:
<div style="overflow: auto; width: 220px; height: 200px; text-align: left; background:#FFFFF;">
<ul style="width: auto; margin: 0 0 0 0;">
<li><a href="URL">Judul Blog</a></li>
<li><a href="URL">Judul Blog</a></li>
<li><a href="URL">Judul Blog</a
</li>
<li><a href="URL">Judul Blog</a></li>
<li><a href="URL">Judul Blog</a></li>
<li><a href="URL">Judul Blog</a></li>
<li><a href="URL">Judul Blog</a></li>
</ul>
</div>
Perhatikan kode diatas. Angka yang saya warnai merah adalah lebar dan tinggi widget, angka tersebut dapat diganti menurut keingnan. Jika anda ingin memasangnya di blog sobat, anda tinggal mengganti URL dan nam menunya dengan yang anda inginkan.
Mungkin bagi yang masih pemula masih bingung bagaimana menerapkan kode-kode tersebut. Tenang saja, saya akan berikan langkah-langkahnya.
1. Masuk ke www.blogger.com dengan akun google.
2. Pada dasbor pilih Blog anda, lalu klik Layout (jika blog disetting menggunakan bahasa Inggris) atau Tata Letak jika blog disetting menggunakan bahasa Indonesia.
3. Add a Gadget, lalu pilih HTML/JavaScript.
4. Masukkan kode di atas pada kotak Content, namai Title menurut keinginan, misalnya Blogroll.
Mungkin kode di atas terlalu rumit, di sIni akan saya sederhanakan dan anda tinggal menggantinya
<div style="overflow: auto; width: 220px; height: 200px; text-align: left; background:#FFFFF;">
<ul style="width: auto; margin: 0 0 0 0;">
<li><a href="#">NAMA</a></li>
<li><a href="#">NAMA</a></li>
<li><a href="#">NAMA</a></li>
<li><a href="#">NAMA</a></li>
<li><a href="#">NAMA</a></li>
<li><a href="#">NAMA</a></li>
<li><a href="#">NAMA</a></li>
</ul>
</div>
Nah, sekarang saya yakin anda akan dengan mudah memahami mana yang harus diganti, coba bandingkan dengan kode lengkap yang di atas. Paham bukan?
5. Selanjutnya klik Save (Simpan). Drag dan letakkan gadget di mana anda menginginkannya, misal di samping kiri, kanan, atas atau bawah.
6. Langkah terakhir Save arrangement (Simpan).
Bagaimana, masih ada yang kurang paham? Silahkan tanyakan di kotak komentar yang tersedia.