cara membuat search jquery

Widget search sangat berguna buat blog, begitu juga dengan widget search jquery ini, cara membuat search jquery pada postingan kali ini, mengandalkan sistem script jquery sebagai motoriknya, hal ini menjadikan widget search jquery pada postingan cara membuat search jquery ini memiliki tampilan yang menarik. Untuk melihat tampilan dari tutorial cara membuat search jquery ini, silahkan klik demo dibawah, jangan lupa bila anda tertarik dengan tutorial cara membuat search jquery ini pada halaman blog anda, silahkan simak penjelasan cara membuat search jquery dibawah ini, langsung saja menuju TKP.

Demo

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 cara membuat search jquery dibawah ini, pastekan diatas code ]]></b:skin> tadi atau bila template blog anda memakai </style> silahkan pastekan kode CSSnya tepat diatas </style> template anda.

/*****************************************
Name : cara membuat search jquery
By : Rivai Silaban | Blog Design
Update : Selasa, 12 Nopember 2013
******************************************/
#bdrssearch fieldset {
width:240px;
position:relative;
display:block;
border:none;
}div.bdrsform {
width:180px;
padding:5px 15px 7px 15px;
border-radius:20px;
border:1px solid #c6d2db;
border-top:1px solid #b4c1cb;
box-shadow:inset 0 1px 2px #666;
float:right;
background-color: #F8F8F8;
}div.bdrsform.focus {
border:1px solid #111;
box-shadow:0 0 6px #999, inset 0 1px 2px rgba(0,0,0,0.08);
border-radius:0px;
}input#s {
width:100%;
border:0;
background:transparent;
height:16px;
color:#666666;
text-shadow:0 1px 1px #fff;
}input#s:focus {
outline:none
}input#searchSubmit {
width:43px;
height:26px;
text-indent:-9999px;
overflow:hidden;
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtW3sWuU6GFwDjtu2Uq-yEvaZISDBohbSFj1f-2AoHeR27_2MZyMnvk63IThvrpu9vKdf7jberyPm8F9El0hju9OfYGe_BVnC5gkYFIGSweV-L68hXoTDC9XsTfkinakc1j29TJbXvv8M/s1600/searchbdrs.png') no-repeat ;
border:0;
position:absolute;
top:7px; right:20px;
z-index:5;
display:none;
cursor:pointer;
margin-top:3px;
}/*** Blog Design CSS cara membuat search jquery and ***/

Install Script

1. Setelah anda selesai menyematkan CSS cara membuat search jquery saatnya anda menyematkan kode scriptnya pada tag html/xml template anda.
2. Pada Edit HTML template anda silahkan cari kode </head>
3. Setelah ketemu copy script dibawah ini dan pastekan diatas kode </head>
4. Perlu anda ingat bila pada template anda sudah ada kode JQUERY diatas versi 1.4 pada script tulisan kode warna biru dibawah kode tulisan warna BIRU tersebut tidak usah dikut di Copy. Bila sebaliknya versinya dibawah silahkan copy semua kode tersebut.

<!-- Rivai Silaban | BLOG DESIGN script cara membuat search jquery start -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

<script type="text/javascript" src="http://yourjavascript.com/321111910106/script.js"></script>
<!-- Rivai Silaban | BLOG DESIGN script cara membuat search jquery End -->

Install Program Tag HTML

• Setelah anda selesai memasang code script cara membuat search jquery saatnya anda dipaksa untuk memasang kode tag htmlnya pada halaman blog anda agar muncul pada saat dibrowsing. Untuk pemasangan code tag htmlnya silahkan anda pasang sesuai dengan kebutuhan halaman blog anda.

<!-- Rivai Silaban | BLOG DESIGN code cara membuat search jquery start -->
<div id="main">
<form action="URL BLOG ANDA /search" method='get' id="bdrssearch">
<fieldset>
<div class="bdrsform">
<input type="text" name="g" id="s" value="find other articles this here !!" />
</div>
<input type="submit" id="searchSubmit" value="" />
</fieldset>
</form>
</div>
<!-- Rivai Silaban | BLOG DESIGN code cara membuat search jquery End -->

Kesimpulan

Cara membuat search jquery telah didesain untuk memudahkan anda dalam memasangnya pada halaman blog kesayangan anda, Untuk tulisan code warna MERAH, ganti dengan URL blog anda. Silahkan edit code cara membuat search jquery sesuai dengan kebutuhan anda.

Bila teman teman mengalami masalah dalam pemasangan tutorial cara membuat search jquery ini atau ada kesalahan penulisan kode silahkan hubungi saya atau share bersama saya lewat form komentar dibawah ini. Pergunakan semua fasilitas di blog ini untuk mempermudah anda.

cara membuat search jquery
Selasa, 12 Nopember 2013
By : Rivai Silaban | Blog Design

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.... !!! .

Admin Rivai Silaban

Share article with : Google+ Facebook Twitter

Di posting oleh : Unknown Update pada : 12:40 PM