KETIKA KOTAK PENCARIAN BLOGGER MENJADI LEBIH DARI SEKEDAR ITU | editblogtema editblogtema: KETIKA KOTAK PENCARIAN BLOGGER MENJADI LEBIH DARI SEKEDAR ITU

Logtema

×
tutorial dan teknik

KETIKA KOTAK PENCARIAN BLOGGER MENJADI LEBIH DARI SEKEDAR ITU

Siapa bilang kotak pencarian pada halaman web atau halaman blogger itu hanya sebagai tool pembantu navigasi halaman blogger? Sobat pasti akan tertarik kalau saya katakan "tombol pencarian" itu ternyata bisa berfungsi sebagai hiasan, penghias sebuah halaman blogger sehingga terlihat semakin cantik dan menarik!
kotak pencarian yang beda karena sekaligus menjadi hiasan sebuah halaman blog

Bahkan bukan tidak mungkin akan menjadikan orang ingin mencobanya bukan?

Yang minat untuk menghiasi blog sobat dengan kotak pencarian unik dengan photo atau bingkai yang beda? Saya bisa membantu buatin. Akan tetapi jika sobat pingin tau cara membuatnya sih tidaklah terlalu sulit. Malah menurut saya  mudah sekali, caranya ya cukup masuk ke pengaturan (dasbor) blogger:
  1. Tambahkan gagdet/widget
  2. Pilih widget HTML/JavaScript
  3. Setelah terbuka kotak kosong HTML/JavaScript cukup isikan dengan kode dibawah ini:

<center><style>
    #searchbox {
        background: url(https://3.bp.blogspot.com/-ys4mHWKfpME/XGlSLfoRF7I/AAAAAAAAj3k/CROQhRWxi7MMCL4ExzY4ShrmGJgND9g0ACLcBGAs/s1600/Adobe_20190217_192211.png) no-repeat;
        width: 230px;
        height: 75px;
    }

    input:focus::-webkit-input-placeholder {
    color: transparent;
    }

    input:focus:-moz-placeholder {
    color: transparent;
    }

    input:focus::-moz-placeholder {
    color: transparent;
    }

    #searchbox input {
        outline: none;
    }

    #searchbox input[type="text"] {
        background: transparent;
        padding: 5px 0px 5px 20px;
        margin: 10px 15px 0px 0px;
        border-width: 0px;
        font-family: "Brush Script MT", cursive;
        font-size: 20px;
        color: #6495ED;
        width: 65%;
        font-weight: bold;
        display: inline-table;
        vertical-align: top;
    }

    #button-submit {
        background: url(http://1.bp.blogspot.com/-zyJC7B-dSaU/VDv8-68fNJI/AAAAAAAAAe0/pkUajFr2kcQ/s1600/magnifier.png) no-repeat;
        border-width: 0px;
        cursor: pointer;
        margin-top: 10px;
        width: 19px;
        height: 25px;
    }

    #button-submit:hover {
        background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
    }

    #button-submit:active {
        background: url(http://1.bp.blogspot.com/-pIwlQno5_6U/VDxR9OdzvYI/AAAAAAAAAfM/YDBC2P705tc/s1600/magnifier-hover.png) no-repeat;
        outline: none;
    }

    #button-submit::-moz-focus-inner {
        border: 0;
    }
    </style>

    <form id="searchbox" method="get" action="/search" autocomplete="off">
        <input class="textarea" name="q" type="text" size="15" placeholder="Cari disini..." />
        <input id="button-submit" type="submit" value="" />
    </form></center>

Save Tema.
Untuk menempatkan kotak pencarian di posisi tengah header tambahkan pembuka <center> dan lalu ditutup dengan </center> Namun kunci desain tersebut hanyalah pada link background yang saya sorot warna kuning. Sobat perlu membuat sebuah gambar dengan ukuran tertentu menguploadnya ke halaman web. Link gambar sobat itulah yang akan menjadi pengganti link yang saya sorot warna kuning diatas.

Lihat

EFEKTIP MEMBUAT TAMPILAN BLOG MENJADI BEDA

Cara ini ternyata efektip membuat tampilan blog menjadi beda. Sobat bisa menghiasainya dengan bingkai pemandangan alam, kartun, photo profile dll. Pokoknya dengan kreativitas tanpa batas. Pada demo diatas kami menerapkannya untuk template bawaan blogger CONTEMPO

Kami telah menerima pesanan:

  • Membuat LOGO
  • Menghias header blog dengan elemen bersih dan ringan
  • Menu navigasi ringan, mobile dan responsive

Hanya bercanda saja untuk pesanan ini, kami sudah terlalu sibuk dengan pekerjaan dan usaha kecil kecilan kami di dunia nyata 🤣🤣🤣

www.editblogtema.net

Bagikan (share):

6 comments:

  1. Wah... Keren juga ya mas ternyata, bisa di modif gitu. Bloognya bisa jadi lebih keren....

    ReplyDelete
  2. Keren, kreatif asli tukang terobos nih blog😂

    ReplyDelete
  3. Sepertinya akan lebih menarik kalau dipasang di dalam blog. Inspiratif banget artikelnya.

    Jika ada waktu, silakan mampir ke blog kami: ANEKA CARA BLOG

    Terima kasih.

    ReplyDelete
  4. Kreatif nih... ada aja idenya.

    ReplyDelete
    Replies
    1. Awalnya cari cari tombol search, tapi bentuknya sama semua. Jadi saya coba buat sendiri. Sekarang sudah dapat 6 buah tombol pencarian unik tanpa perlu memberatkan loading...

      Ada yang style CSS, ada yang image background dengan link. Ada yang hanya manipulasi tombol bawaan robah warna dan border dash. Pokoknya banyak trik 😂

      Delete

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan