Tonight (yes tonight! I blog when I can. Kiddos are asleep!) I have a really simple update you can make to your blog in about 30 seconds. Circles and triangles are all the rage right now in the design world. And thats fine with me. I'm a minimalist and I LOVE minimalist designs and the simple circle is the best form of minimal design.
Seriously, this is the fastest update ever. I think it would take you longer to read this then it would to implement this.
How to Make Blogger "About Me" Profile Picture Round: A Blogspot Tutorial
1. Go to Dashboard > Template > Edit HTML.
2. A few lines down you'll find
<b:skin>--</b:skin>
4. Scroll down and find
]]></b:skin> copy and paste the following code just ABOVE it.
.profile-img {
margin:0 auto 0;
-webkit-border-radius: 50em;
-moz-border-radius: 50em;
border-radius: 50em;
}
5. Preview your template - make sure it worked.6. Save your template.
Viola, you are done! Now bask the awesomeness of your round profile avatar.
The border-radius property is a shorthand property for setting the four border properties. This property allows you to add rounded borders to elements. You can learn more about the border-radius property here.
If you have any questions feel free to leave a comment and I will be happy to answer them. If you apply this update to your blog, I would love to see it in action. Leave a comment and post a link to your blog.
Wanna know how to make your commenters profile picture a circle, like here on Loving Life Designs, to match your new and improved profile about me avatar? (like pictured below?)
Sorry. You'll have to read about it next week - shameless plug, I know.
thank you so much!
ReplyDeletewww.anjaliabeauty.blogspot.com
You are welcome! :)
DeleteThank you so much for this tutorial!
ReplyDeleteI’m much happier with my About Me section, but I think it would look even better centered. Do you have any ideas of how I might be able to center the image & text?
http://harmonycreative.blogspot.com
I can do a tutorial on how to do that if you would like.
DeleteHi! I've been trying this but I just can't get the result as shown above. Could you please tell me if i'm doing the right thing. (See below)
ReplyDelete{ margin:0 auto 0; -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; }]]>
That is where the Ctrl + F leads me.. where should i paste ".profile-img { margin:0 auto 0; -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; }" then?
Need your help! Thanks!
I have tried several times but is not working don 't know what wrong am I doing. Am still learning everything .
ReplyDeleteI cant find the ]]> thing
ReplyDeleteyo! it was like magic! hahaha! thanks for this!!! :D
ReplyDeleteiamcyndrel.blogspot.com