Menu Horisontal super keren

: 21.20 2 comments

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 :
  3. /*------ 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{
  4. Lalu save template
  5. 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
  6. <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>
  7. 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

photo-avatar
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

2 komentar

Staff Administrator delete 8 Juli 2012 pukul 08.52

mantaap sob... :)

Unknown delete 8 Juli 2012 pukul 21.38

@budi os 19 makasih sob coment dan hadir nya

Posting Komentar


Terima Kasih Sobat Sudah:
1. Berkomentar Dengan Sopan
2. Tidak Memasukkan Link Aktif Dalam Form Komentar
3. Berkomentar Sesuai Artikel/Postingan
4. Berilah Informasi Kepada Admin Jika ada script yang Sudah tidak berfungsi
5. komentar Jorok/kasar /berbau Sara/Porno /saya anggap sebagai SPAM
6.untuk memasukkan gambar gunakan <i rel="image">URL Gambar</i>