CARA MEMBUAT MENU BLOG PLUS FULL TOMBOL SEARCH

AvatarBy: ( 0Tanggapan)
Ini adalah trik mudah. Dan dapat diterapkan untuk melengkapi template bawaan (default) blogspot, saya memanfaatkan elemen elemen HTML dasar saja: HTML, CSS, JavaScript. 
Speksnya menjadi sebagai berikut:
  1. Menu pencarian dinamis dan responsive full screen
  2. Menu navigasi minimalis ringan dan portable
  3. Unlimited sub-menu dapat dengan mudah ditambahkan
  4. 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.
  1. Masuk ke pengaturan blogger
  2. Pilih pengaturan
  3. Cari gadget atau widget pencarian (atau search top)
  4. 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
  1. Masuk ke pengaturan blogger
  2. Pilih tema atau theme
  3. 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()'>&#9776;</button> <div class='dropdown-content' id='myDropdown'> <a href='#home'/> <a href='#home'><b>&#10060;</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 &#65286; Paradox</a><a href='#' id='editblogtema4'>English Contents</a>
<a href='#'>TIPS &#65286; TRIKS</a> <a href='#'>BLOGGING</a> </div></div> <div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</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(&quot;myOverlay&quot;).style.display = &quot;block&quot;;}function closeSearch() {document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;}</script>
<script>function myFunction() {document.getElementById(&quot;myDropdown&quot;).classList.toggle(&quot;show&quot;);}function filterFunction() {var input, filter, ul, li, a, i;input = document.getElementById(&quot;myInput&quot;);filter = input.value.toUpperCase();div = document.getElementById(&quot;myDropdown&quot;);a = div.getElementsByTagName(&quot;a&quot;);{txtValue = a[i].textContent || a[i].innerText;if (txtValue.toUpperCase().indexOf(filter) &gt; -1) {
a[i].style.display = &quot;&quot;;} else {a[i].style.display = &quot;none&quot;;}}}</script>

SAVE template. Selesai.


www.editblogtema.net

0 Response to "CARA MEMBUAT MENU BLOG PLUS FULL TOMBOL SEARCH "

Post a Comment

Ajukan pertanyaan, kami mungkin tidak bisa langsung menjawabnya. Namun pertanyaan anda mungkin berguna dan penting bagi pembaca blog ini.

Terimakasih

Salam dari Admin
Anissa Auliasari

BERDASARKAN LABEL

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel