Cara Membuat Search Box Menjadi Full Screen Responsive di Blog

Cara Membuat Search Box Menjadi Full Screen Responsive di Blog - Halo Gaes, Sudah lama Mimin ga update karena kesibukan harian yang mim...

Cara Membuat Search Box Menjadi Full Screen Responsive di Blog - Halo Gaes, Sudah lama Mimin ga update karena kesibukan harian yang mimin alami, Jadi kali ini Mimin ingin memberikan sebuah Tutorial yang Keren dan juga Responsive.

"Wihh apaan itu min?"

"Silahkan lihat gambar, itulah demonya hwahahaha"

Perlu diketahui juga, saya tipe orang yang pemalas, kenapa? Demonya Melalui Gambar doank, tidak mau membuat Demo via Jsfiddle~, Oke kita kembali ke pembahasan utamanya. Jika kamu ingin merubah tampilan Search Box kamu yang itu-itu saja, silahkan coba tutorial kali ini, karena tutorial ini membahas merubah Style dari Search Box kalian menjadi lebih Kerrreennn~ Selain dari tampilan yang keren, Search Box kali ini juga Responsive, Wow~.

Jadi kenapa tidak dicoba saja?

Yuk silahkan ikuti langkah-langkah pembuatan Search Box Responsivenya dibawah ini :

1. Silahkan kalian masuk ke sumur blogger lalu Klik Tema  > Edit Template.

2. Copylah Code dibawah ini lalu carilah code </head>

<style type='text/css'>
#search-box{position:relative;width:100%;margin:0}
#search-form{height:40px;border:1px solid #999;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;background-color:#fff;overflow:hidden}
.search-form{margin:0;padding:0}
#search-text{font-size:14px;color:#ddd;border-width:0;background:transparent}
#search-box input[type="text"]{width:96%;padding:11px 0 12px 1em;color:#333;outline:none}
#search-button{position:absolute;top:0;right:0;height:42px;width:80px;font-size:14px;color:#fff;text-align:center;line-height:42px;border-width:0;background-color:#2EB0EC;-webkit-border-radius:0 5px 5px 0;-moz-border-radius:0 5px 5px 0;border-radius:0 5px 5px 0;cursor:pointer}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999}
#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8}
.search-form-label,.search-text{position:absolute;left:0}
.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}
.search-text{top:46%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;font-size:8vw;color:#fff;text-align:center;outline:0;position:fixed}
#search-form:after{content:"\f002";font-family:FontAwesome}
.keluar{height:100vh;width:100%;position:absolute;top:0;left:0;bottom:0;right:0;background:transparent;border:0}
</style>

Setelah dicopy, pastekan code diatas tepat diatas code </head>
3. Setelah itu carilah code ]]></b:skin> dan Copy code dibawah ini dan pastekan tepat diatasnya

/* Search Box */
input[program=zuredesign] {
    width: 130px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}

/* Search Box CSS */
input[type=text]:focus {
    width: 100%;

4. Setelah itu, Klik simpan template dan masuklah ke bagian Tata Letak

5. Setelah masuk ke Tata Letak, Klik "Tambahkan Gadget" > "HTML/Javascript" lalu copylah code dibawah ini dan pastekan dibagian "Konten"

<div id="search-box">
  <form action="/search" id="search-form" method="get" target="_top">
    <input placeholder="Search Here" onclick="document.getElementById(&#39;popup_searchBox&#39;).style.display = &#39;block&#39;;" id="search-text" name="q" placeholder="" type="text" />
  </form>
</div>
<div id="popup_searchBox" style="display:none;">
  <button class='keluar' onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button>
  <div id="popup_searchBox_Data">
    <!-- Search Box -->
    <div class="search-form-wrapper" style="display: block;">
      <form action="/search" class="search-form" method="get">
<input program=zuredesign class="search-text" title="Hit me Senpai!~" placeholder="Hit Me Senpai~" name="q" type="text" value="" />
      </form>
    </div>
    <!-- Search Box -->
  </div>
</div>

Nah, Itulah Tutorial Cara Membuat Search Box Menjadi Full Screen Responsive di Blog, sekian dari saya.. jika Saya ada kesalahan dalam memberikan sebuah tutor ataupun pertanyaan silahkan kirimkan Pesan melalui "Contact Us" di Footer Zuredesign. Jika tutorial ini memiliki kekurangan seperti "Search Boxnya" tidak muncul dan sebagainya, silahkan corat-coret dibawah ini.

Sekian dan terima kasih.