Cara Meletakkan Kotak Pencarian di Tab Menu Laman

Dalam membuat sebuah situs atau blog kotak pencarian sangat dibutuhkan guna memudahkan pencarian dengan lebih mudah dan cepat, disamping untuk memperindah tampilan. kali ini saya akan berbagi cara menambahkan kotak pencarian pada tab menu laman sebagai berikut :
  1. Login ke akun blogger Anda
  2. Pilih menu Template, klik Edit HTML => Edit Template.
  3. setelah itu cari kode <li><a expr:href='data:link.href'><data:link.title/> </a></li> agar lebih mudah cari dengan Ctrl + F, selanjutnya perhatikan kode <b:/loop> beberapa baris dibawahnya.
  4. copy/letakkan kode CSS berikut ini tepat dibawah kode <b:/loop>.
  5. <div class='cse' style='color:#000000;align:right;float:right;margin:5px 3px 2px 3px ;'>
    <form action='/search' id='searchform' method='get' style='display:inline;'>
    <input id='searchbox' maxlength='350' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;search on this site...&quot;;}' onfocus='if (this.value == &quot;search on this site...&quot;) {this.value = &quot;&quot;}' type='text' value='search on this site...'/>
    <input id='searchbutton' type='submit' value='Cari'/>
    </form>
    <script src='http://chillaolshop.blogspot.com' type='text/javascript'/>
    </div>
  6. ganti tulisan http://chillaolshop.blogspot.com warna merah diatas dengan url link anda sendiri
  7. simpan template dan lihat hasilnya
Baca Selengkapnya >>>
Tidak ada komentar:

Cara menambahkan widget/gadget di atas header

Kali ini Saya akan berbagi ilmu sama teman-teman bagaimana cara menambahkan widget/gadget pada blog sebagai berikut :

1.       MENAMBAHKAN 1 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Cari kode  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  4. Jika sudah ketemu ganti  showaddelement='no' menjadi showaddelement='yes'
  5.  Simpan Template dan lihat hasilnya

1.       MENAMBAHKAN 2 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Pertama-tama cari code  <header>, jika sudah ketemu letakkan code berikut tepat di bawah code <header> 
  4.   <div id='box-kolom-widget'>
    <div id='box1' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div><div style='clear:both;'/>
    </div> 
  5. Simpan Template dan lihat hasilnya
untuk tulisan warna merah diatas dapat anda ganti sesuai dengan keinginan. 50% adalah untuk mengatur lebar gadget, sedangkan left adalah mengatur posisi widget dapat anda ganti dengan right atau center.

.       MENAMBAHKAN 3 KOLOM GADGET DIATAS HEADER
  1. Masuk pada halaman Template
  2. Klik Edit HTML kemudian Lanjutkan
  3. Pertama-tama cari code  <header>, jika sudah ketemu letakkan code berikut tepat di bawah code <header> 
  4.   <div id='box-kolom-widget'>
    <div id='box1' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='box2' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='box3' style='width: 35%; float: left; margin:0; text-align: left;'>
    <b:section class='box-widget' id='col3' preferred='yes' style='float:left;'/>
     </div>
    <div style='clear:both;'/>
    </div> 
  5. Simpan Template dan lihat hasilnya


Baca Selengkapnya >>>
Tidak ada komentar: