Monday , 24 July 2017
Home » Tech » How to Add stylish Round Corners to Blogger

How to Add stylish Round Corners to Blogger

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 stylish Round corners to blogger themes/Widgets. So, Let’s start !

Before we Start ….

I have already told you that this is a CSS3 technique. There are issues with some browser so it’s better to add the following prefix with the codes, so that the browsers can identify them.

-moz for FireFox.

-webkit for webkit browsers like  safari and chrome.

Always remember to download a copy of your blogger template before you start. Even the experienced circus-player will spread a safety net, when they plays. so, download your template before you start.

W3C Specification Mozilla Implementation Webkit Implementation
border-radius -moz-border-radius -webkit-border-radius
border-top-left-radius -moz-border-radius-topleft -webkit-border-top-left-radius
border-top-right-radius -moz-border-radius-topright -webkit-border-top-right-radius
border-bottom-right-radius -moz-border-radius-bottomright -webkit-border-bottom-right-radius
border-bottom-left-radius -moz-border-radius-bottomleft -webkit-border-bottom-left-radius

step 1. Sign in to blogger

  • Sign in to blogger
  • Go to Dashboard –> Design
  • Select ‘Edit HTML’ tab

step 2. Add CSS codes needed for the widget

Now we have to add the CSS codes needed for the round corner boxes. The codes are the same as you have to add for any other widgets, The difference is that it just adds 2 more lines. The code is ;-

#rcbox {
background-color:#414141;
height: 45px;
width:460px;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

This code should be added just above the “</b:skin>”  tag in your template. For this, press “ctrl + F” and type </b:skin> in it. Now the code ‘</b:skin>’ will be shown in the template. Just copy the above code and paste it

Step 3. Add the HTML code for the Widget

This is the widget code for the Box. Just want to copy the code to where you want to place it – In your template, in your post, in HTML/Javascript widget .. .or anywhere. The code is ;

<div id="RCbox"><....Add your widget code here and You will get something in this shape.....></div>


And you will get something in this shape

It’s done ! You can see a new Round cornered box appearing in your blog. Not just this, you can change it’s shape and style by increasing the radius, or changing the radius of some corners only.

About Rajeel

I'm Rajeel, a teen blogger from India who loves computers, sports, internet and all other kind of tech stuffs. This blog thing is one of my favourite hobby and the one that eats up much of my time. But Really, I'm loving it :) Find me in G+

One comment

  1. David@sciatica exercises

    This is David. Hello to all. As I am new to the internet and blogging in particular,I have a lot to sort out and to learn. Thankfully, bloggers are some of the classiest and most informative people anywhere. I need all of the information I can get and this post helps a whole lot. Thank You for posting this.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Scroll To Top