Menu Horisontal super keren

N ah buat teman teman yang ingin pasang Menu horisontal super keren di template nya mungkin bisa coba pasang Menu berikut yang akan kang Mahfid share buat shobat blogger sekalian untuk melihat contoh  Menu Horisontal super keren langsung aja kita menuju ke blog demonya disini  dan untuk cara membuat nya ikuti tutorialnya seperti di bawah ini:

1. Login ke blogger.com
2. setelah masuk dasboard ==EDIT HTML == cari kode ]]></:skin> lalu masukkan css kode berikut ini tepat diatas kode ]]></:skin> berikut kode nya :

/*------ Menu Horisontal super keren-----*/ .boxsupermenu{         position:relative;         margin:15px 0 0 10px;         overflow:hidden;         margin:0;         float:left;         padding:0;         background:#1d1d1d url(https://widgetduniablogger-project.googlecode.com/files/header-background2.png); } ul#supermenu{         width:520px;/*untuk merubah lebar menu*/         margin:10px 0 20px;         padding:0;         margin:3px 4px 3px 4px;         clear:both;         float:left; } ul#supermenu li{         margin:0;         padding:0;         overflow:hidden;         float:left;         height:40px; } ul#supermenu li a.animasi{         padding:10px 10px;         font:10px Arial;         float:left;         color:white;         text-decoration:none;         text-transform:uppercase;         text-shadow:1px 1px 1px #000;         clear:both;         height:18px;         line-height:20px;         background:white url(https://widgetduniablogger-project.googlecode.com/files/menu-hover2.png)center  repeat;         text-align:center;         transition:all 0.7s ease-in-out;         -o-transition:all 0.7s ease-in-out;         -moz-transition:all 0.7s ease-in-out;         -webkit-transition:all 0.7s ease-in-out;         -ms-transition:all 0.7s ease-in-out;         font-weight:bold;         border:1px solid #999; }  ul#supermenu li a.animasi:hover{         transform:scale(1.0) rotate(0deg) translate(0, -40px);         -o-transform:scale(1.0) rotate(0deg) translate(0, -40px);         -moz-transform:scale(1.0) rotate(0deg) translate(0, -40px);         -webkit-transform:scale(1.0) rotate(0deg) translate(0, -40px);         -ms-transform:scale(1.0) rotate(0deg) translate(0, -40px); } ul#supermenu li a.animasi span{         padding:10px 9px;         color:transparent;         opacity:0.2;         filter:alpha(opacity=20);         border:2px solid transparent;         transition:all 0.7s ease-out;         -o-transition:all 0.7s ease-out;         -moz-transition:all 0.7s ease-out;         -webkit-transition:all 0.7s ease-out;         -ms-transition:all 1.0s ease-out;         transform:scale(9.0) rotate(0deg) translate(0,-10px);         -o-transform:scale(9.0) rotate(0deg) translate(0,-10px);         -moz-transform:scale(9.0) rotate(0deg) translate(0,-10px);         -webkit-transform:scale(9.0) rotate(0deg) translate(0,-10px);         -ms-transform:scale(9.0) rotate(0deg) translate(0,-10px); } ul#supermenu li a.animasi span:hover{         opacity:1.0;         filter:alpha(opacity=100);         padding:4px 9px;         height:18px;         transform:scale(1.0) rotate(0deg) translate(0,0);         -o-transform:scale(1.0) rotate(0deg) translate(0,0);         -moz-transform:scale(1.0) rotate(0deg) translate(0,0);         -webkit-transform:scale(1.0) rotate(0deg) translate(0,0);         -ms-transform:scale(1.0) rotate(0deg) translate(0,0);         color:#FF0;         border:1px solid brown;         background:orange;         text-shadow:1px 1px 1px #000;         box-shadow:1px 2px 15px #fff, 0px -1px 3px red, -2px -2px 2px red, -3px 3px 3px yellow;         border-radius:7px; } ul#supermenu li{         border:1px solid transparent;         background:#CC9933 url(https://lh4.googleusercontent.com/-Tk55wbQOL_s/T2XGvQfF2WI/AAAAAAAAAcY/1_THN4F2g7A/h120/gradOrangeBlackV45H2.gif); }  ul#supermenu li:hover{         background:#000 url(https://lh6.googleusercontent.com/-Rf9nVjhGRBo/T2XE4tDyeSI/AAAAAAAAAcI/80Id8S5lkdE/h120/bgTitik2AnimaV21H21.gif);         border:1px solid #777; } /*------ Menu Horisontal super keren and-----*/ .boxsupermenu{

3. Lalu save template
4. Untuk pemanggilan kode Htmlnya adalah sebagai berikut ,masih di dasboard masuk ke tata letak tambah gadget (pilih yang di bawah header) lalu pilih Html Java Script setelah itu masukkan kode berikut di lam nya

<div class="boxsupermenu"> <ul id="supermenu"> <li><a class="animasi" href="#">Tutorial BloGGeR<br /><br /><span>Tutorial BloGGeR</span></a></li> <li><a class="animasi" href="#">Home<br /><br /><span>Home</span></a></li> <li><a class="animasi" href="#">jQuery<br /><br /><span>jQuery</span></a></li> <li><a class="animasi" href="#">CSS3<br /><br /><span>CSS3</span></a></li>     <li><a class="animasi" href="#">Conten Dewasa<br /><br /><span>Conten Dewasa</span></a></li> </ul> </div>

5. Lalu Save

Untuk tanda # silahkan di isi dengan ling tujuan sobat sedangkan untuk teks yang berwarna biru adalah untuk menambah lebar menu silahkan sobat modiv sendiri selamat mencoba semoga berhasil

Judul Artikel :Menu Horisontal super keren

Terima Kasih Sobat sudah membaca Artikel saya Tentang Menu Horisontal super keren 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