CARA MEMBUAT MENU PENCARIAN BERBENTUK BULAT DIDALAM HEADER TEMA AWSOME
Sengaja dengan bentuk gaya bahasa sesederhana mungkin kami memberikan trik ini dan berbagi, ingat tidak pada setiap jenis tema blogger hal ini dapat dilakukan, kami telah mencobakannya pada tema awsome hasil modifikasi kami dengan gaya header berwarna infinite mirip Desain Arlina, namun jangan salah, gaya itu kami buat (baca: modifikasi) dengan teknik kami sendiri menggunakan elemen elemen yang tersedia gratis di internet dan siapapun bebas menggunakannya tanpa perlu kuatir, termasuk menggunakan template hasil kerja kami.
Setelah kami mencari tutorialnya kebanyakan dalam bahasa Inggris, dan itupun adalah tutorial bagaimana membuatnya, bukan trik untuk mendapatkannya. Nah untuk tema atau template 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:
/* 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}
<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>
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 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.
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.
Sekarang kita telah mendapatkan sebuah tema dengan sentuhan kombinasi Desain gayanya Arlina dan Sugeng sekaligus, dan gaya ini juga terdapat pada tema tema premium buatan Gooyabi. Untuk melihat contoh klik demo dibawah ini:
DEMO
Namun sekali lagi kami ingatkan, cara ini berlaku dengan baik pada tema tema awsome bawaan blogger, tapi jika anda mencobakannya terhadap tema yang sekarang sedang dipakai untuk blogger "editblogtema", dijamin anda akan gagal karena Anisa telah merancang dan merobah sedikit struktur dasar templatenya yang saya sendiripun masih sedang mencari trik agar dapat memasang beberapa jenis widget kedalamnya termasuk memasang widget pencarian ini ke dalam header tema "editblogtema" ini.
Jika ada pertanyaan seputar pemasangan jangan ragu untuk menanyakannya melalui komentar dibawah blog ini. Sekian & Salam dari kami.
Komentar
Posting Komentar