Posted on

Membuat Kotak Pencarian WordPress Dengan HTML & CSS

wpJakarta – Membuat Kotak Pencarian WordPress Dengan HTML & CSS. Di artikel sebelumnya kami telah membuat dua kolom layout halaman atau post WordPress. https://wpjakarta.com/blog/membuat-dua-kolom-layout-halaman-wordpress/. Seperti hasilnya pada halaman homepage wpJakarta.com (jika belum diganti). Kini kami membuat artikel dimana kolom kiri adalah teks dengan animasi mengetik. Dan kolom kanan adalah kotak pencarian, seperti pada halaman homepage kami.

Membuat kotak pencarian WordPress dengan plugin atau blok editor

Untuk membuat kotak pencarian atau search box pada halaman tersebut bisa dilakukan dengan mudah menggunakan plugin page builder atau blok editor gutenberg. Selain itu membuat dua kolom layout dengan masing-masing element pada kolom tersebut juga sangat mudah dilakukan dengan HTML dan CSS.

Baca Juga :

Membuat kotak pencarian WordPress dengan HTML dan CSS

Untuk membuat tersebut, maka perlu dibuat dua kolom dengan lebar yang berbeda lebarnya antara kolom sisi kiri dan sisi kanan. Untuk membuat layout dua kolom pada halaman wordpress lihat artikel kami sebelumnya, https://wpjakarta.com/blog/membuat-dua-kolom-layout-halaman-wordpress/.

Isi masing-masing kolom dengan element (HTML)

Kolom sebelah kiri di isi dengan teks “Site information” dengan animasi mengetik :

<ul style="text-align: left; list-style: none; margin: 0; padding: 0;">
   	 <li style="list-style-type: none;"><i class="fa fa-info-circle" aria-hidden="true"><strong> Site Information :</strong></i></li>
 	 <li></li>
 </ul>
 <div class="row">
   <div class="homepg-typing">
     <p style="color: green;"><a href="https://wpjakarta.com/">wpJakarta.Com {</a></p>
     <p style="color: red;">URL: <code>https://wpjakarta.com/</code>;</p>
     <p style="color: brown;">} //a Text Based WP Site!</p>
   </div>

Kolom sebelah kanan di isi dengan element search box atau kotak pencarian plus tombol yang sejajar :

 <div class="kolom-cari">
   <ul style="text-align: left; list-style: none; margin: 0; padding: 0;">
    <li style="list-style-type: none;"><i class="fa fa-search"></i><strong> Cari artikel :</strong></li>
   </ul>
 <form class="form-cari"><input name="s" type="text" placeholder="Cari artikel...">
 <button type="submit"><i class="fa fa-search"></i></button>
 </form>
 </div>

Berikan masing-masing element dengan style CSS (CSS)

 /* Homepage 2 kolom */
 .homepg-typing {
   float:left;
   width: 40%;padding:10px;
 }

.kolom-cari {
   float:left;
   width:60%;
   padding:10px;
 }

 .row:after {
   content:"";
   display:table;
   clear:both;
 }

 /* Layout Responsif */
 @media screen and (max-width: 600px) {
  .css-typing, .cari {
    width:100%;
   }
  }

 /* Kotak search */
 form-cari 
   input[type=text] {
   height:40px;
   padding:10px;
   font-size:16px;
   border: 1px solid grey;
   float:left;
   width:80%;
   background: #f9f9f9;}

 /* tombol search */
 form-cari button {
   float:left;
   width:20%;
   padding:10px;
   background:dodgerblue;
   color:white;
   font-size:17px;
   border:1.5px solid dodgerblue;
   border-left:none;
   cursor:pointer;
 }

 /* tombol search hover*/
 form-cari button:hover {
   background: #0b7dda;
  }

 /* Kotak search after */
 form-cari::after {
   content: "";
   clear: both;
   display:table;
 }

 /* kotak tombol sejajar */
 .form-cari {
   display:flex;
   flex-flow: row wrap;
   align-items: center;
 }

 /* Layout Responsif */
 @media screen and (max-width:600px) {
.form-cari {
   width:100%;
   }
 }

Prinsipnya search box tersebut bisa ditempatkan dimana saja. Pada artikel ini kami menempatkannya di halaman homepage karena ingin desain yang simple dan minimal tapi bisa memudahkan pengunjung untuk mencari artikel atau post.

Sedangkan untuk kode CSS untuk membuat animasi mengetik seperti pada kolom sebelah kiri kami buat kan tutorial terpisah. Silahkan lihat artikel berikut.


wpJakarta Tips Trik WordPress

WpJakarta Resources Tips Trik WordPress. Website dengan penerbitan-penerbitan artikel ringan tentang WordPress (Tutorial, Tips Trik, Plugin Dan Themes WordPress) dan Teknologi Informasi secara umum. Sesekali juga berbicara tentang apapun dan hal yang umum (Blogging, Tekno, Bisnis, Sosial, Budaya, Politik, Urusan Negara hingga urusan Akhirat). Serta informasi & penawaran produk digital dan non digital.