Mobile Theme
Home  ›  belajar  ›  blogger  ›  desain  ›  pemula  ›  Trik

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.

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.

<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>

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(&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>

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.

Related Posts

Oleh di
Label: , , , ,

Tidak ada komentar:

Posting Komentar

blog ini adalah blog demo dan dapat berubah bentuk, fungsi, pengalihan dll sewaktu waktu. Jika terdapat ketidaknyamanan kami mohon maaf

Langganan: Posting Komentar (Atom)
Copyright © 2025 Mobile Theme. All rights reserved.