Cara membuat blok menu dengan efek bayangan menggunakan CSS3

Menu CSS yang satu ini memanfaatkan kemampuan CSS3 untuk menetapkan beberapa efek bayangan / sisipan bayangan (sehingga timbul efek bayangan di dalamnya) pada elemen item menu ini. Menu dibuat dengan tepi yang dikikir miring dan timbul pancaran sinar ketika mouse diarahkan ke menu tersebut. 

View Demo

KODE CSS 

.shadowblockmenu{ font-weight: bold; font-size: 85%; width: 100%; } .shadowblockmenu ul{ border: 1px solid #BBB; border-width: 1px 0; /* Show only top and bottom border for main menu container */ padding: 0; margin: 0; overflow: hidden; } .shadowblockmenu ul li{ display: inline; margin:0; padding:0; } .shadowblockmenu ul li a{ display:block; float:left; text-transform: uppercase; color: #494949; padding: 8px 15px 8px 9px; margin: 0; text-decoration: none; border-right: 1px solid #BBB; /*right border between menu items*/ -moz-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); /* Add inset shadow to each menu item. First 3 values in (114,114,114, 0.4) specifies rgb values, last specifies opacity */ -webkit-box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); box-shadow: inset -7px 0 10px rgba(114,114,114, 0.4); text-shadow: 0 -1px 1px #cfcfcf; /* CSS text shadow to give text some depth */ -moz-transition: all 0.2s ease-in-out; /* Enable CSS transition between property changes */ -webkit-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .shadowblockmenu li:nth-of-type(1) a{ /* Extra style for first menu link */ border-left: 1px solid #BBB; /* add border to left side of first menu link */ padding-left:25px; background: url(media/onebit_home.png) 1px center no-repeat; /* Add icon */ } .shadowblockmenu li:nth-of-type(2) a{ /* Extra style for 2nd menu link */ padding-left:25px; background: url(media/onebit_bulb.png) 1px center no-repeat; /* Add icon */ } .shadowblockmenu ul li a:hover{ color: black; -moz-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); /* Add 2 inset shadows to each menu item */ -webkit-box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); box-shadow: inset -7px 0 10px rgba(60,162,221, 0.4), inset 0 0 12px rgba(60,162,221, 0.6); }

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih -> Template ->Backup template terlebih dahulu-> Edit HTML

• Cari tag/kode ]]></b:skin> tekan CTRL+F untuk memudahkan pencarian
• Berikutnya Pastekan kode CSS tepat diatas tag  ]]></b:skin> 
• Simpan template... 

 KODE HTML 

• Masuk lagi ke Blogger ->Tata Letak-> Tambahkan Gadget -> HTML/Javascript  
• Pastekan kode berikut di bawah ini didalamnya

<div class="shadowblockmenu">
<ul>
<li><a href="http://jalu-pangna.blogspot.com/">Home</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan trik blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">JQuery Javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">gadget</a></li>
</ul>
</div> 

CATATAN: 

• Silahkan Ganti link yang berwarna  dengan URL/Link anda

 HAPPY BLOGGING..!

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 12.54