Borders and background colors help you to separate areas of your blog, and can be used to highlight important content, such as your images in blog posts, or features in your blog sidebar. It’s a dream of every blogger that his blog should blink in the eyes of his readers, attractively. If content is the king, then Design is the palace and the royal palace must be decorated and varnished well . You can call a talented designer to design your castle, so as your blog. But in case of blog, you have to know some simple tricks that you can use to make it more attractive and a bit different. With CSS3, there are lots of such tricks, which can be easily implied even in blogger. Today we are going to talk about such a trick – How to Add beautiful/stylish/awesome borders to all images in blogger posts. Many bloggers asked me an easy way to add stylish border to all blogger post images, without editing a single post. So today I’ll teach you a very easy way to add border to your all your blog images at once and no need to edit every single image in your blog. This code will apply borders to all images present in blogger post
Borders to the images in blogger posts Demo
How to add borders to the images in blogger posts
- Go to Blogger Dashboard
- Click on DropDown Menu and select Template
- Backup your Template before making any changes to your blog
- Now Click on Edit HTML --> Proceed --> Expand Widget Templates
- Press Ctrl + F and search the code shown below
]]></b:skin>
- Now Paste the Code Shown Below just above/before it
.post-body img{
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghS7BWfYQChjnkow4TvCkHJHurS52L7koRmzltJ6AY-JXMUC6Jc2n7O3AF-0xu4mVlYHK9mjyMaHcSmzyE2W2nFfVwRq9jwXP5iNXS27B9L48pxqxH-bcWj1j4nJmHkxm4iVNV818mT7U/s400/image-background.png) repeat scroll 0 0 transparent;
padding:7px;
border:1px solid #cecece;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
}
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEghS7BWfYQChjnkow4TvCkHJHurS52L7koRmzltJ6AY-JXMUC6Jc2n7O3AF-0xu4mVlYHK9mjyMaHcSmzyE2W2nFfVwRq9jwXP5iNXS27B9L48pxqxH-bcWj1j4nJmHkxm4iVNV818mT7U/s400/image-background.png) repeat scroll 0 0 transparent;
padding:7px;
border:1px solid #cecece;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
}
- Now save your template
Like it? Share it.
6 comments
Thanks for this tutorial... I apply this tutorial in my blog but this borders affected to my "read more" image link...how to remove/ hide borders in read more link in blog post page. Please reply..
@Sarath S Pillai Add these code
.rmlink{background:none;border:none;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
above
]]></b:skin>
Nice¡ Congratulations for your blog. Good tips for blogger.
I want to apply comment box just like yours in my blog, so can you please help me with this?
@sonu
Thanks Dud :)
it's effecting my readmore buttons,
.rmlink{background:none;border:none;-moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;}
this is also no working.
Click to Add a New Comment