Home » » Cara Membuat Widget Kotak Search Di Blog

Cara Membuat Widget Kotak Search Di Blog

Ditulis oleh Dicky Fajriansyah pada Sabtu, 20 April 2013 | 08.43



Sudah seminggu Dicky's gak sempat ngeposting, dikarenakan ada acara. Dan kali ini Dicky's akan menshare Tips Blog yang berjudul Cara Membuat Widget Kotak Search Di Blog | Kotak Search dapat memudahkan kita untuk menjelajah lebih mudah dan simple saat sedang mencari artikel, kotak search yang Dicky's share screenshotsnya seperti gambar diatas dan jika belum jelas, sobat bisa lihat kotak search yang Dicky's pasang di blog. Oke, gak usah panjang lebar, ini tipsnya.

Berikut Cara Membuat Widget Kotak Search Di Blog :

  • Login ke Blogger, atau klik disini
  • Tata Letak --> Tambahkan Gadget --> HTML/JavaScript
  • Copy kode dibawah ini dan letakkan ke kolom HTML/JavaScript.

    <form action="/search" style="display:inline;" method="get">
    <input id="s" name="q" type="search" placeholder="Cari Artikel Disini"/>
    </form>
    <style>
    #s {
        margin: 0 auto;
        -webkit-appearance: none;
        -moz-appearance: none;
        padding: 12px 48px 12px 12px;
        -webkit-border-radius: 200px;
        -moz-border-radius: 200px;
        border-radius: 200px;
     width: 200px;
        height: 16px;
        color: #3a4449;
        border: none;
        outline: none;
        -webkit-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
        -moz-box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
        box-shadow: 0 0 0 1px rgba(0,0,0,.3), 0 2px 0 rgba(255,255,255,.3), inset 0 1px 2px rgba(0,0,0,.2);
     position: relative;
        z-index: 2;
        background: #fff url(http://2.bp.blogspot.com/-RdCoLqn34t4/UDeUFSTJ17I/AAAAAAAAKqg/GxdClZ5RjXg/s1600/Search.png) center right no-repeat;
    }
    #s::-webkit-input-placeholder, #s:-moz-placeholder {
        color: #607078;
    }
    </style>


    Keterangan :
    - Teks yang berwarna BIRU yaitu tulisan yang berada dikotak search, ganti dengan tulisan terserah.
    - Kode yang berwarna MERAH yaitu panjang kotak search, ganti dengan angka terserah sesuai keinginan anda.

    Semoga Tips Blog yang berjudul 
    Cara Membuat Widget Kotak Search Di Blog bisa bermanfaat.....
    dan selamat mencoba......
    Dilarang menduplikasi dan menyerbarluaskan artikel tanpa menyertakan sumbernya. Jika melanggar, berarti telah melanggar UUD 1945 No. 19 Tahun 2002 Tentang Hak Cipta dan akan dijatuhi denda.
    thumbnail Title: Cara Membuat Widget Kotak Search Di Blog
    Posted by:Dicky Fajriansyah
    Published :2013-04-20T08:43:00-07:00
    Rating: 5
    Reviewer: 100 Reviews
    Cara Membuat Widget Kotak Search Di Blog

    0 komentar:

    Posting Komentar