--> Learn How To Add Image Pop-Up And Opacity Effect To Blogger Images – MBT Church Theme Style! | Experience Lab - Online business creation and development guide for bloggers and startups

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

Adding different effects to your blog template surely makes it outstanding. By default MBT Church Theme has two Image effects features, wh...

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

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,4,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,3,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: Learn How To Add Image Pop-Up And Opacity Effect To Blogger Images – MBT Church Theme Style!
Learn How To Add Image Pop-Up And Opacity Effect To Blogger Images – MBT Church Theme Style!
http://lh4.ggpht.com/_7wsQzULWIwo/Sq61spRzrKI/AAAAAAAAB1M/FLffQ4mOOfU/IMAGE-POP-UP-OPACITY-EFFECT%5B7%5D.jpg?imgmax=800
http://lh4.ggpht.com/_7wsQzULWIwo/Sq61spRzrKI/AAAAAAAAB1M/FLffQ4mOOfU/s72-c/IMAGE-POP-UP-OPACITY-EFFECT%5B7%5D.jpg?imgmax=800
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2009/09/learn-how-to-add-image-pop-up-and.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2009/09/learn-how-to-add-image-pop-up-and.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy