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'/>
  2. 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>
    
  3. 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;
    }
  4. 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>
  5. 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
JavaScript
November 3, 2018
0

Comments

Search

Contact Me