Update! Membuat Tooltip Kotak Search Box Blogger

Yuk! Menghias Kotak Pencarian Blogger!

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)


(1)


(2)


(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:


(5)


(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:

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)
Membuat Form Kotak Pencarian Dengan Show Hide Value / Auto Value
Membuat Auto Clear pada Mesin Pencari
Membuat Search Engine sendiri pada Blog

Membuat Tooltip Kotak Search Box (Tooltip Kotak Pencarian)

Yuk! Menghias Kotak Pencarian Blogger!

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)


(1)


(2)


(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:


(5)


(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:

Cara Membuat Pencarian Multi Search Box (Kotak Pencarian Ganda)
Membuat Form Kotak Pencarian Dengan Show Hide Value / Auto Value
Membuat Auto Clear pada Mesin Pencari
Membuat Search Engine sendiri pada Blog

Cara Membuat ToolTip Ber-Link Di Dalamnya

Cara Membuat Tool Tip / Mini Popup Memiliki Link Anchor dan Menu Pilihan Didalamnya

Meskipun tutorial membuat tooltip link ini diposting tengah malam kaya ghene(bahasa gaul sekarang gan pent-),tapi tetep semangat ya bro,langsung aja deh,coba sobat arahkan kursor pada gambar link download di posting KLIK DISNI,nanti akan keluar tooltip keren yang memiliki link didalamnya (adapun masalah apa itu tooltip dan pembahasannya telah disharing beberapa waktu lalu di SINI pent-):

Gambar screenshotnya akan tampil seperti ini gan:

Gimana gan,pingin bikin juga buat menghias blog kamu,betul sob,kita bisa membuat tooltip yang didalam tool tip tersebut memiliki link bahkan gambar sekalipun,yuk kita intip gimana sih cara ngbikinnya :D

Langkah Membuat Coda Bubbles dengan jQuery

Pertama langkahnya seperti biasanya ya hanya pilih Dashboard (gb.1),lalu Tata Letak (gb.2) kemudian contreng tulisan Expands Widget Templates (gb.3).

(1)


(2)


(3)

Nah,selanjutnya cari kode ]]></b:skin> (gunakan Ctrl+F di keyboard sob),setelah ketemu tinggal letakkan kode CSS berikut tepat diATAS kode ]]></b:skin> tersebut.

.bubbleInfo {
position: relative;
}

.popup {
font-size:11px;
width:200px;
background:#F3F3F3;
padding:3px 5px;
border:1px solid #CCC;
position: absolute;
display: none; /* keeps the popup hidden if no JS available */
bottom:60px;
-moz-border-radius:5px;
-khtml-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
}
.popup:after{
border:15px solid;
border-color: #F3F3F3 transparent transparent transparent;
content:"";
display:block;
height:;
width:;
position:absolute;
bottom:-30px;
left:80px;}

Setelah itu cari kode </head> gunakan Ctrl+F pada keyboard untuk mempermudah pencarian,setelah sobat menemukan kode </head> letakkan persis diATASnya kode script berikut:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2' type='text/javascript'/>
<script src='jquery.js' type='text/javascript'/>

<script type='text/javascript'>
$(function () {
$(&#39;.bubbleInfo&#39;).each(function () {
// options
var distance = 10;
var time = 250;
var hideDelay = 500;

var hideDelayTimer = null;

// tracker
var beingShown = false;
var shown = false;

var trigger = $(&#39;.trigger&#39;, this);
var popup = $(&#39;.popup&#39;, this).css(&#39;opacity&#39;, 0);

// set the mouseover and mouseout on both element
$([trigger.get(0), popup.get(0)]).mouseover(function () {
// stops the hide event if we move from the trigger to the popup element
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// don&#39;t trigger the animation again if we&#39;re being shown, or already visible
if (beingShown || shown) {
return;
} else {
beingShown = true;

// reset position of popup box
popup.css({
top: -100,
left: -33,
display: &#39;block&#39; // brings the popup back in to view
})

// (we&#39;re using chaining on the popup) now animate it&#39;s opacity and position
.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 1
}, time, &#39;swing&#39;, function() {
// once the animation is complete, set the tracker variables
beingShown = false;
shown = true;
});
}
}).mouseout(function () {
// reset the timer if we get fired again - avoids double animations
if (hideDelayTimer) clearTimeout(hideDelayTimer);

// store the timer so that it can be cleared in the mouseover if required
hideDelayTimer = setTimeout(function () {
hideDelayTimer = null;
popup.animate({
top: &#39;-=&#39; + distance + &#39;px&#39;,
opacity: 0
}, time, &#39;swing&#39;, function () {
// once the animate is complete, set the tracker variables
shown = false;
// hide the popup entirely after the effect (opacity alone doesn&#39;t do the job)
popup.css(&#39;display&#39;, &#39;none&#39;);
});
}, hideDelay);
});
});
});

