Cara membuat kotak menu dengan effec gelap terang

Hayooooooooo dah tidur yach..pastinya dong kan dah jam 1.00 wib he he he habisnya belum ngantuk sich nah dari pada nganggur mending kita bikin tutorial .....hmm apa yach ouh gimana kalau kita bikin kotak menu yang kita beri effec terang gelap sekaligus dengan effec hover shadow yang bisa berubah dari warna aslinya....kalau bingung coba liat contoh demonya disini  nampak suram kan nah apa bila di dekati cursor maka akan nampak lebih terang sekaligus effec shadow nya akan nampak gimana masih ingin tahu cara membuat nya :

• Login ke blogger
• masuk kerancangan
• Pilih Edit HTML  ==>jangan lupa download lengkap dulu template menjaga kalau ada kesalahan
• Cari kode ]]></b:skin> lalu letakkan kode di bawah ini tepat di atas kode ]]></b:skin> berikut kode nya

---

/*box menu terang gelap*/ .mybox{         position:relative;         display:block;width:200px; overflow:auto;  max-height:400px;         background:#fff url(http://us.123rf.com/400wm/400/400/teddy2007b/teddy2007b0903/teddy2007b090300008/4539531-cup-and-bouquet-of-flowers-decorative-floral-background-for-banner-vector.jpg) no-repeat top left;         color:#8A0808;         overflow:auto;         padding:20px 15px;         margin:20px 5px;         border:2px solid #01DF01;                border-radius:6px;         opacity:0.2;         filter:alpha(opacity=20);         transition:4s;         -o-transition:4s;         -moz-transition:4s;         -webkit-transition:4s; } .mybox:hover{         opacity:1.0;         filter:alpha(opacity=100);border:1px solid #3B240B; -webkit-box-shadow: 1px 1px 10px 5px #FF8000; -moz-box-shadow: 1px 1px 10px 5px #FF8000; box-shadow: 1px 1px 10px 5px #FF8000; } /*box menu terang gelap and*/

---

• Lalu Save template
Selanjutnya untuk kode pasang kode HTML  nya  masuk ke rancangan==>Tambah gadget==>Pilih Html  javascript lalu masuk kan kode di bawah ini ke dalam nya

---

<div class="mybox">
<style>
.list {
background:none; no-repeat left center;
border-bottom:1px dotted #ccc;
line-height:1.2em;
padding:2px 2px 2px 20px;

}
</style>
<div style="overflow:auto; padding:2px; margin:1px 1px 1px 1px; width:auto; height:auto; background:-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#ffffff)); border:1px solid #ccc;-moz-border-radius: 10px 10px 10px 10px; -webkit-border-radius: 10px 10px 10px 10px;">
<ul><table width="100%" border="0">
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/deleket/sleek-xp-basic/32/Home-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://karinafotocollection.blogspot.com">Home</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0-Wmqw7v_2AB0IF9g7d3u6m1b5KiFz6L8h4h8IIRUCdPx4yj2WBn99-hMa6Sa5Y-mUJ1BNeGhvjfWeFqIEsY-SJcTz33jMHL6SqP_AEvvng-eP1h8vFA2FZpJxTD5vDG-bmwkeTmziugL/s1600/report_magnify.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="http://karinafotocollection.blogspot.com/2012/01/var-acctoctrue_09.html">Daftar Isi</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/phuzion/32/Misc-Misc-Box-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="#">Kumpulan Icon</a></li></td>
</tr>
<tr>
<td width="3%"><div align="center"><img src="http://icons.iconarchive.com/icons/kyo-tux/soft/32/Tutorial-icon.png" width="18" height="18" /></div></td>
<td width="97%"><li><a href="#">Tutorial Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/emey87/social-button/32/blog-icon.png" width="18" height="18" /></div></td>
<td><li><a href="#">Tips Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/itzikgur/my-seven/32/Graphics-Painting-icon.png" width="18" height="18" /></div></td>
<td><li><a href="#">Download Template Blog</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/brilliant-graphics/32/colors-icon.png" width="18" height="18" /></div></td>
<td><li><a href="http://karinafotocollection.blogspot.com/2011/06/kode-warna.html">Kode Warna</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/32/Actions-insert-link-icon.png" width="18" height="18" /></div></td>
<td><li><a href="#">Link Sahabat</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsdcSVTP_O4jxQUOvTpPWeXxW8KLs6eBnXLBNOz8KrhqCbtkd8nz2vwfQeSPA3_WfkUEd9WQtTvBYCkOFGBtZzhPr1JJTPx2zq7Gmr3KShrBsUyFOZBraPaYBZAx4_VKFM72rghq3yAogM/" width="18" height="18" /></div></td>
<td><li><a href="#">Facebook</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkOT3xO-UqJ71XCT6qZqxVODDprkdzWy7blunvHnhu11rQcGdVzLPFPKIWIydLxd1sxdQSAluB_mO_dwnzoL3yBSrYsItfHLHJoK9RT1Ga4KkWGGLFLMChv4T1FJjBNrl1xrX7oWsgYObV/" width="18" height="18" /></div></td>
<td><li><a href="#">Twitter</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW5ty28bKBfB4VOibcmbOPklAHG8TogzGySm7iPEzvuUqxPfi4SM25ddkbEorOZGnlZ01w8_BrHsyICGhD9_TOttJoI3oaWaBwGBzUKkft6gRSZoPuRlRSBL5U-GEFIDR8iB-FVbbeldAO/s1600/feed_burner.png" width="18" height="18" /></div></td>
<td><li><a href="#">Feedburner</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/iconshock/real-vista-web-design/32/Banner-design-icon.png" width="18" height="18" /></div></td>
<td><li><a href="#">Advertise</a></li></td>
</tr>
<tr>
<td><div align="center"><img src="http://icons.iconarchive.com/icons/fatcow/farm-fresh/32/book-addresses-icon.png" width="18" height="18" /></div></td>
<td><li><a href="#">Contact Us</a></li></td>
</tr>
</table>
</ul>
</div></div>

---

Penting di perhatikan :untuk teks yang berwarna merah ganti dengan url ..shobat sendiri
                                 untuk kode # ganti dengan link tujuan shobat
                                  untuk teks yang berwarna hijau adalah judul menu 
oke selamat mencoba ....
                                                                                            [special thanks to : gubhugreyot]

Judul Artikel :Cara membuat kotak menu dengan effec gelap terang

Terima Kasih Sobat sudah membaca Artikel saya Tentang Cara membuat kotak menu dengan effec gelap terang Silahkan tinggalkan jejak lewat form komentar untuk mempermudah Admin berkunjung balik ke blog sobat. Mau share ulang Article saya ini..? silahkan ..!! tentunya dengan Judul dan narasi yang berbeda dan jangan lupa untuk mencantumkan link sumber..Terima Kasih