|
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>
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.
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.