Membuat Berbagai Macam Widget Search untuk blog

Hmm.. setelah 4 hari keluyuran entah kemana tanpa memposting satu artikel pun jadi kangen juga ingin posting lagi nih.. Padahal dari dua hari yang lalu sudah niat ingin posting. Tapi berhubung waktu terakhir pengecekan kapasitas blog ini yang hasilnya sangat membuat saya pusing karena ternyata blog ini sangat berat. Ya sudah untuk mengurangi bera dari blog ini, saya harus merelakan code-code yang kurang berguna diantaranya pengurangan code css, javascript, dll.

Masuk ke tujuan utama kita yaitu membuat berbagai macam bentuk atau style search box untuk blog. Nah untuk membuat widget pencari di blog sekarang gak usah susah susah.. ni caranya


1. Widget search dengan javascript


  • Login ke blog

  • Pilih tataletak

  • klik tambah gadget lalu pilih html/javascript

  • Copy code dibawah lalu pastekan pada form widget tadi

  • <script src="http://www.geocities.com/ebenk_789/search.js" type="text/javascript"></script>


    2. Widget search box simple


  • Login ke blog

  • Pilih tataletak

  • klik tambah gadget lalu pilih html/javascript

  • Copy code dibawah lalu pastekan

  • <div class="style1" align="center">
    <form id="searchform" action="/search" method="get">
    <p>
    <input id="q" onfocus="if (this.value == 'Cari Artikel ...') {this.value = '';}" value="Cari Artikel ..." name="q" onblur="if (this.value == '') {this.value = 'Cari Artikel ...';}" size="20" type="text">
    <input style="padding-top: 3px;" src="http://img84.imageshack.us/img84/2457/viewmagsc7.png" name="image" height="19" type="image" width="20">
    </p>
    </form>
    </div>






    3. Widget classic search


  • Login ke blog

  • Pilih tataletak

  • klik tambah gadget lalu pilih html/javascript

  • Copy code dibawah lalu pastekan

  • <style>
    /* cari1
    ----------------------------------------------- */
    .cari1 {
    margin:0pt;
    padding:0pt;
    }

    .cari1 span {
    margin:0pt;
    padding:0pt;
    }

    #search{
    display: none;
    }

    #sidebar form {
    margin:0;
    padding:5px 0;
    clear:both;
    }
    .searchtitle {
    font:bold 15px "Trebuchet MS", sans-serif, "Lucida Sans", Tahoma!important;
    color:#fff;
    }
    #searchform {
    margin: 5px auto ;
    padding: 0;
    }

    #searchform #s {
    height:15px;
    width:130px;
    margin-left:10px;
    font:10px Verdana, Arial, Helvetica, sans-serif;
    border:1px solid #000;
    }

    #searchsubmit {
    padding:0;
    background:#000;
    color:#fff;
    border:none;
    width:48px;
    height:20px;
    font:11px "Trebuchet MS", "Lucida Sans Unicode", Verdana;
    }


    #searchsubmit:hover {
    background:#fff;
    color:#000;
    }
    </style>

    <div class="cari1">
    <span>
    <form id="searchform" action="/search" method="get">

    <table border="0" cellpadding="0" cellspacing="3">
    <tbody>
    <tr>
    <td><input id="s" value="" name="q" type="text"></td>
    <td><input id="searchsubmit" value="Search" type="submit"></td>
    </tr>
    </tbody>
    </table>
    </form>
    </span>
    </div>

    4. Widget cool search

  • Login ke blog

  • Pilih tataletak

  • klik tambah gadget lalu pilih html/javascript

  • Copy code dibawah lalu pastekan

  • <style>
    /* ----- cari ebenk789 ----- */

    .txt_cari{
    background-image:url(http://www.iconlet.com/icons/crystal09/16x16/search.png);
    background-position:2px 2px;
    background-repeat:no-repeat;
    padding-left:20px;
    border:1px solid #999999;
    padding-right:2px;
    padding-bottom:2px;
    padding-top:2px;
    color:#006699;
    background-color:#FFFFFF;
    }
    </style>

    <div align="center">
    <form id="searchthis" action="/search" style="display: inline;" method="get"><input id="search-box" class="txt_cari" name="q" type="text"><input id="search-btn" value="Cari" type="submit"></form>
    </div>


    Udah ah.. kebanyakan pusing... Coba aja ya..
    Klo masih gak bisa.. tanyain aja ya..


    12 comments

    waduh,... macam2 style ada ya...
    heh... bagus design kamu ni :)

    Reply

    Wah, bisa pilih2 nich Bro.. Trims atas tipsnya

    Reply
    -sekedar iseng- mod

    oi bro jd klu mau ganti gambarnya tinggal ganti background-image:url(http://www.iconlet.com/icons/crystal09/16x16/search.png)?

    Reply

    ========= ebenk789 ============

    @ Ir. hydir: Thanks mas.. :)

    @ Imtihan: Sama-sama.. Silahkan Pilih Aja..

    @ sekedar iseng: Yap.. Ganti aja alamat gambarnya tapi ukurannya yang kecil aja..

    ======== berbagi itu indah =========

    Reply

    wah mantep juga ya mas... dah bisa bikin widget gituan... sayang blog saya udh ada see kalo blm mau pasang juga...
    mas yang membuat berat blog bisa juga animasi daun/ bunga yang warna putih yang berjatuhan itu lho

    Reply

    ======== ebenk789 =========

    @torik : mkaSih.. Klo buat efek salju itu kayaknya agaK susuaH buat di ilangin coz efek itu udah jadi ciri Khas dari blog ini.. Dan gak terlalu berat koK ^_^

    @Brigadista : Sip..!!!

    ===== berbagi itu indah ======

    Reply

    @torik
    stuju gan..
    ya'nya yg bikin berat saljunya :)

    Reply

    yups,,,

    thanks dech atas artikelnya yaw.....

    tapi aq masi bingung ,gmana caranya agar kotak kmntarx selalu ada dibawah postingan seperti pada blog mas ini.....: )

    Reply

    trz cara pasangnya biar dibawah header c gimana?

    masih baru belajar nich, blog kmu bagus simple, rapi n enk dibaca..

    Reply

    mampir malem,,maap nie baru blogging lagi,,
    senang brjumpa kawan,,

    Reply

    contoh widget kayak lintasberita gimana ya ? .. bisa g ?

    Reply

    Post a Comment