Sabtu, 26 Maret 2011

Cara menambah Search Engine pada menubar



Untuk teman - teman blogger saya mohon maaf karna baru sempat saya post artikel cara menambah search engine pada menubar. karna sibuk nya aktivitas pekerjaan di alama sana. biasa pekerjaan untuk memenuhi kebutuhan perut sama bayar internet juga. hahaha..... ya udah biar nggak bertele-tele kita langsung ke pokok pembahasan saja.

Bagi teman yang sudah menerap kan tutor menambah menu bar ke dalam blog yang postingan saya terdahulu. anda cukup mengikuti tutor yang akan saya bahas di bawah ini. bagi teman yang belum, silahkan anda baca terlebih dahulu di link cara menambah menu bar di blog. kalau sudah anda terapkan. ikuti langkah-langkah di bawah ini.

Berikut ini langkah-langkah cara tambah search engine pada menubar di blog anda:
  • Login dulu ke account blogger milik anda
  • Tata Letak
  • Edit HTML
  • Kemudian Cari kode #NavbarMenuleft{ dan kurangi lebar dari width tersebut sebesar 220 px;
    misalnya lebar dari #NavbarMenuleft{ terdapat di blog anda 960 px; kurangi dengan 220px; = 740px;
  • Nah setelah anda mengurangi ukuran di atas kemudian cari kode ]]></b:skin> dan letakkan kode di bawah ini di atas kode ]]></b:skin>
    #search{width:210px;font-size:11px;float:right;margin:0;padding:0}
    #searchform{overflow:hidden;display:inline;margin:0;padding:0}
    #searchbox{background:#ddd;margin:0;padding:0}
    #search input{background:transparent;color:#fff;float:left;font-size:12px;width:158px;border:1px solid #fff;font:normal 10px arial, verdana, Times New Roman;margin:7px 0 0 10px;padding:3px 7px}
    #search .btn{width:auto;border:0;margin:7px 0 0;padding:0}
  • Kemudian cari kode
    <div id='NavbarMenu'> 
    <div id='NavbarMenuleft'> 
    <ul id='nav'> 
    <li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li> 
    <------- Bla bla bla ----------> 
    <------- Bla bla bla ----------> 
    </ul></div> </div>
  • Kalau sudah ketemu letakkan kode di bawah ini diantara kode </ul></div> dan </div> seperti contoh di bawah ini
    <div id='NavbarMenu'> 
    <div id='NavbarMenuleft'> 
    <ul id='nav'> 
    <li><a expr:href='data:blog.homepageUrl' title='This Blog Address'>Beranda</a></li> 
    <------- Bla bla bla ----------> 
    <------- Bla bla bla ----------> 
    </ul></div>

    <div id='search'>
    <form action='http://jayaputrasbloq.blogspot.com/search' id='searchform' method='get' style='display:inline;'>
    <input id='searchbox' maxlength='160' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Search...&quot;;}' onfocus='if (this.value == &quot;Search...&quot;) {this.value = &quot;&quot;}' type='text' value='Search...'/>
    <input class='btn' name='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinOHBtfVdsfj5-dYe-cyH03mTTjtBjnHW7Pe5qud2kn-4PyK6VYVT2fSMie2KkApAEM8hIJhRV01hyphenhyphen4wVoOZfVINyGnQSumsOidBlLSGBeahzaByqH12rveFaRGGMl1SgcacoJWkIZjhMF/s1600/1zehw2f_th.jpg.png' type='image' value='Go'/>
    </form>
    </div>

    </div>
  • Ganti tulisan yang berwarna merah dengan alamat blog anda
  • Jika anda ingin mengganti icon dari search engine tersebut ganti link yang berwarna biru dengan alamat icon yang anda punya.
  • Kemudian simpan tamplate dan lihat hasilnya.
Untuk yang belum menerapkan tutor cara menambah menubar di blog saya sarankan untuk menerapnya terlebih dahulu. karna bisa jadi kode menubar yang anda miliki belum tentu sama dengan tutor panduan sukses blogger miliki. salam sukses.......

Tidak ada komentar:

Posting Komentar