Tutorial Membuat Search Form Melebar di Blog

Oleh Hafiz

Thursday, December 18, 2014

Bagikan :

Tweet

Tutorial Membuat Search Form Melebar di Blog - Untuk pertama Kalinya saya memposting tutorial blog di Blog ini. Dikarenakan sedang mengerjakan sebuah blog dan di dalam blog tersebut saya menggunakan Search Form yang melebar setelah di di klik atau diarahkan mouse. Dan tanpa basa basi lagi, Berikut ini adalah Tutorial Membuat Search Form Melebar di Blog yang saya gunakan.
Untuk demonya, bisa lihat di Link ini

• Tentunya Harus Login ke Blogger dan Masuk ke Edit HTML
• Cari kode ]]></b:skin>
• Paste Kode Berikut

#plussearch {
    position: relative;
        width:100%;
    margin: 0;
   
}

#plussearchform {
display:inline;
    background: transparent;width:25px;

     }
#plussearchtext {
transition: all 0.5s ease;
width:255px;
    float:right;
    width: 25px;
    padding: 10px 4px;
    border: none;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aD_mouMmfzh3Q1CTa4WHuXIeNBHhxvr-W5jly6RxIZ832gsdnXoLso0_ac5M0mMvB9613zxmkjynQJAw-gJUdX6YYtJHwoXxc0C1TXEW0LWuK5QmOEr0Xhxfz8wVg-4_NCwmItQjOwU/s0/search-icon.png) 5px 2px no-repeat;
    color:#777;
background-position:center;
    font-size:11px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
margin:2px 0 2px 10px;
     }
#plussearchtext:focus, #plussearchtext:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5aD_mouMmfzh3Q1CTa4WHuXIeNBHhxvr-W5jly6RxIZ832gsdnXoLso0_ac5M0mMvB9613zxmkjynQJAw-gJUdX6YYtJHwoXxc0C1TXEW0LWuK5QmOEr0Xhxfz8wVg-4_NCwmItQjOwU/s0/search-icon.png) 5px 2px no-repeat #2f2f2f; background-position:10px 5px;width:215px; padding-left:45px;}


   
• 4. dan pastekan Kode berikut di tempat Search bar akan di pasang

<div id='plussearch'>
          <form expr:action='data:blog.homepageUrl + &quot;search/&quot;' id='plussearchform' method='get'>
            <input id='plussearchtext' name='q' type='text'/>
                      </form>
        </div>

Simpan template, dan Lihat Hasilnya.

Sekian Tutorial Membuat Search Form Melebar di Blog, Jika ada permasalahan atau yang ingin ditanyakan, silahkan tinggalkan komentar.

Tag :

Blog Tutorial