Perhatian : para pengunjung di Larang Pencet / klik judul iklan yg bertentangan dengan SYARIAH ISLAM, harap maklum karena pemilik website tidak bisa mengontrol penuh tampilan iklan. .. terimakasih dan anda berkunjung di blogger tentang modif motor efek chroom, krom, crom, semoga kita semua selalu diberi keselamatan dan kesehatan oleh Alloh SWT. amin ya robbal alamin.

Minggu, 19 Mei 2013

Cara Membuat Kotak Search Di Header Blogger

Cara Membuat Kotak Search Di Header Blogger | Posisi Search Pada tempat Header di Blog atau Blogspot. 

Dan bagi yang ingin membuatnya,mari kita simak langkah-langkah berikut!
1. Buka Dasbor Blog -> Template -> Edit Template
2. Centang "Expand Template Widget"
3. Cari kode "]]></b:skin>" ( Ctrl+F atau F3 untuk mempermudah pencarian )
4. Letakkan kode CSS berikut tepat di atas kode ]]></b:skin
CSS : 
#search{float: right;
margin-right:300px;
margin-top: 215px;}#search input[type="text"]{background: url(http://2.bp.blogspot.com/-El7-211Pt7o/T5HBuBrNztI/AAAAAAAAAow/bV7f0allh4Q/s1600/cari.png) no-repeat 10px 6px darkred;
border-top: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
font: bold 16px 'Advent Pro',cursive;
color: #BBB;
text-shadow: 1px 1px 1px black,-1px 1px 1px black,-1px -1px 1px black,1px -1px 1px black;
width: 325px;
padding: 6px 15px 6px 35px;
border-radius: 25px 25px 25px 25px;
-moz-transition: all 0.1s ease 0s;
-webkit-transition: all 900ms ease-out;
-moz-transition: all 900ms ease-out;
-ms-transition: all 900ms ease-out;
-o-transition: all 900ms ease-out;
transition: all 900ms ease-out;
margin-top: -300px;
margin-right: -200px;
float: right;
}
NB:
- Tulisan berwarna orange : Arah ,Jika "right" yaitu dari kanan dan "left dari kiri!
- Tulisan berwarna kuning : Margin dari kanan ( Sesuaikan degan blog sobat )
- Tulisan berwarna merah : Panjang search
- Tulisan berwarna biru muda : Warna font search
- Tulisan berwarna abu-abu : Tebal border ( garis tepi ) search
- Tulisan berwarna biru tua : Jenis border ( garis tepi ) search
- Tulisan berwarna hijau : Warna border ( garis tepi ) search
- Tulisan berwarna biru : Warna background search
- Tulisan berwarna pink : Margin dari atas ( Sesuaikan degan blog sobat )
- Tulisan berwarna hijau tua : Border radius ( lengkungan pada garis tepi ) search
5. Cari kode "</header>"  ( Ctrl+F atau F3 untuk mempermudah pencarian )
6. Letakkan HTML berikut tepat di atas kode "</header>"
HTML : 
<form action='/search' id='search' method='get'><input name='q' placeholder='Search...' size='30' type='text'/></form>

NB :
- Sebenarnya kode HTML di atas bisa di letakan di antara tag "<header>" dan "</header>"

7. Klik pratinjau dulu,jika tidak error,Klik Simpan
8. Selesai!

Artikel Saya Fafan ini tentang Cara Membuat Kotak Search Di Header Blogger

Tidak ada komentar:

Posting Komentar