Entri Unggulan

Haikew - Elegant Masonry Blogger Template

Haikew UI on multiple device Haikew - Elegant Masonry Blogger Template is a colorful and clean design. Suitable for personal or magaz...

Membuat Full Screen Search Untuk Blogger
Saturday, November 3, 20180 Comments
Membuat Full Screen Search Untuk Blogger
A dreamer who trying to loves writing and blogwalking. Man of nature. The wrong man in the wrong time. Going with the flow. Penggemar CSS dan HTML.
Membuat Full Screen Search Untuk Blogger
Fitur search sangat penting dalam sebuah blog, ketika kita ingin mencari artikel yang spesifik pada sebuah blog maka kita menggunakan fitur search. Kali ini aku akan menshare widget search dimana nantinya ketika trigger nya di klik maka fitur search ini yang sebelumnya tersembunyi akan keluar dan memenuhi layar.
Full Screen Search
Widget ini aku dapatkan dari W3 Schools dengan sedikit modifikasi supaya bisa digunakan pada patform blogger. Berikut kodenya dan langkah-langkah penerapan nya :
  1.  Pertama tambahkan library Fontawesome setelah kode <head>.
<link href='https://use.fontawesome.com/releases/v5.5.0/css/all.css' rel='stylesheet'/>
  1. Tambahkan kode HTML berikut ini di bawah kode <body>.
<div class='overlay' id='myOverlay'>
<span class='closebutn' onclick='closeSearch()' title='Close Overlay'><i class='fas fa-times-circle'/></span>
<div class='overlay-content'>
   <form action='/search' method='get'>
     <input name='q' placeholder='Search..' type='text'/>
     <button type='submit'><i class='fas fa-search'/></button>
   </form>
</div>
</div>
  1. Tambahkan CSS berikut ini sebelum kode </b:skin> atau </style>.
/* The overlay effect with black background */
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(0,0,0);
/* background-color: rgba(0,0,0, 0.9); Black with a little bit see-through */
background: rgb(39,100,130);
background: -moz-linear-gradient(145deg, rgba(39,100,130,1) 0%, rgba(71,126,133,1) 35%, rgba(73,170,130,1) 100%);
background: -webkit-linear-gradient(145deg, rgba(39,100,130,1) 0%, rgba(71,126,133,1) 35%, rgba(73,170,130,1) 100%);
background: linear-gradient(145deg, rgba(39,100,130,1) 0%, rgba(71,126,133,1) 35%, rgba(73,170,130,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&quot;#276482&quot;,endColorstr=&quot;#49aa82&quot;,GradientType=1);
}

/* The content */
.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

/* Close button */
.overlay .closebutn {
  position: absolute;
  top: 25px;
  right: 25px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebutn:hover {
  color: #ccc;
}

/* Style the search field */
.overlay input[type=text] {
  float: left;
  padding: 15px;
  font-size: 17px;
  border: none;
  float: left;
  width: 80%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

/* Style the submit button */
.overlay button {
  float: left;
  width: calc(20% - 30px);
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
  1. Tambahkan kode JavaScript berikut ini sebelum kode </body>.
<script>
// Open the full screen search box
function openSearch() {
  document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}

// Close the full screen search box
function closeSearch() {
  document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
</script>
  1. Terakhir tambahkan kode untuk trigger widget search nya. Kode ini bisa kita oprek lagi tinggal kembangkan saja dan kita bisa meletakkan kode ini dimana saja sesuai sikon. Untuk contohnya letakkan kode ini di widget HTML/JavaScript di bagian Tata Letak.
<button class="openBtn" onclick="openSearch()">Open Search Box</button>
Untuk contoh penerapannya bisa dilihat di blog demo berikut ini : Qolorful. Demikian artikel untuk kali ini, semoga bermanfaat dan kita berjumpa lagi di artikel berikutnya. Ciao!

Sumber
  •  https://www.w3schools.com/howto/howto_css_fullscreen_search.asp

No comments:

Post a Comment