Cara Membuat Menu Navigasi Keren Versi Go! Blog

Halo sobat, saya kembali lagi untuk memposting artikel nih, hehehe. Kali ini tentang tutorial blogger yaitu membuat Navigasi versi dari saya yang saya buat dengan ketik tangan, bukannya sombong yah lagian saya ambil kode cssnya dari buku CSS3 saya heheh. Singkat waktu bagi sobat yang ingin mencobanya yuk langsung saja liat caranya!!

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.klikzfajri.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

Title : Cara Membuat Menu Navigasi Keren Versi Go! Blog
Description : Halo sobat, saya kembali lagi untuk memposting artikel nih, hehehe. Kali ini tentang tutorial blogger yaitu membuat Navigasi versi dari sa...

Postingan Populer

Cara Membuat Menu Navigasi Keren Versi Go! Blog