×

Owner / Author / Admin / etc

    Rahman NM    

"Pada halaman web ini saya akan membagikan informasi informasi menarik seputar Anime, Manga, Game, Film, dan juga berbagai tips-tips menarik lainnya."

Cara Membuat Search Box Full Screen Pada Blogger

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.

Creativity of codes and exploiting, with code we can do something fun.
Facebook Instagram Twitter
Show Comments!
Hide comments

0 Response to "Cara Membuat Search Box Full Screen Pada Blogger"

Kebijakan berkomentar :

Berkomentarlah dengan tata bahasa yang baik, agar orang tau sebijak apa karakter anda melalui kata-kata,

Silahkan berkomentar apapun selagi masih berhubungan dengan halaman postingan ini,

Dilarang berkomentar menggunakan Link Aktif,

Centang Notife Me agar mendapatkan notifikasi balasan komentar admin melalui Email.

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Copyright © 2017 - 2020 Anirock Site - All Rights Reserved Created With