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)
Next, insert those codes above </head> in your blog.
If you are confused, just read below…ok!!!
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;
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
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
Read more: DragonHackers Blogspot | Tutorial Blogger | Tutorial Internet | Tutorial Computer http://dragonhackthis.blogspot.com/ Under Creative Commons License: Attribution
0 comments:
Post a Comment