Sabtu, 16 Juli 2011

Hover Post for Blogger with jQuery

Memang kalau script sudah bermain, mau apa saja bisa sob ;)) Contoh jika kita memakai jQuery script, wooo...sudah tidak terhitung para developer menciptakan karyanya dengan sentuhan jQuery. Walau baru sedikit mengumpulkan The Great jQuery Webs mau menambahkan lagi, sangkin banyaknya jadi puyeung :P
Sobat mungkin sudah tidak asing membuat hover pada image dengan jQuery tentunya! Kalau mau menggunakan CSS3 tinggal baca ini saja CSS3 Hover Image for Blogger ini kalau kurang Thumbnail Hover Image File Blogger. Bagaimana sekarang efek hover itu kita masukan di bagian postingan dalam blog? Waktu cursor menyorot bagian postingan, akan membesar tulisannya sob ;))

Langkah awal, cari unique ID/Class pada template kalian masing² yang mentag bag. post! Umumnya template pada basic blogspot menggunakan unik ID

.post

Kalau unik ID sama dengan yg diatas, tinggal masukin bumbu jQuery snippet berikut diatas tag </body> Eit demo dolo ah...

demo

jQuery Snippet Hover on Post for Blogger

   <b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
var oldSize = parseFloat($(".post").css('font-size'));
var newSize = oldSize * 1.20;
$(".post").hover(
function() {
$(".post").animate({ fontSize: newSize}, 300);
},
function() {
$(".post").animate({ fontSize: oldSize}, 300);
}
);
});
//]]>
</script>
</b:if>
Jika besar hover dirasa kurang, tinggal rubah saja nominal yg scriptnya diberi warna (kedip²). Kalo unique ID berbeda, tinggal ganti saja .post berjumlah 3 biji entuh :D dengan unik ID yg ada pada template sobat :)
Artikel ini Beben Koben si bloglang anu ganteng kalem tea comot dari sobat blogger kita yang suka nerangin trick menggunakan jQuery script. Please visit and look jQuery By Example, that's great blog :-bd
See you \m/

Tidak ada komentar:

Posting Komentar