If you want to save big size images in blog pages, you will get difficulties because the limitation of posting column or sidebar. To handle this problem, we can use many ways and one of them is through fancy zoom script. By using fancy zoom script, you only place a small picture in blog page whether it is in posting, page sidebar or footer.
So, when the small image is clicked by your blog readers, it will be zoomed into bigger image. The small image changes into big image. Click here to see the nice effect of fancy zoom.
In order to make zooming effect as I explained and gave the sample, you need script called fancy zoom. Actually, this script is usually used in WordPress. However after Kang Rohman tried it in blogger, it worked well. If you are interested in making zoom effect like that, you have to rear this posting until finish…ok. And below are the steps
Please Download the fancy zoom script first below:
After downloading it, please extract it with WinZIP or winrar. After being extracted, you will get two JavaScript files
The two JavaScript files are: FancyZoom.js and FancyZoomHTML.js. Your job now is to upload those java script file into the server that you usually use to upload java script file, such as yahoo geocities or others. After being uploaded, then copy both file addresses. For example, kang rohman‘s addresses are below (sample only)
http://www.geocities.com/amn_tea/FancyZoom.js
http://www.geocities.com/amn_tea/FancyZoomHTML.js
From both addresses, make the code as shown below (sample only)
<script src='http://www.geocities.com/amn_tea/FancyZoom.js' type='text/javascript'></script>
<script src='http: //www.geocities.com/amn_tea/FancyZoomHTML.js' type='text/javascript'></script>
Next, insert those codes above </head> in your blog.
If you are confused, just read below…ok!!!
- Log in into blogger with your ID.
- Click Layout.
- Click Edit HTML tab
- Click Download Full Template and back up your template first.
- Find this code </head>
- Save the code you have made above </head>. Look at the sample below.
- Look at down a little and find this code <body>
- Erase this code <body> and change with the code:
<body onload="setupZoom()">
- Click SAVE TEMPLATE
The first step is done. The next step is to upload the big size images into the server you usually save the images, such ash photobucket.com or imageshack.com. After that copy the URL address of the images. For example, Kang Rohman’s images URL addresses in Google pages are
http://kangrohman.googlepages.com/Waterlilies.jpg
The form of code for zooming images are as follow;
<a href="image.jpg"><img src="image-thumbnail.jpg" /></a>
So, for the sample of the address above, the code could be made as below;
<a href="http://kangrohman.googlepages.com/Waterlilies.jpg"><img height="200" src="http://kangrohman.googlepages.com/Waterlilies.jpg" width="300" border="0" /></a>Width="300" and height="200" are the size of images so that the shown images are smaller that the original images. Of, course; you can change them with your own sizes.
Thanks for reading and hopefully it will be useful
Wow! Super nice post, kang!!!
Congratulations Kang,
Very cool and functional...
Could I translate this post to my blog?
Thanks.
OK. However, you must make a link to my original post. Thanks
mantaps ijin sedot dan memplubikasikan bro..
sangat menarik.... sangat bergunga... thanks.
please help out
i getting this error
our template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: The element type "html" must be terminated by the matching end-tag "".
All Blog hacks in this site is Cool and simple to understand.
This Site is SIMPLE & BEST
we hope gini nii ....
Ok kang rohman, i will try it..it's a solution for us to keep our posting have clear information and also have a beatiful layout.
thanks.
my blog www.raj-tipstricks.blogspot.com,in webmaster it shows.why does robots block this site links.when i have never ever placed robots.txt to not to access any link on my blog.how do i solve it.where to change this code.should i post blog template full code here for more info?please help urgently
User-agent: Mediapartners-Google
Disallow:
User-agent: *
Disallow: /search
Sitemap: http://raj-tipstricks.blogspot.com/feeds/posts/default?orderby=updated
robots.txt blocked links
http://raj-tipstricks.blogspot.com/sea...bel/Add%20Memory%20to%20Your%20Computer
URL restricted by robots.txt Help
http://raj-tipstricks.blogspot.com/sea...abel/Advance%20Your%20Computer%20Skills
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea...e%20and%20Install%20a%20Graphics%20Card
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea...%20Documents%20List%20in%20Windows%20XP
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea...Drive%20to%20Speed%20Up%20Your%20System
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea...ccess%20In%20Thousands%20Of%20Locations
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea...%20of%20a%20Trojan%20Downloader%20Virus
URL restricted by robots.txt Help Help
Apr 15, 2009
http://raj-tipstricks.blogspot.com/sea...0From%20Prying%20into%20Your%20Computer
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea...ke%20Your%20Computer%20Operate%20Faster
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea...20perform%20run%20better%20and%20faster
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/search/label/Merge%20a%20Letter%20in%20Word
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/search/label/Private%20Server%20Web%20Hosting
URL restricted by robots.txt Help Help
Apr 14, 2009
http://raj-tipstricks.blogspot.com/sea.../Recognize%20a%20Fake%20Email%20Address
URL restricted by robots.txt Help Help
Apr 15, 2009
Its really helpful for me. i really very happy. Thanks for sharing.