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,
- 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,
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!
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 »
Mohammad
9/15/2009
blogger tricks
,
CSS and HTMLTricks
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.
ReplyDeleteMarg 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
ReplyDeleteOnce 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.
Super guided basics. Easy as 1 2 3. Thank you!
ReplyDeletethks for that lovely comment Piwoit :>
ReplyDeleteThan man ..thnx to guide me
ReplyDeleteI have had fun trying to set up everything with my new template (thank you!).
ReplyDeleteI 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!
@Hannah
ReplyDeleteI 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:|
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!
ReplyDeleteI'm excited!
so full style...like me...hauahuahuahauha
ReplyDeletenice nice
owww...what shame...
ReplyDeletei think works just on MBT Church Theme....so when will be available on every template,call me =))
@Mary
ReplyDeleteSometimes 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
cool....i've tried and it works
ReplyDeletehow 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
I can't do it with multiple photos and i could not set the alignment please help.
ReplyDelete@Rocka and @NAveen
ReplyDeleteI 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
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. :)
ReplyDeleteCan 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.. :)
how to add this effect on blogger without uploading buster templet, tell me pls
ReplyDeleteI am looking for a pop out effect for the blog sidebar. Nobody seems to have one!
ReplyDeleteThanks for sharing. But is there any way to make it automatic?
ReplyDeleteEvery time if I want to add an image, i have to do this?