Disini Saya Akan Kasih Tutorial
Cara Membuat Topnav Responsive Keren Oke Langsung Saja Ke tahap Pemasangan :
1.Login Ke Akun Blogspot Kalian
2.Jika Sudah Masuk Pergi Ke Template/
"EDIT HTML" Cari kode
<b/:skin> Jika Sudah Ketemu
Pasang Kode CSS dibawah ini Tepat Di Atas
</b:skin>.
body {margin:0;}
.topnav {
overflow: hidden;
background-color: #f1f1f1;
}
.topnav a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 0px 16px;
text-decoration: none;
font-size: 17px;
border: 10px solid transparent;
border-image: url(http://www.clker.com/cliparts/X/a/T/U/H/P/black-swirl-border-md.png) 100 stretch;
}
.topnav a:hover {
background-color: #ddd;
color: black;
border: 10px solid transparent;
border-image: url(http://www.clker.com/cliparts/X/a/T/U/H/P/black-swirl-border-md.png) 10 stretch;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
display: block;
}
.topnav a{border:none;padding:10px 16px;}
.topnav a:hover{border:none;padding:10px 16px;}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: relative;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}
Jika sudah masukkan Kode Html Dibawah ini Di tempat yang kalian inginkan
<div class="topnav" id="myTopnav">
<a href="https://www.blogger.com/blogger.g?blogID=303824323595002183#home">Home</a>
<a href="https://www.blogger.com/blogger.g?blogID=303824323595002183#news">News</a>
<a href="https://www.blogger.com/blogger.g?blogID=303824323595002183#contact">Contact</a>
<a href="https://www.blogger.com/blogger.g?blogID=303824323595002183#about">About</a>
<a class="icon" href="javascript:void(0);" onclick="myFunction()" style="font-size: 15px;">☰</a>
</div>
<script type="text/javascript">
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
Nanti Hasilnya Seperti Di bawah Ini
Nah Itu Dia
Cara Membuat Topnav Responsive Keren , "Selamat Mencoba" Jika Ada Pertanyaan Silahkan Komentar di bawah