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

Need Quick Help within 24 Hours? ASK NOW



If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

19 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

  1. This looks terrific. I need to give it a try. And thanks so much MOHD for leaving the comment on my blog about getting the knots out of long haired cats. You just have the answer to everything. See what you are learning about animals Too funny.

    ReplyDelete
  2. Marg I loved the change to your blog. You have succesfully added the animated Facebook Icon too, the only thing you need to add further is the link to your facebook profile. Create one for you just like this one -> http://facebook.com/mybloggertricks

    Once you have created it let me know so that I could give you the code that will make your Facebook Icon linked to your profile.

    ReplyDelete
  3. Super guided basics. Easy as 1 2 3. Thank you!

    ReplyDelete
  4. I have had fun trying to set up everything with my new template (thank you!).

    I have a dumby site that I set all this up with ahead of time, before transfering it over to the actual blog.

    www.nopey-h.blogspot.com

    I was just playing around with it. I just took a ramdom image, and tried the your first trick with the expanding it to its normal size.

    The text I had in the post ran completely over to the left. Over all the widgets, etc on the other side. Do you need to make sure you have a line space (enter key in others words) between the text and photo? Or did I do something royally simple that I just plain overlooked?

    I wanted to mention that you truly have some awesome gifts! Congrats on your site, and I know it will grow in readership!

    ReplyDelete
  5. @Hannah

    I haven't tried this on Buster Themes. Thanks for reminding me. I will set the CSS code so that this effect may look attractive and well aligned in buster themes. The problem that you are facing is only because of improper Alignment setting.


    I will first test this effect on my Lab blogs and will avail the code for buster themes right here. I will be back with working code soon.

    Thanks for your nice comment:|

    ReplyDelete
  6. Thank you so much! I look forward to it. I think I'm almost done with my tester, so I can take it live soon as well! WOO HOO!

    I'm excited!

    ReplyDelete
  7. so full style...like me...hauahuahuahauha
    nice nice

    ReplyDelete
  8. owww...what shame...
    i think works just on MBT Church Theme....so when will be available on every template,call me =))

    ReplyDelete
  9. @Mary

    Sometimes I love teasing my readors lol! :p

    Don't worry just follow all steps and insert just the additional code below inside your template just above ]]></b:skin> for the image effects to work,

    .Fadein img {
    filter:alpha(opacity=100);
    -moz-opacity: 1.0;
    opacity: 1.0;
    border:0;
    }
    .Fadein:hover img {
    filter:alpha(opacity=30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    .Fadeinetc:hover img {
    filter:alpha(opacity=0.30);
    -moz-opacity: 0.30;
    opacity: 0.30;
    border:0;
    }
    .thumbnail{
    position: relative;
    z-index: 0;
    }
    .thumbnail:hover{
    background-color: transparent;
    z-index: 50;
    }
    .thumbnail span{
    position: absolute;
    background-color: #7AA1C3;
    padding: 0px;
    left: -1000px;
    border: 1px solid gray;
    visibility: hidden;
    color: white;
    text-decoration: none;
    }
    .thumbnail span img{
    border-width: 0;
    padding: 0px;
    }
    .thumbnail:hover span{
    visibility: visible;
    top: 0;
    left: 5px;
    }


    Hope you are happy now! :p

    ReplyDelete
  10. cool....i've tried and it works
    how to make it fadein and linkable? i mean just like your bookmark icon at the bottom of your post, and also how to make the popups rolling out to the topside?
    btw, i really thank you for your nice tricks

    ReplyDelete
  11. I can't do it with multiple photos and i could not set the alignment please help.

    ReplyDelete
  12. @Rocka and @NAveen

    I am glad you liked it buddies. I would appreciate if you read this new post -> Add Drop Shadows to Images and Expand them on Mouse Hover

    ReplyDelete
  13. I wanna add Google Translate Button as an "Automated Popup", meant to say when a visitor comes to my site, he can be easily able to select Language of his own. :)
    Can anyone Help me..?
    I will appreciate if you add some cool background to it too, the size of the box will be "300x300" i think.. :)

    ReplyDelete
  14. how to add this effect on blogger without uploading buster templet, tell me pls

    ReplyDelete
  15. I am looking for a pop out effect for the blog sidebar. Nobody seems to have one!

    ReplyDelete
  16. Thank you very much for the block of codes which you shared for mary. That will be very helpful for the bloggers.

    Regards,
    Admin of manual article submission

    ReplyDelete
  17. Thanks for sharing. But is there any way to make it automatic?
    Every time if I want to add an image, i have to do this?

    ReplyDelete