Learn How To Add Image Pop-Up And Opacity Effect To Blogger Images – MBT Church Theme Style!



IMAGE-POP-UP-OPACITY-EFFECT Adding different effects to your blog template surely makes it outstanding. By default MBT Church Theme has two Image effects features, which are the pop-up and fading image effects.

First lets learn how to add the Pop-up image effect to our images. I hope you are using MBT Church Theme, if not then download and upload it now!





Image Pop-up effect

To expand an image to its original size, you will need to follow the steps below, 
  • Go to your blogger Editor and upload an image.
  • After you have uploaded an image, simply click the preview button near the top-right-corner as shown in the image below,
click-the-preview-link-in-blogger-editor
  • Right click on the image that you just uploaded and then click on Copy Image Location to get the Image URL. Make sure you are using Mozilla Firefox Browser,
copy-image-location-to-save-Image-URL
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! bye


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)