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.#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>
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.
<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>
0 comments so far:
Post a Comment