- Menu pencarian dinamis dan responsive full screen
- Menu navigasi minimalis ringan dan portable
- Unlimited sub-menu dapat dengan mudah ditambahkan
- Keduanya dibuat fixed sebagai upaya kemudahan menavigasi halaman blog
Cara menerapkannya ke template bawaan blogspot terbaru (misalnya contempo) adalah:
1. Hapus gadget atau widget pencarian bawaan.
Contempo dan template terbaru lain pada umumnya memiliki gadget bawaan yang keren, namun karena kita ingin gadget kita sendiri ya kita akan merobahnya dengan cara menghapusnya. Sesungguhnya cara ini juga berlaku sangat baik terhadap template yang lebih lama.
- Masuk ke pengaturan blogger
- Pilih pengaturan
- Cari gadget atau widget pencarian (atau search top)
- Hapus widget tersebut.
Sekali lagi penghapusan widget pencarian ini adalah karena kita ingin merobah tampilan contempo dan membuatnya menjadi beda. Save template.
2. Tambahkan CSS
- Masuk ke pengaturan blogger
- Pilih tema atau theme
- Pilih Edit HTML sampai disini sobat akan dibawa ke halmaan editor HTML, cari kode </head> letakan kode berikut tepat diatasnya:
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/><style>body { font-family: Arial;}* { box-sizing: border-box;}.openBtn { background: transparent; border: none; padding: 10px 15px; font-size: 20px; cursor: pointer;position: fixed;z-index: 150;top: 28px;left:85%;}.openBtn:hover { background: #bbb;}.overlay { height: 100%; width: 100%; display: none; position: fixed;
z-index: 150; top: 0; left: 10; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9);}.overlay-content { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto;}.overlay .closebtn { position: absolute; top: 20px; right: 20%; font-size: 60px; cursor: pointer; color: white;}.overlay .closebtn:hover { color: #ccc;}.overlay input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white;}.overlay input[type=text]:hover { background: #f1f1f1;}.overlay button { float: left; width: 20%; padding: 15px; background: #ddd; font-size: 17px; border: none; cursor: pointer;}.overlay button:hover { background: #bbb;}</style><style>.dropbtn { background-color: transparent; Position:fixed; z-index:150; color: rgb(255, 0, 0); padding: 8px; font-size: 16px; border: none;border-radius:50px; cursor: pointer;top:29px;left:14px;}.dropbtn:hover, .dropbtn:focus { background-color: transparent; }.dropdown { position: fixed; display: inline-block;z-index:150;}.dropdown-content { display: none; position: fixed;z-index:100; background-color: #fff;border:none;border-radius:0; min-width: 290px; overflow: auto; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1;}
.dropdown-content a { color: black; padding: 12px 16px; text-decoration: none; display: block;}.dropdown a:hover {background-color: #ddd;}.show {display: block;}</style>
3. Tambahkan HTML
Cari kode </head> letakan kode berikut tepat dibawahnya - atau letakan saja di atas kode <body>:
<div class='dropdown'> <button class='dropbtn' onclick='myFunction()'>☰</button> <div class='dropdown-content' id='myDropdown'> <a href='#home'/> <a href='#home'><b>❌</b></a> <a href='#home'><b>🚄NAVIGASI MENU</b> :</a> <a href='/'>Beranda</a><a href='#'>Bahasa Program Web</a> <a href='#' id='editblogtema2'>Teknologi</a><a href='#' id='editblogtema3'>Cinta ＆ Paradox</a><a href='#' id='editblogtema4'>English Contents</a>
<a href='#'>TIPS ＆ TRIKS</a> <a href='#'>BLOGGING</a> </div></div> <div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>×</span> <div class='overlay-content'> <form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/> <button type='submit'><i class='fa fa-search'/></button> </form> </div> </div><button class='openBtn' onclick='openSearch()'><i class='fa fa-search'/></button>
4. Tambahkan JavaScript
Cari kode </body> lalu letakan kode berikut diatasnya:
<script>function openSearch() {document.getElementById("myOverlay").style.display = "block";}function closeSearch() {document.getElementById("myOverlay").style.display = "none";}</script>
<script>function myFunction() {document.getElementById("myDropdown").classList.toggle("show");}function filterFunction() {var input, filter, ul, li, a, i;input = document.getElementById("myInput");filter = input.value.toUpperCase();div = document.getElementById("myDropdown");a = div.getElementsByTagName("a");{txtValue = a[i].textContent || a[i].innerText;if (txtValue.toUpperCase().indexOf(filter) > -1) {
a[i].style.display = "";} else {a[i].style.display = "none";}}}</script>
SAVE template. Selesai.
www.editblogtema.net