Cara Buat Menu Navigasi Seperti WahyuariefT-Blog

Assalamu'alaikum wr.wb. sekian lama saya gk posting cuma update doang.. kesempatan kali ini Wahyu akan Share tentang Triks and Tips dengan judul Cara Buat Menu Navigasi Seperti WahyuariefT-Blog.Kalian Pasti Sudah Tau Menu Navigation itu seperti apa,, demonya ada Dibawah Header/Judul Blog. Lihat ScreenShot dibawah ini

Langsung saja ke Tahap Pertama...
1. Login Blogger
2. Pilih Template lalu pilih Edit HTML
3. Cari kode ]]></b:skin>
4. Letakan Kode Berikut Tepat di Atas Kode ]]></b:skin>

#wahyu_nav{-o-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-webkit-transition: all 0.5s ease;box-shadow:-2px -2px 8px #fFF, 2px 2px 20px #fFF;-moz-box-shadow:-2px -2px 8px #fFF, 2px 2px 20px #fFF;-webkit-box-shadow:-2px -2px 8px #fFF, 2px 2px 20px #fFF;-moz-border-radius:10px;-webkit-border-radius: 10px;-khtml-border-radius: 10px;border-radius: 10px;}#nav {background:#000;height:35px;}#nav-left{float:left;display:inline;width:750px;}#nav-right{float:right;display:inline;width:131px;padding:7px 15px 0px 0px;}#nav ul{position:relative;overflow:hidden;padding:0px 0px 0px 5px;margin:0;text-transform: uppercase;font-size:11px;font-weight:bold;}#nav ul li {float:left;list-style:none}#nav ul li a, #nav ul li a:visited {display:block;color:#ffffff;margin:4px 4px;padding:7px 7px 7px 7px;text-decoration:none;}#nav ul li a:hover {text-shadow:1px 1px 4px #fff;color: #000;display:block;margin:4px 4px;padding:7px 7px 7px 7px;-webkit-transition:all .2s ease-out;-moz-transition:all .2s ease-out;}#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{background-color:#fff;color:#ffffff;margin:4px 4px;padding:7px 7px 7px 7px;} 

5. Cari Kode <div id='content-wrapper'>
6. Letakan Kode Berikut Tepat Di Bawah Kode <div id='content-wrapper'>

<div id='nav'>
<div id='nav-left'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'><img alt='Home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjeaantL5GwWB2cuPOB31e_R1T3lixqozqokkZIPu-BK0d0cLl06Aw_2ISiL1sv3A-pWEVVhcLEVFgNsiUL3z4nHGEsK6blFSZ2MSZu5dH8PPJykdceeS0QwoKzMmgFtRP-nSDznMOO7oBQ/s1600/icon-home.png' title='Home'/></a></li>
<li id='wahyu_nav'><a href='#' target='_blank' title='menu1'>menu1</a></li>
<li><a href='#' target='_blank' title='menu2'>menu2</a></li>
<li id='wahyu_nav'><a href='#' target='_blank' title='menu3'>menu3</a></li>
<li><a href='#' target='_blank' title='menu4'>menu4</a></li>
<li id='wahyu_nav'><a href='#' target='_blank' title='menu5'>menu5</a></li>
<li><a href='#' target='_blank' title='menu6'>menu6</a></li>
<li id='wahyu_nav'><a href='#' target='_blank' title='menu7'>menu7</a></li>
</ul></div><div id='nav-right'><g:plusone/></div></div>

7. Cari Kode </head> kalo sudah ketemu tambahkan kode berikut tepat diatas kode </head>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'/>

Catatan: kode yang di beri tanda Huruf berwarna putih itu adalah menu yang diberi box-shadow.
Ya,, Semoga Artikel Ini Bermanfaat,, Terima Kasih..
Wassalamualaikum wr.wb.