[Update] How To Make All Blogger Posts Images Round Corners
I have already discuss many time in my articles that template design is very important.Today we will make blogger thumbnail images round corner.You do not need any third party tool to do this.It make your images more attractive.when viewers go to your blog home page or other page you blog thumbnail image looks round corner like circle.
I discus two things.First how to make specific image round and other is how to apply this effect to all images.Adding some new code in style sheet will make your image round.Do not use very large image because after making changes for this effect can make image fade.This effect do not increase loading time of blog.It is light and has only few lines of code but it is very amazing.
In the image you can see the sample of round thumbnail of post.every template design is different.I apply and check this on my template, it is working properly.Thumbnail image of post is show below post title and at the side there is description of post before jump break and after that there is read more option.I will also tell you how this effect choose what is the proportion of image that will be round.This effect automatically adjust with template and show image accordingly.
Now the image above is also part of this effect.Actually when you open up the post or click or post title to read full article the image dimension become changes.Then image become large, it also good because viewer can see full image.you can see the still in round shape but the proportion of roundness become changes.
First login to blogger account
Go to template and click customize
Go to advanced click add css
Paste the below code there
Click apply to blog and visit your blog to confirm.The border around image is green but you can change it.To change color of boarder replace the #BADA55 with your desired color code.
Here is few color codes
The boarder roundness of image is according to code.It is recommended, do not change radius because if you change radius it change the proportion of round corner.
I discus two things.First how to make specific image round and other is how to apply this effect to all images.Adding some new code in style sheet will make your image round.Do not use very large image because after making changes for this effect can make image fade.This effect do not increase loading time of blog.It is light and has only few lines of code but it is very amazing.
Introduction to style
If we want to change individual image dimension then the process will be different.When you upload while writing post you have to upload image then you have to made some changes in html editor.normally when we upload image it is in square shape and every image has a link.after publishing post when some one click on image it open and you can see url in the browser.We can make single image round corner by editing html of post.
In the image you can see the sample of round thumbnail of post.every template design is different.I apply and check this on my template, it is working properly.Thumbnail image of post is show below post title and at the side there is description of post before jump break and after that there is read more option.I will also tell you how this effect choose what is the proportion of image that will be round.This effect automatically adjust with template and show image accordingly.
Now the image above is also part of this effect.Actually when you open up the post or click or post title to read full article the image dimension become changes.Then image become large, it also good because viewer can see full image.you can see the still in round shape but the proportion of roundness become changes.
Add round corner on blog images
First login to blogger account
Go to template and click customize
Go to advanced click add css
Paste the below code there
img {border: 2px solid #BADA55;margin: 0;padding: 0;border-radius: 900px;-moz-border-radius: 900px;}
Click apply to blog and visit your blog to confirm.The border around image is green but you can change it.To change color of boarder replace the #BADA55 with your desired color code.
Here is few color codes
blue #3c69ff
red #d73a31
The boarder roundness of image is according to code.It is recommended, do not change radius because if you change radius it change the proportion of round corner.