Thursday, February 01, 2018

Cara Membuat Search Box Popup Keren Pada Blog

Cara Membuat Search Box Popup Keren Pada Blog

Tags

Search Box Popup Keren Pada Blog
Search Box

Hallo sobat blogger jumpa lagi bersama kami. Bagaimana kabarnya semoga bahagia selalu dan tetap semangat untuk berbagi melalui blog. Kali ini kita akan membahas tentang search box pada blogger. Kalau kita perhatikan setiap situs dan blog pasti menggunakan kotak search box pada situsnya. Menurut saya search box pada situs atau blog merupakan salah satu elemen penting yang harus ada pada setiap situs.

Fungsi search box sendiri sudah jelas untuk mempermudah pengunjung dalam bernavigasi pada halaman situs kita. Dengan menggunakan kotak search box pengunjung tinggal mengetik kata kunci pencarian artikel yang ingin di lihat. Boleh di bilang kotak search box pada situs atau blog mirip dengan kolom google search. Tapi fungsinya tentu lebih di batasi tidak serta merta sama dengan kolom google search. Namun secara teknis dan kegunaan beda-beda tipislah.

Sebetulnya kotak search box sendiri sudah di sediakan langsung oleh penyedia layanan blog dan situs seperti blogger. Tapi tentu tampilanya hanya sederhana. Begitu juga dengan penyedia layanan template mereka juga sudah menyediakan kotak search box pada template yang mereka buat. Tampilanyapun berbeda-beda pada tiap template namun fungsi dan kegunaan sama.

Untuk para sahabat blogger pemula yang ingin belajar memasang kotak search box pada template. Atau ingin merubah tampilan yang sudah ada. Saya rasa pembahasan kita kali ini akan sangat membantu sobat. Kali ini kita akan membahas cara memasang kotak search box yang berbeda dengan yang di pakai kebanyakan blogger. Karna kita akan memasang search box popup sobat bisa lihat penampakanya seperti gambar dibawah ini.

Search Box Popup Keren Pada Blog
Search Box Popup

Baiklah tanpa basa-basi lagi kita menuju ke pokok pembahasan.


Langkah pertama yang harus sobat lakukan adalah isi paket data sobat, kalo tidak pergilah kewarnet. Karena tidak mungkin tanpa koneksi internet bisa membuka blog sobat Hahahaha.....! Gak kok sob saya cuma bercanda jangan di baperin apalagi di bilang sombong. Peace !

Langkah pertama tentu sobat harus login dulu ke dashboard blog sobat. Kemudian pilih thema dan edit HTML jangan lupa templatenya di backup dulu. Biasakan untuk selalu membackup template setiap kali ingin mengoprek atau mengeditnya. Selanjutnya copy kode CSS di bawah ini dan letakan tepat diatas kode.
]]></b:skin>

