Spiceup all blogger images with colored frame on mouse over effect

If you think in one angle can find only single way, if you think in various angles then you can find somany ways to add up and improve your professional quality. Here in this article we present you one of the best ways to spiceup your blog image with colored frame. Many of the ways you may know about adding borders to images, but often we can increase more attractive template by implementing simple trick with small code.

Readmore:

• How to increase blog/website traffic with image optimization?
• Stylish and Attractive Readmore button images for blogger

Webmasters it is difficult to add border to each and every one image with borders in their choice color manually. In this article we present you about how to make your blog image attractive by using frame method to each post. In this trick users can experience when mouse on image the image border frame color will be changed. Webmaster don’t need to work hard for adding this code to their blog/website template, its easy and customizable according to wish with simple method.

Readmore:

• Add Rotation and Zoom out effect image slideshow?
• Stylish Page Loading images for blogger

How to Add on mouse over image frame border color change?

Sign into your blogger account
From blogger Dashboard select ‘Template’ link tab
Note: Before you do implement this experiment on your template better to backup, if anything goes wrong you can reuse it again.
Click on ‘Edit HTML’ link tab
Now, search for code

]]></b:skin>

After finding piece code copy the below code and paste above to it

/* Image Frame code by www.blogtariff.com*/
div.post-body.entry-content{
margin-top:35px;
font-size:15px;
font-family:'Calibri';
color:#444444;
}
div.post-body img{
border: 10px double #E3E3E3;
max-width:500px;
max-height:auto;
margin-top:10px;
}
div.post-body img:hover{
border: 10px double rgb(10,218,243);
max-width:500px;
max-height:auto;
margin-top:10px;
}

Code Customization:-

• Replace E3E3E3 color code with your choice color by using our COLOR CHART
• Change 10,218,243 hover color with your choice color

After successful adding code ‘Save Your Template’
That’s it you’ve done