Follow - Menu | G+1 | fb fan page | nuffnang | amung | Says.my


Sunday, June 26, 2011

Zoom-in Gambar Untuk Blogger Blogspot Guna JQZoom





Picco gunakan JQZoom untuk zoom gambar-gambar yang terpilih di dalam blog supaya mudah untuk lihat details dalam gambar bersaiz besar, contoh gambar di atas, bila mouse berada dalam gambar tersebut, zoom akan keluar disebelah kanan gambar.


Nak try buat zoom-image macam ni dalam blog you all? boleh tak ada masalah, tak susahpun, tak perlu ada domain atau web hosting sendiri untuk upload script, blogspot biasa je macam saya pun boleh guna teknik ini.


Sebelum Picco teruskan, nih.. nak perkenalkan blogger yang bernama leyzajamil yang berani mengajukan soalan tanpa segan silu pada Picco dalam entry Beza Perodua Myvi Terbaru 2011 dengan Previous Model, berikut komen beliau dan kini ku tepati dan laksanakan janji tersebut di sini! :p...:





*yang complicated tu sebenarnya masa.... sebab tengah tak free nak ajar.. hihiks! ~ :P

Dah ready? ok sekarang ikut segala arahan-arahan di bawah ini:


STEP #1
Log in ke Blogger dan pergi terus ke Layout -> Edit HTML
then, find (CTRL+F) this code in your template (tak perlu tick ):
</head>
 
Dan immediately ABOVE/BEFORE it, paste this code:
<!--JQZOOM-STARTS-->
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jqzoom.css" type="text/css" />
<script type="text/javascript">

$(function() {
var options =
{

zoomWidth: 275,
zoomHeight: 275
}
$(".jqzoom").jqzoom(options);

var options2 =
{
zoomWidth: 275,
zoomHeight: 275,
zoomType:'reverse'
}

$(".jqzoom2").jqzoom(options2);

});
</script>
<!--JQZOOM-STOPS-HELP@-http://bloggerstop.net-->

Supaya ia kelihatan seperti ini:


STEP #2
Save your template.


STEP #3
Sekarang setiap kali anda ingin membuat kesan imej-zoom dalam imej anda, just simply add the this code:
class="jqzoom"  to your  a href  tag.



# Jika ini adalah CONTOH kod yang biasa anda gunakan untuk memaparkan imej dalam blog anda:
----------------------------------------------------------------------------------------------------------------------
<a href="http://CONTOH.com/gambar.jpg" title="TITLE GAMBAR"><img src="http://CONTOH.com/gambar.jpg"/></a>
----------------------------------------------------------------------------------------------------------------------


# Sekarang masukkan kod  [class="jqzoom"] ke dalam tag a href, pada setiap gambar yang hendak di zoom-in kan sahaja, seperti ini:
----------------------------------------------------------------------------------------------------------------------
<a href="http://CONTOH.com/gambar.jpg" class="jqzoom" title="TITLE GAMBAR"><img src="http://CONTOH.com/gambar.jpg"/></a>
----------------------------------------------------------------------------------------------------------------------


Browser yang boleh support:

6+ | 2+ | 1.0+ | 2+ | 9+ |

But, please remember that, simpan backup design template:

Backup / Restore Template

untuk mengelakkan sebarang kemungkinan, kesilapan, kesalahan teknikal atau sebagainya...dan Picco tak jamin kepuasan 100% dalam menggunakannya....sekadar untuk share ilmu sahaja...

Maklumat lanjut tentang JQZoom ini,: http://www.mind-projects.it/jqzoom_v10

Selamat Mencuba!!

P/S: Kalau ada sesiapa yang nak tanya Picco apa-apa soalan yang mungkin boleh di bantu dan di kongsikan bersama, jangan sengan silu, di pelawa dan di alu-alukan terjah je terus blog Picco ni dengan komen-komen you all, kalau baca dan klik like tapi tak bagi komen, rasa macam rugi sangat-sangat sebab tak dapat kita nak berinteraksi sesama blogger, tak tahu sama ada entry yang Picco post ni bagus ke tidak ke, rasa macam news paper pulak nanti kan?.. sekurang-kurangnya ada idea baru untuk Picco update blog dengan entry baru setiap hari.. tak gitu?.. ;-)

Happy reading dan exploring blog yang tak seberapa ni....terima kasih.

"Like this post ? Click LIKE !
..and start SHARING now !



Leave a Reply

7 comments:

leyzajamil said...

salam,
terkial2 jugak nak bagi faham ni, tapi belum cuba belum tau kan? haha..promot baek punyee, thanks picco ;)

Abszeen Picco said...

@leyzajamil:no problem ;)

meaw said...

fuyamakkkkk,banyak gila step....

Abszeen Picco said...

@meaw: banyak kah... ini dah buat paling ringkas.. hehe

♥ LuRveLyAmiera ♥ said...

haaaa, manyak susah oo..^_* manyak masa nak guna nih..^_^

Abszeen Picco said...

@LuRveLyAmiera: susah meh? hmm itu jer cara paling senang. hihiks~

♥ LuRveLyAmiera ♥ said...

susah plus malas..hehe

Next Previous HOME

UPDATE HISTORY


! UPDATE (Wednesday, 6th July 2011) :
" you can easily visit my blogspot via this URL ( http://abszeen.co.cc ) ,
or from any mobile devices via this URL ( http://abszeen.co.cc/m ) , thank you.."

Hi!, my name Ella Koon. Click me anytime to bring you back at the top of the page.