MEMBUAT MENU PENCARIAN BERBENTUK BULAT DAN MELETAKANNYA DI POJOK KANAN HEADER BLOG?
Setelah kami mencari tutorialnya kebanyakan dalam bahasa Inggris, dan itupun adalah tutorial bagaimana membuatnya, bukan trik untuk mendapatkannya. Nah untuk tema atau template sederhana dan awsome gratis bawaan blogger yang telah kita edit agar nampak premium dan professional ikutilah tutorial kami sebelumnya perihal membuat warna gradasi baik yang tidak animasi maupun yang animasi, baca: CARA MEMBUAT GRADASI WARNA DI HEADER BLOGGER
Dan selanjutnya agar header tersebut menjadi lebih keren dan premium kita dapat meletakan kotak pencarian seperti terlihat pada gambar di bawah ini:
- Perhatikan perbedaannya sesudah diberi kotak pencarian sebelah atas bar header dan sebelumnya di bawahnya.
- Untuk template bawaan (default) blogspot pasang terlebih dahulu script awsome dibawah ini. Caranya adalah dengan masuk ke pengaturan blogger dan pilih opsi "edit HTML" cari kode </head> letakan kode:
<link href='https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> pas diatas kode </head> tadi.
Masih di pengaturan blogger lalu pilih opsi "edit HTML" cari kode ]]></b:skin> dan kopi kode css dibawah ini dan letakan di atas kode ]]></b:skin> tersebut:
/* 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}
Selanjutnya cari kode </body> lalu kopi pastekan kode dibawah ini diatasnya. Ingat </body> juga di nyatakan sebagai kode penutup pada template.
<div id='box'> <div class='search-wrapper' id='search-wrapper'> <div id='hide'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById('box').style.display='none';document.getElementById('hide').style.display='none';document.getElementById('show').style.display='block''><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>Nah yang terakhir letakan kode ini di bawah atau diatas kode </header> dengan catatan ini khusus buat template awsome, jika untuk tema jenis lain bisa dicobakan sesudah kode <body> yang di sebut juga sebagai kode pembuka pada template.
<div class='icon-searchku'> <div id='show'><span class='tombolkecil' href='javascript:void(0)' onclick='document.getElementById('box').style.display='block';document.getElementById('hide').style.display='block''><font color='#f39c12'><i aria-hidden='true' class='fa fa-search'/></font></span></div> </div>Sekarang kita telah mendapatkan sebuah tema dengan sentuhan kombinasi Desain gayanya Arlina dan Sugeng sekaligus (agak agak miriplah), dan gaya ini juga terdapat pada tema tema premium buatan Gooyabi. Untuk melihat contoh klik demo dari template blogger buatan kami dibawah ini (kami berikan gratis pada siapapun yang ingin mencobanya):
Namun sekali lagi kami ingatkan, cara ini berlaku dengan baik pada tema tema sederhana, awsome dan perjalanan bawaan blogger, tapi jika anda mencobakannya terhadap tema yang sekarang sedang dipakai untuk blogger "editblogtema", pada awalnya dijamin anda akan gagal karena Anissa telah merancang dan merobah sedikit struktur dasar template-nya yang saya sendiripun mencari trik agar dapat memasang beberapa jenis widget kedalamnya termasuk memasang widget pencarian ini ke dalam header tema "editblogtema" ini. Dan akhirnya berhasil juga walau harus melewati sedikit kesulitan.
Jika ada pertanyaan seputar pemasangan jangan ragu untuk menanyakannya melalui komentar dibawah blog ini.