1. Tambahkan Widget Search Box Stylist Di Sidebar Blogger

Search box sangat lah penting terdapat dalam sebuah blog agr pengunjung blog yang sudah percaya dengan kualitas blog kita bisa berlama-lama mencarri postingan-postingan terbaik kita. Untuk itu, pilihkan penempatan widget search box ini di side bar yang mudah terlihat dan bisa memudahkan pengunjung blog.

Style 1#


Tambahkan Widget Search Box Stylist Di Sidebar Blogger



kita masuk ke cara menambahkannya ke blogger

1. Masuk ke blogger.com
2. Pilih Layout atau Tata Letak
3. Pilih Tambahkan widget atau Add Gadget
Galery Recent Post Blog Versi Text Stylist Dengan Fungsi Hover Mouse

4.  Pilih widget HTML/Javascript lalu masukan kode di bawah ini

 <style>
#searchbox {
    background: url(http://4.bp.blogspot.com/-u0fEq-zSTYI/VD1gGDLy3aI/AAAAAAAAAhw/im3bcQd5wBM/s1600/search-box.png) no-repeat;
    height: 27px;
    width: 202px;
}

input:focus::-webkit-input-placeholder {
    color: transparent;
}

input:focus:-moz-placeholder {
    color: transparent;
}

input:focus::-moz-placeholder {
    color: transparent;
}

#searchbox input {
    outline: none;
}

#searchbox input[type="text"] {
    background: transparent;
    margin: 0px 0px 0px 12px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "Arial Narrow", Arial, sans-serif;
    font-size: 12px;
    font-style: italic;
    width: 77%;
    color: #828282;
    display: inline-table;
    vertical-align: top;
}

#button-submit {
    background: url(http://2.bp.blogspot.com/-4OxjMRukhCM/VD1gBscpzII/AAAAAAAAAhk/TUxMSv7bCzA/s1600/search-button.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    width: 30px;
    height: 25px;
}

#button-submit:hover {
    background: url(http://4.bp.blogspot.com/-GgNBTS_3FEA/VD1gBgm7RFI/AAAAAAAAAhg/flg6VijzW8E/s1600/search-button-hover.png) no-repeat;
}

#button-submit::-moz-focus-inner {
    border: 0;
}
</style>

<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="search..." />
<input id="button-submit" type="submit" value="" />
</form>


Note : Jika ingin menampilkannya di bagian tengah widget dan agar sesuai dengan lebar side bar, maka gunakan kode <center> sebelum script dan </center> setelah script.
 
5. Klik Simpan dan mulai Simpan Template 


Demikian semoga bermanfaat
SILAHKAN COPY PASTE ARTIKEL PBBLOG DAN GENERATE MENJADI ARTIKEL UNIK ANDA


BACA JUGA

Trik Widget 7029393387828985022

Posting Komentar

Scroll All Content

Memuat konten...

RANDOM POST

Memuat...

Google+ Badge

item