Cara Membuat Navigasi Menu Top Atas di Blog , Selain Navigasi berfungsi untuk memudahkan pengunjung berelancar di Blog kita juga tentunya agar tampilan Blog semakin cantik
Dibawah ini dua menu yang bisa dipasang untuk di Blog kita ,seperti apa ? Sebagai berikut :
Navigasi Menu Pertama :
1.Login ke Blog kemudian edit html
2. Kemudian Copy kode dibawah ini dan diletakan diatas kode ]]></b:skin>
/* ichaTopnav */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #04e8f4;
text-align: center;
padding: 40px 60px;
text-decoration: none;
transition: 0.3s;
font-size: 40px;
}
ul.topnav li a:hover {background-color: #fff;}
ul.topnav li.icon {display: none;}
@media screen and(max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and(max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #000000;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #04e8f4;
text-align: center;
padding: 40px 60px;
text-decoration: none;
transition: 0.3s;
font-size: 40px;
}
ul.topnav li a:hover {background-color: #fff;}
ul.topnav li.icon {display: none;}
@media screen and(max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
@media screen and(max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
3.Selanjutnya Copy kode dibawah ini dan diletakan dibawah <body>
<!-- icha navigasi menu top -->
<ul class='topnav' id='ichaTopnav'>
<li><a href='#'>Home</a></li>
<li><a href='#'>1</a></li>
<li><a href='#'>2</a></li>
<li><a href='#'>3</a></li>
<li><a href='#'>4</a></li>
<li class='icon'>
<a href='javascript:void(0);' onclick='myFunction()'/>
</li>
</ul>
<!-- icha navigasi menu top selesai -->
Keterangan :
Ganti Tanda # dengan Link yang akan dibuat untuk Menu Navigasi kamu
Ganti Tulisan Menu sesuai dengan yang di inginkan
4.Selanjutnya Copy kode Script Fungsi dibawah ini dan diletakan diatas </head>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
5.etelah itu save / simpan template dan lihat hasilnya
Membuat Navigasi Menu Kedua :
1.Login ke Blog kemudian edit html template
2.Selanjutnya Copy kode dibawah ini dan diletakan diatas ]]></b:skin>
/*Top Menu*/
#top-menu{margin:auto;padding: 0;width: 950px;background:#fff;border-bottom:1px solid #ddd;}
#top-menu-wrap{margin:auto;padding: 0;width: 950px;background:#fff;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#02f242;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#000;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}
#top-menu{margin:auto;padding: 0;width: 950px;background:#fff;border-bottom:1px solid #ddd;}
#top-menu-wrap{margin:auto;padding: 0;width: 950px;background:#fff;}
#navwrap {margin: 0px auto; width:560px; float:left;background:#02f242;}
.topnav ul {list-style:none;margin:0;padding:0px; float:left;}
.topnav li {float:left;margin:0;text-align:center;}
.topnav li a {font-family: arial; font-weight:bold; font-size:10px;display:block;padding:10px 10px;color:#000;text-decoration:none; text-transform:uppercase;}
.topnav li a {background:none; }
.topnav li a:hover, li a:focus, li a:active {text-decoration:none; background:#ffffff; color:#000000;}}
#navbar-iframe {display: none !important;}
3.Kemudian Copy kode di bawah ini dan diletakan dibawah kode <body>
<div id='top-menu'>
<div id='top-menu-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu 1</a></li>
<li><a href='#' title='Menu'>Menu 2</a></li>
<li><a href='#' title='Menu'>Menu 3</a></li>
<li><a href='#' title='Menu'>Menu 4</a></li>
<li><a href='#' title='Menu'>Menu 5</a></li>
<li><a href='#' title='Menu'>Menu 6</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
<div id='top-menu-wrap'>
<div class='topnav'>
<ul id='topnav'>
<li><a href='#' title='Menu'>Menu</a></li>
<li><a href='#' title='Menu'>Menu 1</a></li>
<li><a href='#' title='Menu'>Menu 2</a></li>
<li><a href='#' title='Menu'>Menu 3</a></li>
<li><a href='#' title='Menu'>Menu 4</a></li>
<li><a href='#' title='Menu'>Menu 5</a></li>
<li><a href='#' title='Menu'>Menu 6</a></li>
</ul>
</div>
</div>
<div style='clear: both;'/>
</div>
Keterangan :
Ganti Tanda # dengan Url Link Menu Yang akan dibuat Navigasi kamu
Ganti Tulisan Menu sesuai dengan yang di inginkan
Ganti Kode Warna, Background , Teks dan lain nya sesuai dengan selera
4.Setelah itu Save / Simpan template dan lihat hasilnya
Begitulah cara membuat navigasi menu top atas di Blog "bermanfaat"
Cara Membuat Navigasi Menu Top ATas di Blog
