You can use the same method always to get Image URLs for your uploaded images. Get rid of Photobucket!
- After you get the image URL simply use the popping code shared below,
<a class="thumbnail" href=""><img src="Add Image URL Here" width="100px" height="100px" border="0px" /><span><img src="Add Image URL Here" /><br /> Image Description here </span></a>
- Copy-paste this image code in your blogger editor and make the following changes,
------> Replace Add Image URL Here with the image location that you just copied.
------> You can also change the size of the display image. The Display image is the smaller image which on mouse hover expands to the original size. Change 100px to any size you want.
------> Replace Image Description here with a little description about the image. This text will appear below the expanded/popped up image. If you don’t want to add any description simply delete the bolded green text.
That’s All! Apply the popping code to see things popping up :>
On Mouse Hover Image Opacity Effect
Now Lets add the fading effect to your images. This one is pretty easy!
- Follow the same steps for getting the image URL as guided above.
- Once you have copied the Image Location, use the following code to add fading effect to your image,
<a class="Fadein" href="Add Image URL Here"/><img src="Add Image URL Here" width="" height="" border="0px" /></a>
- Simply replace the bolded red text with the Image location that you copied.
- By default the original image size will appear because I have mentioned no image dimensions. If you want to give a particular size to the image then give the proper dimensions to width="" and height="" e.g:- width="500px" height="600px"
That’s All! I hope everything was clear.
You can follow the same procedure for adding these two effects to images in your sidebar. You just need the Image URL and that’s it!
0 comments :
Post a Comment