Pin It

CSS Image Border Effect (Blogger)

In previous post we discover about image opacity and its use in blogger images, now there is another attractive way to make blog images more stylish by adding border when mouse hover on it. I am in try to publish the esiest way to do it. There are lot of way to customize blog with simple tricks, no need to any scripts that increase the loading time of blog. Follow some simple steps to add it into your blog. 

1. Log in to blogger Dashboard>>Design-
2. Enter in Edit HTML-
3. Check Mark to Expand Widget Template-
4. Now search ]]</b:skin>(Ctrl+F to use browser search) and paste just above it the given codes.

.imborder img{
border: 4px solid #ccc;
.imborder:hover img{
border: 4px solid navy;
border-color: black;

Save Template and when you put some image use the codes as

<a href="URL OF TARGET LINK" class="imborder" ><img  border="0" src="URL OF IMAGE" /> </a>

Replace URL OF TARGET LINK with the desired link when image is clicked and also replace URL OF IMAGE with the link where image is stored.


If You Found Something Useful, Then Kindly share This Now:
Technorati Digg This Stumble Stumble Facebook Twitter
साँझा करें Share It Now !
StumpleUpon DiggIt! Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google Twitter FaceBook



Post a Comment

Your Suggestions are valuable for me.

FeedBurner Updates


Thanks for Your Arrival !


© 2011-2018. Mast Blog Tips All Rights Reserved Arvind Jangid, Sikar, Rajasthan. Template by Mast Blog Tips | Back To Top |