How To Add Inner Borders to Images

Add This To Del.icio.us StumbleUpon This Add to Technorati Digg This

Login To Blogger Go To > Design > Edit HTML.

and mark the tick box "Expand Widget Templates"

Then, find (CTRL+F) this code in the template.

</head>

And immediately before it, paste this code:

<style type='text/css'>

#inner-borders a img, #inner-borders a { border: none; overflow: hidden; float: left; }
#inner-borders a:hover { border: 3px solid #0000ff; }
#inner-borders a:hover img { margin: -3px; }

</style>

You can change border color,border size,margin,... But both border size and margin must have a same numerical value.

Now add your images as below.

<div id="inner-borders">

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAa_wM_FcHy3aQHH9ide4GHSGP4a2w4bsb0rU55_t9MWfMsiEL7qFTdbpIikURjagTc_1mtEr8yD1JvEsvAvbYcZPYmTLwAE41YPntXo8mo3u0hr8pULVcnErNCP2eQQHwYjbVYqsEQOu0/+1+small.jpg" alt="#" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgp_v3-j413W2nfZiJTcuuXNfxz7RrB_FcqnSKe1FtLLcz8jRigsFEN_9BnTFq0rmZ_pfnh2RNyf3q70-N-JEu9Ayr8r_90GBZrj4t9hyphenhyphen_fnS0R13sNdN5afwsMutJ1o6uBQwll_JUPKf3I/+2+small.jpg" alt="#" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjf0siqG_oGSPdrmi1u65C1nwTTwMN1PZ3Gwzt5_mx7u-BDoNa86cWvwTQjyRuy1b4RZ7lkfOferXJNaQFUhaiAIp2-GWpO4UHPTYFEJCiEAp5OM7JBgwDZj0HgUY2R6oBDd5eblI954O_E/+3+small.jpg" alt="#" /></a>

</div>

Now click Save.