How To Add Inner Borders to Images-Blogger

Blogger Tutorial:-How To Add Inner Borders to Images -Blogger ?
1. Login to your blogger dashboard  >> layout >> Edit HTML
2.Scroll down to where you see </head> tag .
3.Copy below code and paste it just before the </head> tag

<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>

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

4.Now add your images as below

<div id="inner-borders">

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

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhp69-7sQvRWRu-GeOq4PsJi6b-Y8bBOx8g12v5yKOcl0RkcS4bJDLV4nzkHTz0uC7dgwteb5bYOusc4deN0trdogA18djAV8-58fzcaKYMCJChGlSNimeQR0rqGZRJ7PfUW52wtmam615V/+2+small.jpg" alt="#" /></a>

<a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFEK5e1GE9_aJttxXSPFRfdce-DgMJZUdSKq0S9Y_A4PNurSz8mS7HOCfdD0OksmJSb1M8gU00BWdMPxtpJDRsRRqqm9v4TQwcZJxjjk4D0gnO6WU40C3G9OrKVGX0kXAEQ5EFs6-6UDV6/+3+small.jpg" alt="#" /></a>

</div>

5.Now all done Enjoy..