Memperbesar Gambar Pada Blog Dengan Efek Menarik

8 Aug 2010

Saya ingin Berbagi tutorial lagi neh kawand, tapi mungkin sebagian besar kawand-kawand bloger sudah memahaminya..
tentang Image Zoom.


Langkah 1
Login ke Blogger
Langkah 2
Masuk ke "Rancangan - Edit HTML"
Langkah 3
Cari kode dibawah ini:
]]></b:skin>
Langkah 4
Masukan kode CSS dibawah ini diatas kode pada langkah 3:
[Buka] [Kode CSS] :

div.jquery-image-zoom {
line-height: 0;
font-size: 0;
z-index: 10;
border: 5px solid #fff;
margin: -5px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}
div.jquery-image-zoom a {
background: url(http://lh6.ggpht.com/_xcD4JK_dIjU/TEfN4VrRQPI/AAAAAAAAESY/so-0qObS1BM/d/jquery.imageZoom.png) no-repeat;
display: block;
width: 25px;
height: 25px;
position: absolute;
left: -17px;
top: -17px;
/* IE-users are prolly used to close-link in right-hand corner */
*left: auto;
*right: -17px;
text-decoration: none;
text-indent: -100000px;
outline: 0;
z-index: 11;
}
div.jquery-image-zoom a:hover {
background-position: left -25px;
}
div.jquery-image-zoom img,
div.jquery-image-zoom embed,
div.jquery-image-zoom object,
div.jquery-image-zoom div {
width: 100%;
height: 100%;
margin: 0;
}
Langkah 5
Cari kode
</head>
Masukan kode JavaScript dibawah ini diatas
</head>
[MariBerkawand] [Buka] :



<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'/>
<script type="text/javascript" src="http://hensblog.googlecode.com/files/jquery.imageZoom.min.js"/>
<script type="text/javascript">
 jQuery(document.body).imageZoom();
</script>
Langkah 7
Simpan template, preview blog anda dan klik salah satu gambar pada artikel blog Kawand-kawand...
SeMoga BerhasiL...
SALAM BERKAWAND....
Share this article on :

25 comments:

genial said...

coba ada previewnya kang... psti tambah keren :)

KANG uchiha said...

ia. Kalo ada demo nya mantep tuh

etam grecek said...

mungkin komentarku ngikut yg sebelumnya... pembaca pasti akan lbh suka sblm mencoba.jka ada perbandingannya....
thanks for share...

Aby said...

mampir sebelum tidur kawan
mantab kawan tipsnya
makasih dah share...

selamat malam
selamat beristirahat...

anggar berkawand said...

@genial,KANG uchiha,etam grecek : itu sudah saya sediakan previewnya koq.. liat saja kawand..

@AbY : terimakasih dah mamapir... salam berkawand

Andi Wong said...

trik ini bisa membuat tampilan blog tambah keren gan.. siip.. ;)

tomo said...

Sangat menarik kawan jika bisa diperbesar.
Tutor yang jarang diposting ni kawand

Trishana said...

nantinya nambah berat blog nggak..? terimakasih sob infonya jadi nambah ilmu lagi

harto said...

benar seperti sahabat komentar diatas, kalo ada contohnya lebih mantab lagi n jadi ngerti.
trims atas ilmunya, sukses selalu n tetap semangat

mabro said...

mampir kawand...
wah, trik yang patut dicoba nie...
mantep dah...

pakde sulas said...

effect yang sangat menarik perlu dipraktekkan neh

moga sukses selalu kawan

tengku said...

berkunjung ketempat sahabat... ditunggu kunjungan baliknya...

om rame said...

terus terang - terang terus, saya masih agak gaptek nih Om. kepingin tapi beLum mudenga, sudah saya cari previewnya tapi enggak ketemu.
maaf yah Om.

ariefborneo said...

Mantap kawand info nya..thnxs dah share

Met malam n met istirahat kawand.

Indra said...

tutorial bagus gan, blognya keren....

salam kenal ya, mksh udah mampir k blog saya...

Wong sikampuh said...

Tutor yg bagus dan menambah pengetahuan saya...Mantap sob

TUKANG CoLoNG said...

sekarang aplikasi bikin blog tambah menarik makin banyak yah..:)

Gaphe said...

wih.. info yang bermanfaat.. baru kali ini baca disini gan.

rezKY p-RA-tama said...

previewnya yang mana mas?
bingung
heheh

cHugy - gOgOg said...

Trimakasih untuk share infonya.
selamat pagi selamat menjalankan ibadah puasa.

tetap semangat dan happy blogging.

anggar berkawand said...

@ALL : terimakasih yaaaa........ SELAMAT BERPUASA..
@Trishana : tidak terlalu berat koq.. :)
@harto, om rame& rezKY p-RA-tama : kalo mau lihat previewnya klik aja gambar mata merah itu.... yang ada tulisan view example...

SALAM BERKAWAND

four dreams said...

oke deh sob, aku save yaaa :)

indonesian news said...

thanks infona kawan

Dhennie's said...

saya sudah mencobanya...mantaf abiz...........thanks infox....!!

Wallpapers Gallery said...

salam kenal sobat,
triknya oke sekali dan makasih atas share infonya

Post a Comment

 
© Copyright 2010-2011 Mari Berkawand All Rights Reserved.
Template Design Premium | Powered by Blogger.com.