/* Search Button Popup */
#search-wrapper{width:90%;margin:0 auto;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-animation:shownow 0.3s ease-in-out;-moz-animation:shownow 0.3s ease-in-out;animation:shownow 0.3s ease-in-out}
@keyframes shownow{0%{transform:scale(0.9)}50%{transform:scale(1.01)}100%{transform:scale(1)}}
#search-wrap{clear:both;width:75%;margin:0 auto;padding:0;display:block;overflow:hidden}
#search{border:1px solid #fff;border-radius:5px}
#searchformku{color:#111;width:100%;margin:0 auto;overflow:hidden;position:relative;}
.button-searchku,.button-searchku:hover{clear:both;background:none;border:3px;color:#3f3f3f;width:40px;height:40px;line-height:40px;padding:0;text-align:center;font-size:23px;cursor:pointer;position:absolute;top:5px;right:10px;font-weight:700}
.button-searchku:active{border:none;outline:none;background:none;}
#search-formku{background-color:transparent;width:100%;height:57px;line-height:57px;padding:0 60px 0 20px;-moz-box-sizing:border-box;box-sizing:border-box;border:none;font-weight:700;font-size:20px;color:#fff!important}
#search-formku{-webkit-box-sizing:border-box}
#search-formku:focus{border:none;outline:0;color:#fff;}
#searchformku:focus{border:none;outline:0;color:#3f3f3f}
#box{margin:0 auto;display:none;padding:60px 0 0;width:100%;height:100%;position:fixed;top:0;left:0;z-index:999999;-webkit-transform:translateZ(0);-ms-transform:translateZ(0);transform:translateZ(0);background-color:rgba(0,0,0,.94);text-align:center;-webkit-transition:all ease-in-out .25s;-moz-transition:all ease-in-out .25s;-ms-transition:all ease-in-out .25s;-o-transition:all ease-in-out .25s;transition:all ease-in-out .25s;}
#hide span.tombolkecil{color:#fff;font-weight:700;padding:0;text-align:center;cursor:pointer;font-size:20px;height:35px;width:35px;line-height:35px;float:right;overflow:hidden;display:block}
#hide span.tombolkecil:hover{color:#eee;border-color:#eee}
#box p{font-size:14px;margin:15% auto 70px;color:#fff;letter-spacing:2px;text-transform:uppercase}
.icon-searchku span{font-weight:normal;width:auto; height:50px;line-height:50px;position:absolute;top:0;right:15px;cursor:pointer;padding-left:5px;font-size:23px;color:#fff}

Langkah selanjutnya yang harus sobat lakukan adalah copy kode di bawah ini dan letakan sebelum kode body penutup template.
</body>

<div id='box'>
<div class='search-wrapper' id='search-wrapper'>
<div id='hide'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;none&apos;;document.getElementById(&apos;show&apos;).style.display=&apos;block&apos;'><i aria-hidden='true' class='fa fa-times'/></span></div>
<div id='search-wrap'>
<p>Ketik dan Tekan Enter</p>
<div id='search'>
  <form action='/search' id='searchformku'>
<input name='cof' type='hidden' value='FORID:10'/>
<input name='ie' type='hidden' value='ISO-8859-1'/>
<input id='search-formku' name='q' placeholder='Search....' required='required' type='text'/>
<button class='button-searchku' title='Search' type='submit'><i aria-hidden='true' class='fa fa-search'/></button>
</form>
  </div>
  </div>
</div>
</div>

Selanjutnya copy kode di bawah ini dan letakan di bawah kode body pembuka pada template sobat cari kode seperti ini.
<body>

<div class='icon-searchku'>
<div id='show'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><font color='#f39c12'><i aria-hidden='true' class='fa fa-search'/></font></span></div>
</div>

Sebetulnya terserah sobat mau meletakan kode di atas di mana saja, yang penting posisinya antara kode body pembuka dan body penutup pada template sobat. Karena kode di atas adalah icon yang berbentuk kaca pembesar untuk membuka kotak search box popup nya. Jika sobat merasa bingung sobat bisa melihat contoh dari penempatan saya di bawah ini kira-kira mirip seperti itulah. Karena tiap template berbeda beda kode HTML nya. Ingat yang di bawah ini contoh jangan di copy. Perhatikan yang saya beri tanda merah itu posisi penempatan kode di atas seperti di bawah ini setelah itu simpan template sobat.

<!-- <body><div></div> -->
<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
<div class='nav_wrapper' id='header' itemscope='itemscope' itemtype='https://schema.org/WPHeader'>
<div class='maxwrap header'>
 <b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
 <div class='icon-searchku'>
<div id='show'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById(&apos;box&apos;).style.display=&apos;block&apos;;document.getElementById(&apos;hide&apos;).style.display=&apos;block&apos;'><font color='#f39c12'><i aria-hidden='true' class='fa fa-search'/></font></span></div>
</div>
 </b:if>
<b:section id='headerdua' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Rancax (Header)' type='Header' version='1'>
    <b:widget-settings>

Demikianlah sobat cara memasang kotak search box popup pada template. Untuk demonya silahkan lihat pada kotak search box dari blog saya pada tampilan mobile. Jika ada pertanyaan lagi silahkan tanyakan pada kolom komentar. Happy blogging sobat blogger jabat erat !.

A man is known by the companion he keeps !

Buka Komentar

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
EmoticonEmoticon