Minggu, 05 Agustus 2012

Membuat Tooltip Kotak Search Box (Tooltip Kotak Pencarian)

Yuk! Menghias Kotak Pencarian Blogger!

Membuat Tooltip Kotak Search Box (Tooltip Kotak Pencarian)

Lain dengan materi posting Pelajaran Blog beberapa waktu lalu yang membahas juga seputar kotak pencarian,kali ini kita hanya sebatas menghiasnya saja (pembaca:yah..ga seru dong!)

Tunggu dulu sob,ini bisa diterapkan di form apa aja kok,ya salah satunya pada form kotak pencarian yang akan dibahas pada sore hari ini :D

Memang contohnya seperti apa sih?,coba saja sobat lihat kotak pencarian di SINI

Gimana? ingin mencobanya sob? ikuti ya gan.

Langkah Memodifikasi Kotak Pencarian dengan Tooltip jQuery


Pertama,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) kemudian pilih tab Edit HTML (gb2) dan jangan lupa contreng checklist 'Expand Widget Templates' (gb3)

kotak pencarian popup.
(1)


popup tooltip search box jquery.
(2)


trik cara membuat tooltip serach box.
(3)


Kemudian cari kode berikut (gunakan Ctrl+F untuk mempermudah pencarian):
</head>

Setelah sobat ketemukan kode </head> tersebut,tepat diatasnya letakkan script berikut:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<link href='http://mrpujiajadeh.comze.com/gips.css' rel='stylesheet' type='text/css'/>
<script src='http://mrpujiajadeh.comze.com/gips.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function () {
$(&#39;input#purple&#39;).gips({ &#39;theme&#39;: &#39;purple&#39;, autoHide: true, text: &#39;This is purple tooltip, auto hide after pausess time elapses.&#39; });
$(&#39;input#green&#39;).gips({ &#39;theme&#39;: &#39;green&#39;, placement: &#39;left&#39; });
$(&#39;input#yellow&#39;).gips({ &#39;theme&#39;: &#39;yellow&#39;, autoHide: true, placement: &#39;right&#39; });
$(&#39;input#red&#39;).gips({ &#39;theme&#39;: &#39;red&#39;, placement: &#39;bottom&#39; });
});
</script>

Setelah itu simpan templates.

Kemudian,sobat pergilah ke Dashboard lalu pilih Tata Letak (gb1) dan klik Add Gadget (gb5) kemudian pilih HTML/Javascript (gb6),lihat gambar:

membuat kotak pencarian jquery
(5)


how to create a jquery css popup tooltip for search box blogger
(6)



Setelah itu pilih HTML/Javascript (gb5) dan letakkan kode berikut:
<div id="demo"><form action='pelajaran-blog.blogspot.com/search' id='searchform' method='get'>
<input class="searchinput" id="red" name="q" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Cari artikel disini..&quot;;}" onfocus="if (this.value == &quot;Cari artikel disini..&quot;) {this.value = &quot;&quot;;}" type="text" value="Cari artikel disini.." />
</form></div>

Simpan template sobat dan lihat hasilnya :D

Ref:

Tidak ada komentar:

Posting Komentar