Cara Membuat Search Box Full Screen Pada Blogger

Tombol Search merupakan salah satu fitur yang sangat penting bagi pemilik web, karna dengan memiliki fitur search box dapat memudahkan pengunjung dalam mencari artikel yang ingin mereka baca.

Sebenarnya setiap template web itu sudah memiliki fitur search box, tapi jika kamu ingin mengganti tampilan fitur search template kamu, disini saya akan membuat tutorial bagaimana cara membuat fitur search box full screen.

Bagi kamu pengguna template Viomagz tentunya sudah tidak asing dengan fitur search box full screen seperti yang ingin saya bagikan ini, nah langsung saja kita ke tutorial bagaimana cara membuat search boxnya.

Cara Membuat Search Box Full Screen Pada Blogger

Baca Juga : Cara Menambahkan Fitur Search By Voice Pada Fitur Search Box

1. Pertama, login terlebih dahulu ke Blogger,
2. Pada dashboard Blogger pilih Tema ⇒ Edit HTML,
3. Kemudian, copy kode CSS dibawah ini dan letakkan tepat diatas </b:skin>,

/* Search Box Full Screen */
.search-icon {
position: absolute;
top: 11px;
right: 50px;
font-size: 19px;
}
.search-icon a {
color: $(search.icon.color);
}
#searchfs {
position: fixed;
z-index:9999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);

-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;

-webkit-transform: translate(0px, -100%) scale(0, 0);
-moz-transform: translate(0px, -100%) scale(0, 0);
-o-transform: translate(0px, -100%) scale(0, 0);
-ms-transform: translate(0px, -100%) scale(0, 0);
transform: translate(0px, -100%) scale(0, 0);

opacity: 0;
}

#searchfs.open {
-webkit-transform: translate(0px, 0px) scale(1, 1);
-moz-transform: translate(0px, 0px) scale(1, 1);
-o-transform: translate(0px, 0px) scale(1, 1);
-ms-transform: translate(0px, 0px) scale(1, 1);
transform: translate(0px, 0px) scale(1, 1); 
opacity: 1;
z-index: 9999;
}

#searchfs input[type="search"] {
position: absolute;
top: 50%;
left: 0;
margin-top: -51px;
width: 70%;
margin-left: 15%;
color: rgb(255, 255, 255);
background: transparent;
border-top: 1px solid rgba(255, 255, 255, .8);
border-bottom: 2px solid rgba(255, 255, 255, .5);
border-left: 0px solid transparent;
border-right: 0px solid transparent;
font-size: 40px;
text-align: center;
outline: none;
padding: 10px;
}
#searchfs .close {
position: fixed;
bottom: 50%;
right: 50%;
color: #fff;
background-color: transparent;
opacity: 0.8;
font-size: 40px;
border: none;
outline: none;
margin-bottom: 60px;
margin-right: -10px;
}
#searchfs .close:hover {
cursor: pointer;
}

4. Setelah meletakkan kode CSS tersebut, lalu letakkan kembali kode HTML dibawah ini tepat diatas kode </header>,

<div class='search-icon'>
<a href='#searchfs'><i class='fa fa-search'/></a>
</div>

<div id='searchfs'>
<button class='close' type='button'>&#215;</button>
<form action='/search' id='search-form' method='get'>
<b:switch var='data:blog.locale'><b:case value='id'/><input name='q' placeholder='ketik katakunci' type='search' value=''/>
<b:default/><input name='q' placeholder='type to search' type='search' value=''/></b:switch>
<input name='max-results' type='hidden' value='8'/>
</form>
</div>

5. Terakhir simpan dan save template.

Sekian tutorial bagaimana cara membuat tombol search box full screen pada blogger yang dapat saya bagikan, untuk hasil demo search box tersebut, kamu dapat melihat pada fitur search box template blog ini, Namun kamu harus membuka melalui Desktop agar bisa melihatnya, karena search box blog ini ditampilan Mobile dan Desktop berbeda. Dan Semoga Bermanfaat :D.