Cool Search Field

Pengunjung berharap melihat kotak pencarian di blog Anda sehingga mereka dapat mencari postingan yang sudah mereka baca sebelumnya atau mencari tentang topik tertentu.

---

Tutorial Blog: Cara Membuat Cool Search Field

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

.block{
  box-sizing:border-box;
  margin:0px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.search-block{
  width:250px;
  height:50px;
  background: rgb(77,221,249);
  background: #45aaf2;
  overflow:hidden;
  border-radius:100px;
  position:relative;
}

.search-block .icon{
  position:absolute;
  pointer-events:none;
  left:14px;
  top:50%;
  transform:translateY(-50%);
  transition-duration:.8s;
  z-index:0;
}

.search-block .icon:before{
  margin-top:-4px;
  display:block;
  content:'';
  height:20px;
  width:20px;
  border-radius:20px;
  background:white;
}

.search-block .icon:after{
  position:absolute;
  bottom:-8px;
  right:5px;
  display:block;
  content:'';
  height:15px;
  width:4px;
  border-radius:20px;
  transform:rotate(-45deg);
  transform-origin:center top;
  background:white;
}

.search-block input[type="search"]{
  height:100%;
  width:100%;
  border:0px;
  background:transparent;
  position:relative;
  outline:0;
  -webkit-appearance:none;
  padding:0px 20px 0px 50px;
  font-size:18px;
  color:#2f3542;
  z-index:2;
}

.search-block input[type="search"]:focus + .icon{
  transform:translate(50%,-50%) scale(24) rotate(180deg);
}

.search-block input[type="search"]::placeholder {
  color: white;
  opacity: 1;
}

.search-block input[type="search"]:-ms-input-placeholder {
  color: white;
}

.search-block input[type="search"]::-ms-input-placeholder {
  color: white;
}

Simpan Tema

Selanjutnya untuk menampilkan hasilnya, beralih ke halaman Layout > Widget Sidebar > Add a Gadget > + HTML/JavaScript, lalu tambahkan kode HTML berikut ini pada box Content

<div class='block'><form action='/search' class="search-block" method='get' target='_top'>
<input type="search" name='q' placeholder="Search" />
<div class="icon">
</div>
</form></div>

Save