nah ketemu lagi sahabat blogger
gimana kabarnya sehat-sehat aja kan sobat ..hehehe pastinya dung
langsung saja ya sobat blogger yang setia ni gue punya postingan yang baru yaitu CARA MEMBUAT MENU YANG PALING KEREN
ya gak usah basa basi ya sobat ni ikutin cara nya di bawah ini
kalau anda yang tertarik langsung saja kita mulai ke cara pembuatan nya
- pertama login ke blog dan masuk ke Edit HTML
- setelah itu cari code ]]></b:skin> dan copy code di bawah ini pas di atas code ]]></b:skin>
.container {
height: 571px;
margin: 30px auto;
width: 957px;
}
#nav,#nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav {
background: url(http://bit.ly/14Chqrv) no-repeat scroll 0 0 transparent;
clear: both;
font-size: 12px;
height: 58px;
padding: 0 0 0 9px;
position: relative;
width: 957px;
}
#nav ul {
background-color: #222;
border:1px solid #222;
border-radius: 0 5px 5px 5px;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: -9999px;
overflow: hidden;
position: absolute;
top: -9999px;
z-index: 2;
transform: scaleY(0);
}
#nav li {
background: url('http://bit.ly/178rdD6') no-repeat scroll right 5px transparent;
float: left;
position: relative;
}
#nav li a {
color: #FFFFFF;
display: block;
float: left;
font-weight: normal;
height: 30px;
padding: 23px 20px 0;
position: relative;
text-decoration: none;
text-shadow: 1px 1px 1px #000000;
}
#nav li:hover > a {
color: #00B4FF;
}
#nav li:hover, #nav a:focus, #nav a:hover, #nav a:active {
background: none repeat scroll 0 0 #121212;
outline: 0 none;
}
#nav li:hover ul.subs {
left: 0;
top: 53px;
width: 180px;
transform: scaleY(1);
}
#nav ul li {
background: none;
width: 100%;
}
#nav ul li a {
float: none;
}
#nav ul li:hover > a {
background-color: #121212;
color: #00B4FF;
}
#lavalamp {
background: url('http://bit.ly/17LIFi4') no-repeat scroll 0 0 transparent;
height: 16px;
left: 13px;
position: absolute;
top: 0px;
width: 64px;
transition: all 300ms ease;
}
#lavalamp:hover {
transition-duration: 3000s;
}
#nav li:nth-of-type(1):hover ~ #lavalamp {
left: 13px;
}
#nav li:nth-of-type(2):hover ~ #lavalamp {
left: 90px;
}
#nav li:nth-of-type(3):hover ~ #lavalamp {
left: 172px;
}
#nav li:nth-of-type(4):hover ~ #lavalamp {
left: 253px;
}
#nav li:nth-of-type(5):hover ~ #lavalamp {
left: 334px;
}
#nav li:nth-of-type(6):hover ~ #lavalamp {
left: 415px;
}
#nav li:nth-of-type(7):hover ~ #lavalamp {
left: 495px;
}
#nav li:nth-of-type(8):hover ~ #lavalamp {
left: 570px;
}
keterangan pada script #nav li:nth-of-type(1):hover ~ #lavalamp {
left :13px; } sampai yang #nav li:nth-of-type(8):hover di ganti agar
gambar yang mengikuti images sesuai dengan letak menu nyaok setelah itu cari code </head> atau langsung saja save
template, dan paste code html di bawah ini di gedget javascript/HTML
/kontes%20blog'>Kontes Blog</a></li>
</ul>
</li>
<li><a href='#'>ETC</a>
<ul class='subs'>
<li><a
href='http://yudhacomunity.blogspot.com/2012/02/link-blog-sahabat.html'>Link
Exchange</a></li>
<li><a
href='http://yudhacomunity.blogspot.com/2012/07/daftar-sebagai-penulis-blog-ini_25.html'
title='Masukkan Artikel mu dan jadikan blog ini sebagai SosBok'>Be
Writer</a></li>
<li><a
href='http://yudhacomunity.blogspot.com/2011/08/cara-update-status-via-terserah-kita.html'>Update
Status Via</a> </li>
</ul>
</li>
<div id='lavalamp'/>
</ul>
</div>
rubah la Link URL dan Nama Menu nya sesuai dengan yang kalian inginkan,
jika ingin buat di bawah code </head> boleh, yang mau buat di
gedget javascript/HTML juga boleh
nah itu tadi sobat cara membuat menu yang paling keren trapi masih banyak kok yang lebih keren lainnya lagi
semoga bermanfaat ya sobatt
Anda telah membaca artikel tentang Cara Membuat Menu yang Super Keren di blogspot dan anda juga bisa menemukan artikel Cara Membuat Menu yang Super Keren di blogspot ini dengan url http://hbiepwidjaia.blogspot.com/2013/06/cara-membuat-menu-yang-super-keren-di.html.Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Menu yang Super Keren di blogspot ini jika memang bermanfaat bagi Anda, namun dengan catatan jangan lupa untuk mencantumkan link sumbernya.
