Flickr Widget

Minggu, 07 Oktober 2012

CARA MEMBUAT TAB MENU DROPDOWN DIBLOG

Kali ini kita akan ngebahas cara MEMBUAT TAB MENU DROPDOWN, caranya nggak begitu rumit kok, Mau Tau ?? Mau ?? Ikuti Tutorial berikut ini.....:

1. LogIn ke blog kamu
2. Klik TEMPLATE
3. Klik EDIT HTML
4. Klik LANJUTKAN
5. Jangan lupa klik EXPAND TEMPLATE WIDGET
6. Cari kode ]]></b:skin> (cari kode tersebut dengan mengklik tombol F3 / Ctrl + F )
7. Kalau sudah ketemu, letakkan kode dibawah ini tepat diatas kode ]]></b:skin





8. Kemudian cari kode </head> , jika sudah ketemu, Copy-Paste kode dibawah ini tepat diatas kode </head>.






9. Tambahkan kode dibawah ini pada bagian Header Blog atau pada bagian <body> atau jika template masih setandar letakkan pada bagian <div id='outer-wrapper'> namun ada beberapa template yang memiliki struktur kode yang berbeda seperti template blogger standar pada demo, saya meletakkan kode berikut ini dibawah tag penutup </header> (masing-masing template berbeda).


<div id='Live'>
<ul class='dropmenu' id='nav-one'>
<li>
<a href='#'>Home</a>
</li>
<li>
<a href='#'>Forum</a>
<ul>
<li><a href='#'>Support</a></li>
<li><a href='#'>Help</a></li>
<li><a href='#'>Examples</a></li>
<li><a href='#'>Your work</a></li>
</ul>
</li>
<li>
<a href='#'>Downloads</a>
<ul>
<li><a href='#'>Tools</a></li>
<li><a href='#'>Office</a></li>
<li><a href='#'>Custom projects</a></li>
</ul>
</li>
<li>
<a href='#'>Services</a>
<div class='products'>
<ul>
<li><img alt='Thumb' border='0' height='40' src='https://lh3.googleusercontent.com/_HR8egC6j8tg/TaO0_4J88II/AAAAAAAAAWQ/jXzJP5JiRr4/design.png' width='40'/><h2>Design Template</h2><p><a href='#'>Desig Template Blogger</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1GgOaqvI/AAAAAAAAAWU/9Gy6ImALKXk/gallery.png' width='40'/><h2>Gallery Blogger</h2><p><a href='#'>View and Download Template</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh6.googleusercontent.com/_HR8egC6j8tg/TaO1MROxsBI/AAAAAAAAAWY/d6UthoqsB0I/help.png' width='40'/><h2>Blogger Help</h2><p><a href='#'>Can Help Blog Problem</a></p></li>
<li><img alt='Thumb' border='0' height='40' src='https://lh4.googleusercontent.com/_HR8egC6j8tg/TaO1T5uh_VI/AAAAAAAAAWc/SrFLXC-dwPM/safety.png' width='40'/><h2>Blogger Safety</h2><p><a href='#'>Safety Blogger Template</a></p></li>
</ul>
<div class='small'><a href="http://super-bee.blogspot.com/"> Panduan dan Cara Membuat Blog</a></div>
</div>
</li>
<li>
<a href='#'>Tutorials</a>
<div class='tutorials'>
<ul class='left'>
<li><a href='#'>Javascript</a></li>
<li><a href='#'>Python</a></li>
<li><a href='#'>PHP</a></li>
</ul>
<ul class='right'>
<li><a href='#'>HTML/CSS</a></li>
<li><a href='#'>ASP.NET</a></li>
<li><a href='#'>Actionscript</a></li>
</ul>
<div class='small'>View <a href='#'>all categories</a> or a <a href='#'>list of the best tutorials</a>.</div>
</div>
</li>
<li>
<a href='#'>Links</a>
<ul>
<li><a href='#'>Programming</a></li>
<li><a href='#'>Inspiration</a></li>
<li><a href='#'>My websites</a></li>
<li><a href='#'>Clients</a></li>
<li><a href='#'>Cool stuff</a></li>
<li><a href='#'>Sitebase</a></li>
<li><a href='#'>Other</a></li>
</ul>
</li>
</ul>
</div>


10. >> Ganti tanda # dengan url blog kamu
       >> Dan juga ganti kata-katanya sesuai versi kamu

11. Kalau sudah, klik PRATINJAU dulu, jika ada kesalahan
12. Kalau kamu merasa sudah pasti, SAVE TEMPLATE, dan lihat blog kamu sekarang.

Tidak ada komentar:

Posting Komentar

Silahkan beri tanggapan tentang postingan di atas, sertakan bahasa yang sopan..!!!