Wednesday, 13 November 2013
Demo
Jika sobat tertarik melihat demonya, langsung saja yuk ikuti caranya!!
- Login Blogger
- Sebelum mencoba tutorial ini direkomendasikan untuk backup templatenya dahulu
- Masuk ke Dashboard > Template > Edit Html
- Cari kode
]]></b:skin>agar lebih mudah pencarian klik Ctrl + F - Jika sudah ketemu masukkan kode dibawah ini tepat dibawah
]]></b:skin>
#navix{margin:0;background:#000;
background:-webkit-linear-gradient(top,#000,#333333);
}
ul#menu{
margin:0;
padding:10px;
}
ul#menu li{
margin:0;
display:inline-block;
position:relative;
}
ul#menu li a:link, ul#menu li a:visited{
color:rgb(255,255,255);
display:block;
padding: 10px 15px 10px 15px;
text-decoration:none;
}
ul#menu li a:hover{
background:#00aaff;
border-radius:8px;
}
ul#menu li ul.submenu li:first-child a:after{
border-left:10px solid transparent;
border-right:10px solid transparent;
border-bottom:10px solid #666666;
content:";
position:absolute;
top:-15px;
left:10px;
z-index:9;
}
ul#menu li ul.submenu{
background:-webkit-linear-gradient(top,#666666,#333333);
border-radius:10px;
box-shadow:0 5px 10px 1px rgba(0,0,0,0,5);
margin:10px;
padding:5px;
position:absolute;
visibility:hidden;
top:40px;
opacity:0;
-webkit-transition:all 0.3s ease-in-out;
}
ul#menu li ul.submenu li{
margin:0;
display:block;
}
ul#menu li:hover ul.submenu{
margin:0;
opacity:1;
visibility:visible;
}
#nav, #nav ul {
list-style: none outside none;
margin: 0;
padding: 0;
}
#nav ul {
background-color: #222222;
border-color: #222222;
border-radius: 0 5px 5px 5px;
border-style: solid;
border-width: 0 1px 1px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.5);
left: 0;
max-height: 0;
overflow: hidden;
position: absolute;
top: 52px;
transform-origin: 0 0 0;
transition: all 100ms ease 0s;
-webkit-transition: all 100ms ease 0s;
-moz-transition: all 100ms ease 0s;
-o-transition: all 100ms ease 0s;
width: 180px;
z-index: 60;
}
- Kemudian sobat cari
</head> - Jika sudah ketemu sobat letakkan kode dibawah ini tepat dibawah
</head>
<div id="navix">
<ul id="menu">
<li><a href="http://www.g-bloog.com/">Home</a></li>
<li><a href="#">Anime</a></li>
<li><a href="#">Cartoon</a></li>
<li><a href="#">Game</a></li>
<li><a href="#">Sport</a></li>
<li><a href="#">Lainnya</a></li>
<li><a href="https://www.facebook.com/renderloverz">Like My Fans Page</a></li>
<li><a href="#">About</a>
<ul class="submenu">
<li><a href="#">Profil</a></li>
<li><a href="#">Portofolio</a></li>
</ul>
</ul>
</div>
- Tadaaa... Sudah selesai, Sekarang sobat lihat hasilnya, jika sobat ragu-ragu sobat klik pratinjau dulu jika sudah pas sobat simpan :)
Sekian artikel hari ini yang dapat saya sampaikan semoga artikel ini bermanfaat bagi sobat XD
4 comments
keren gan menu navigasi nya , BTW ada sub menu nya kagak ? o.O
ada kok coba sobat arahkan kursor ke menu bernama " About" nah pasti ada sub menunya ada, tp kalo dilihat htmlnya udah ketahuan kok sob terlihat dari "submenu" :)
Tidak dapat memuat pratinjau template: Kesalahan saat mengurai XML, baris 1087, kolom 3: The element type "li" must be terminated by the matching end-tag "".
itu kesalahan pada penutup kode < / div > gan..
Gunakanlah bahasa yang sopan
Tidak mengandung SARA (Agama, Suku, Dll)
Tidak menyertakan link aktif.
Jika melanggar syarat diatas komentar akan saya anggap SPAM
Konvert KodeMember AktifJoin This Blog