Untuk mendapatkan space iklan dihalaman ini silahkan hubungi owner Blog Design, Kami akan secepatnya merespon dan mempertimbangkan letak dari iklan text dan banner anda...

Saturday, August 3, 2013

cara membuat kotak pencarian artikel postingan di blog

Membuat kotak pencarian artikel postingan di halaman blog atau search box, merupakan suatu tehnik yang paling jitu untuk membuat para pengunjung blog anda senang berlama lama di halaman blog anda, hal ini menjadi keuntungan yang besar pada halaman blog anda. Memanfaatkan aplikasi search ini sebenarnya membuat para pengunjung blog agar lebih mudah untuk mencari berbagai artikel yang dibutuhkan dari halaman blog. Setelah saya semalam mau ngirim email pada seorang sahabat, ehhh ternyata saya melihat satu pesan masuk, ada seorang teman yang ingin memesan untuk dibuatkan search artikel postingan dihalaman blognya, sehingga saya sekalian saja posting di halaman blog ini mana tau teman teman yang lain membutuhkannya kan dah lumayan daripada artikel ini hanya untuk dihapus saja. Oke saya rasa penjelasan untuk kegunaan search artikel postingan ini tidak usah saya jabarkan lebih detail lagi sebab teman teman, sudah lebih memahaminya dari pada saya sendiri, kita langsung saja menuju TKP.


cara membuat search artikel postingan diblog


Install Program CSS


  1. Login ke dashboard anda
  2. Masuk ke "TEMPLATE" lalu klik " Edit HTML "
  3. Cari code ]]></b:skin> 
  4. Copy Code script CSS dibawah ini, pastekan diatas code ]]></b:skin> tadi

  5. #BD-search { background: transparent url("https://lh6.googleusercontent.com/-7wrMOr1WoFk/UfySufqsgtI/AAAAAAAABqI/GAWXng8yp9k/h49/search-black.png") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; }
    #BD-search form { height: 44px; }
    #BD-search form p { display: block; margin: 0; padding: 14px 0 0 70px; }
    #BD-search form p input {
    width: 285px;
    border: 0;
    background: transparent none;
    color: #FFFFFF;
    font-weight: 300;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 14px;
    text-shadow: 1px 1px #000;
    }



  6. Perhatikan kode CSS diatas,
    Kode yang berwarna MERAH adalah link gambar latar belakang
    Kode warna BIRU adalah warna huruf
    Kode warna KUNING adalah jenis huruf
    Kode warna HIJAU adalah ukuran hurufnya

  7. Untuk meletakkan kode htmlnya silahkan anda pasang dimana tempat yang cocok buat halaman blog anda, copy kode dibawah ini kemudian pastekan ditempat uyang layak untuk halaman anda. Anda dapat memasangnya didalam widget ataupun di tubuh html/xml blog anda.


    <div id='BD-search'>
    <form action="URL BLOG ANDA /search" id='BD-search form' method='get'>
    <p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel terkait...&quot;;}' onfocus='if (this.value == &quot;Cari artikel terkait...&quot;) {this.value = &quot;&quot;}' type='text' value='Cari artikel terkait...'/></p>
    </form>
    </div>


  8. Perhatikan kode diatas..
    Kode warna MERAH ganti dengan URL halaman blog anda
    Kode warna BIRU adalah isi dri search artikel postingan.
  9. Setelah semuanya sudah anda pastikan dengn baik saatnya anda simpan perubahan dan lihat hasilnya.

Untuk meningkatkan kreativitas dan keselarasan warna, anda tidak perlu ragu, silahkan lihat jenis search artikel postingan ini, sya sudah membuatnya agar lebih banyak pilihan untuk sahabat sahabat bloger saya.


https://lh5.googleusercontent.com/-EnzeA6yDZvE/UfyS1Ta_LZI/AAAAAAAABqY/fGkKVRdfq4E/h49/search-b.png
search biru

https://lh3.googleusercontent.com/-2sJWcnISz_0/UfyS75WLydI/AAAAAAAABqw/i2O_wolucI4/h49/search-m.png
search merah

https://lh6.googleusercontent.com/-qUiNGacIaO8/UfyS9fbs0II/AAAAAAAABq4/Eb93_EOnYtg/h49/search-k.png
search kuning

https://lh4.googleusercontent.com/-TxZKqtR3tZg/UfyS6bGKq-I/AAAAAAAABqo/BsQ78oO3i7w/h49/search-h.png
search hijau

https://lh4.googleusercontent.com/-H4nq9Z72x7A/UfyS15FEnkI/AAAAAAAABqg/fqiehc3Q9EA/h49/search-brown.png
search abu abu


Kesimpulan

Agar lebih leluasa menganti tampilan search artikel postingan ini pada halaman blog anda sesuai dengan warna tampilan halaman blog anda, Coba anda perhatikan kode warna MERAH pada kode CSS yang berada pada spoler yang paling atas. Kode tersebut adalah URL dari background search artikel postingan tersebut, bila anda ingin menggantinya dengan gambar yang telah tersedia diatas ini silahkan anda ganti hanya kode CSS yang berwarna MERAH tersebut dengan kode dari gambar background yang ada diatas ini.

Terimakasih atas kunjungannya,Bila anda suka dengan artikel ini silahkan JOIN TO MEMBER BLOG atau berlangganan geratis Artikel dari blog ini, daftarkan email anda pada form subscribe dibawah halaman . Pergunakan vasilitas diblog ini untuk mempermudah anda. Bila ada masalah dalam penulisan artikel ini silahkan kontak saya melalui kotak komentar yang ada dibawah atau gunakan fasilitas yang ada diblog ini untuk menghubungi saya.

Salam Blogger.... !!! .

Me

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter
Di posting oleh : Rivai Silaban Update pada : 1:33 PM

0 komentar :

Post a Comment

1. Komentar SPAM Akan secepatnya dihapus
2. Pastikan untuk " Berlangganan Lewat Email " untuk membangun kreatifitas blog ini
3. Cek komentar masuk sebelum bertanya.
4. Link aktiv tidak akan berpungsi.
5. Dilarang menyebarluaskan artikel tanpa persetujuan dari saya.
6. Untuk mengajukan pertanyaan diluar postingan diatas, silahkan klik " Forum Diskusi "
7. Bergabung dengan kami untuk menjadi member Klik " Join to Member "
8. Komentar yang mengandung code tag HTML, konversikan terlebih dulu silahkan klik " Konversi Kode "

Salam bloger .. !!
Pergunakan semua fasilitas di Blog ini untuk mempermudah anda..
Konversi Kode Forum Diskusi Join to Blog