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;
}
.imborder:hover{
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.


Arvind

Baca juga