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 g-bloog.com . 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/fjrklikerz">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.