Tutorial kali ini saya akan membahas tentang cara membuat menu drop down di blog dengan submenu bergambar. Judulnya kok sedikit aneh ya... tapi gak apa-apa yang penting anda mengerti maksud dari judul tersebut. Menu pada blogspot biasanya diletakkan diatas header atau dibawah header supaya pengunjung blog kita bisa lebih mudah dalam mencari artikel sesuai dengan kategorinya.
Langkah pertama langsung ke edit Template dan pilih Edit HTML lalu centang Expand Template Widget, biar aman backup dulu template sobat.
Kemudian copy seluruh text css dibawah ini tepat diatas kode ]]></b:skin> biar mudah mencarinya gunakan saja CTRL+F
/* Menu Drop Down By cinghedotcom */
/* Reset */
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}
/* Menu Start*/
.menutop{height: 35px;width: 980px;background: #4c4e5a;}
.menu li {position: relative;list-style: none;float: left;display: block;height: 35px;}
.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 18px;text-decoration: none;border-left: 1px solid #393942;border-right: 1px solid #4f5058;font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-size: 13px;color: #f3f3f3;text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
/* Sub Menu Start*/
.menu ul {position: absolute;top: 35px;left: 0;opacity: 0;background: #1f2024;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}
.menu li:hover > ul { opacity: 1; }
.menu ul li {height: 0;overflow: hidden;padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;}
.menu li:hover > ul li {height: 30px;overflow: visible;padding: 0;}
.menu ul li a {width: 100px;padding: 4px 0 4px 35px;margin: 0;border: none;border-bottom: 1px solid #353539;}
.menu ul li:last-child a { border: none; }
/* Icon */
.menu a.submenu1 { background: url(.../url gambar anda.png) no-repeat 5px center; }
.menu a.submenu2 { background: url(.../url gambar anda.png) no-repeat 5px center; }
/* Reset */
.menu,.menu ul,.menu li,.menu a {margin: 0;padding: 0;border: none;outline: none;}
/* Menu Start*/
.menutop{height: 35px;width: 980px;background: #4c4e5a;}
.menu li {position: relative;list-style: none;float: left;display: block;height: 35px;}
.menu li a {display: block;padding: 0 14px;margin: 6px 0;line-height: 18px;text-decoration: none;border-left: 1px solid #393942;border-right: 1px solid #4f5058;font-family: Helvetica, Arial, sans-serif;font-weight: bold;font-size: 13px;color: #f3f3f3;text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;}
.menu li:first-child a { border-left: none; }
.menu li:last-child a{ border-right: none; }
.menu li:hover > a { color: #8fde62; }
/* Sub Menu Start*/
.menu ul {position: absolute;top: 35px;left: 0;opacity: 0;background: #1f2024;
-webkit-border-radius: 0 0 2px 2px;
-moz-border-radius: 0 0 2px 2px;
border-radius: 0 0 2px 2px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;-o-transition: opacity .25s ease .1s;-ms-transition: opacity .25s ease .1s;transition: opacity .25s ease .1s;}
.menu li:hover > ul { opacity: 1; }
.menu ul li {height: 0;overflow: hidden;padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;}
.menu li:hover > ul li {height: 30px;overflow: visible;padding: 0;}
.menu ul li a {width: 100px;padding: 4px 0 4px 35px;margin: 0;border: none;border-bottom: 1px solid #353539;}
.menu ul li:last-child a { border: none; }
/* Icon */
.menu a.submenu1 { background: url(.../url gambar anda.png) no-repeat 5px center; }
.menu a.submenu2 { background: url(.../url gambar anda.png) no-repeat 5px center; }
Selanjutnya kita memasang kode navigasinya di blog dengan cara menambahkan text dibawah kode <body> blog kita :
<div class='menutop'>
<ul class='menu'>
<li><a class='home' href='#url blog anda'>Home</a></li>
<li><a href='#url blog anda'>Menu 1</a>
<ul>
<li><a class='submenu1' href='#url blog anda'>Nama sub menu 1</a></li>
<li><a class='submenu2' href='#url blog anda'>Nama sub menu 2</a></li>
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
<li><a href='#'>Menu 3</a></li>
</div>
Keterangan :
height dan width (warna merah) menunjukkan lebar dan panjang menu
.menu a.submenu1 (warna biru) merupakan gambar di submenu, anda bisa menggunakan gambar berukuran 24x24 piksel. untuk menambah submenu dengan gambar lain anda bisa menambahkan dibawahnya .menu a.submenu3 dan seterusnya.
Sedangkan yang berwarna orange adalah submenu dari menu navigasi yang akan muncul dalam blog sobat, tambahkan kode berikut untuk menambahkan submenu lagi.
<li><a class='submenu3' href='#url blog anda'>Nama sub menu 3</a></li>
Tapi harus diingat bahwa di atas ]]></b:skin> juga ditambahkan kode .menu a.submenu3
Selamat mencoba...
|
|
kudil
|
|
0 komentar:
Posting Komentar