</script>

Nah,untuk menampilkannya pada widget coba pilih Tata Letak / Rancangan seperti gambar no (1),dan klik tulisan Add New Widget atau Tambah Gadget,lihat Gambar no (4)


(4)


(5)

Selanjutnya pilih HTML/Javascript lihat Gb(5)kemudian letakkan kode berikut:

<div class="bubbleInfo"><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" trigger=""><img class="trigger" src="http://3.bp.blogspot.com/-OyJmeSaNDXA/T60LK6s8WxI/AAAAAAAABkQ/x6UY2x9CGw8/s1600/download%2Bbutton%2Bpelajaran%2Bblog.jpeg" height="65" width="150" /></a><div class="popup"><table><tbody><tr> <td>Nama File</td><td>: Benarkah Bid'ah Itu Sesat?</td></tr><tr><td>Ukuran</td><td>: 337kb</td></tr><tr> <td>Hosting </td> <td>: Google Code </td></tr><tr><td>Url Link </td> <td>: <small><a href="http://belajargooglecode.googlecode.com/files/Siapa%20Bilang%20Bid%27ah%20itu%20sesat.mp3" target="_blank">Klik Di Sini</a></small></td> </tr><tr> <td>Referensi </td><td>: <small><a href="http://pelajaran-blog.blogspot.com/" target="_blank">Pelajaran Blog dan Seo</a></small></td></tr>
</tbody></table></div></div>

Lalu simpan dan lihat hasilnya,oh ya,kode yang bercetak tebal sesuikan saja ya,udah terlalu malem soalnya gan,see you ya :D

Cara Membuat ToolTip Sederhana

★ Membuat Tooltip Original Disini,pelajaran blog sekali lagi hanya untuk tutorial blog pemula saja. Jadi,inti dari isi artikel pada blog ini,hanya ditujukan bagi yang awam akan dunia blog. Salah satunya,seperti yang saya alami sebelumnya akan ketidak tahuan suatu event. Misal,saat saya ingin tahu bagamana membuat tulisan nongol saat mouse diatasnya sebagai media keterangan. Saya tidak tahu bahwa itu adalah tooltip,jika anda sudah mengenal Microsoft Word,anda pasti sudah tak jarang menjumpai ToolTip ini. Untuk penjelasan lebih detail masalah tooltip,anda bisa baca di sini. Nah,kali ini saya hanya ingin share masalah tooltip ini. Jika anda sudah mengerti soal tooltip ini,anda boleh membaca artikel yang lain,namun bagi anda yang belum tahu cara membuat tooltip,saya akan membagikan info ini disamping juga untuk mengisi kekosongan pada blog ini. ★Cara Membuat Tooltip Pada Gambar/Image Anda sudah tahu khan cara meletakkan gambar pada blog? jika belum tahu anda bisa baca tutorialnya disini. Nah,untuk membuat tooltip pada gambar alias Image,anda hanya menyisipkan kode: Title="Text Tooltip Yang Kan Muncul" Contoh pemakaian kodenya,anda bisa lihat barisan kode berikut: <img src="http://1.bp.blogspot.com/_n7xseT2-HDU/SveGmH-vRcI/AAAAAAAAAbo/T-xpQB1BHC0/s200/cara+membuat+tooltip.jpg" title="Saya Sedang Belajar Membuat Tooltip"> **Untuk http://1.bp.blogspot.com/_n7xseT2-HDU/SveGmH-vRcI/AAAAAAAAAbo/T-xpQB1BHC0/s200/cara+membuat+tooltip.jpg,anda ganti sesuai alamat/url gambar yang ingin anda pasang. Sedangkan tulisan Saya Sedang Belajar Membuat Tooltip,rubahlah sesuai keinginan anda. Dari kode diatas,akan menghasilkan seperti dibawah ini [coba anda letakkan mouse diatas gambar ini]: Semoga,gambar diatas tidak mirip dengan seseorang yang sedang membaca artikel blog ini,xixixixi.. ★Cara Membuat Tooltip Pada Link/Anchor Sama seperti langkah membuat tooltip pada gambar diatas,hanya menyisipkan kode Title="Text Tooltip Yang Kan Muncul" Contoh pemakaiannya,seperti barisan kode berikut ini: <a href="http://pelajaran-blog.blogspot.com/" title="Cara Membuat Tooltip Bro!">Cara Menghias Tooltip</a> **Untuk Cara Membuat Tooltip Bro!,anda ganti sesuai keinginan. Sedangkan http://pelajaran-blog.blogspot.com/,adalah link yang ingin anda tuju. Hasilnya akan sepertiu dibawah ini [letakkan mouse diatas link dibawah ini]: Cara Menghias Tooltip Baca Juga Yang Ini.. Belajar Membuat Sitemap Tips Cara Membuat Blog Ringan Saat Loading