Warning! Demo mungkin sudah tidak sesuai dengan konten karena beberapa perubahan dari site kami.
Trik ini berhasil saya terapkan kepada beberapa template terbaru blogger dan bekerja dengan baik, diantaranya: SOHO, EMPORIO, CONTEMPO dan template blogger TERKEMUKA.
 |
| Halaman editor tempat editblogtema bereksprimen |
Intinya jika sobat ingin tampilan beda pada template bawaan dan menjadi lebih SEO, sobat dapat menerapkan ini. Perhatikan Demo pembuatannya dengan mengikuti link dibawah ini jika sudah masuk jangan lupa klik terlebih dahulu Run :
Lihat DEMO
Kelebihan menu navigasi hasil buatan kami adalah:
- Pastinya responsive
- Struktur dasar ringan
- Dapat diterapkan pada template template bawaan blogger dengan mudah
- Tombol pencariannya adalah layar penuh.
Lihat DEMO
Baiklah karena kami ingin sobat menerapkannya maka kami jelaskan bagaimana detail pembuatannya:
- Pilih salah satu tema blogger: SOHO, CONTEMPO, EMPORIO atau TERKEMUKA.
- Masuk kepengaturan blogger
- Pilih tema
- Pilih edit HTML
Pada halaman HTML sobat hanya perlu mengenali tag tag kode berikut: </head>, </header> dan </body> dan lalu perhatikan baik baik kelompok kode kode yang saya letakan dibawah ini:
1. TAMBAHKAN CSS
Letakan kode dibawah ini diatas kode </head>:
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
padding: 15px 15px;
font-size: 20px;
cursor: pointer;
}
.openBtn:hover {
background: #fff;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(100, 149, 237);
background-color: rgb(100, 149, 237);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 20px;
left: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: none;
float: right;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: right;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
</style>
<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #6495ED;
}
.topnav a {
float: right;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #6495ED;
color: white;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #555;
color: white;
}
.dropdown-content a:hover {
background-color: #ddd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@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;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
2. TAMBAHKAN HTML
Letakan kode dibawah ini diatas kode </header>:
<div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>×</span>
<div class='overlay-content'>
<form action='/action_page.php'>
<input name='search' placeholder='Search..' type='text'/>
<button type='submit'><i class='fa fa-search'/></button>
</form>
</div>
</div>
<div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>×</span>
<div class='overlay-content'>
<form action='/action_page.php'>
<input name='search' placeholder='Search..' type='text'/>
<button type='submit'><i class='fa fa-search'/></button>
</form>
</div>
</div>
<div class='topnav' id='myTopnav'>
 <a class='active' href='#home'>Beranda</a>
 <a href='#news'>Berita</a>
 <a href='#contact'>Hubungi</a>
<div class='dropdown'>
<button class='dropbtn'>Menu
<i class='fa fa-caret-down'/>
</button>
<div class='dropdown-content'>
     <a href='#'>Adelina</a>
     <a href='#'>Anissa</a>
     <a href='#'>Papa</a>
<a href='#'>Lain lain</a>
</div>
</div>
 <a href='#about'>Tentang kami</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'>☰</a>
<button class='openBtn' onclick='openSearch()'>
<left><i class='fas fa-search fa-1x'/></left></button>
</div>
3. TAMBAHKAN JAVASCRIPT
Tambahkan kode JS dibawah ini diatas </body>
<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>
<script>
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
4. SAVE template.
masih kesulitan menerapkannya? Mengapa sungkan berdiskusi dengan kami? Kami saja belajar tidak pernah malu. Namanya ilmu pengatahuan sekecil apapun jangan di sepelekan.
www.editblogtema.net
Keren nih kayaknya.
BalasHapus