Tuesday, December 20, 2011

How To Create Rounded Corner On Blogger Widget

Maybe until now my blogger visitor are just 5/day but i'll always update my blog content. And now i will share to you a tutorial "How To Create Rounded Corner On Blogger Widget", i create this article by my self, its pure by me. But maybe some people has known this tutorial before and create an article like this on them site/blog. So do you want to Create Rounded Corner On Blogger Widget? If you look my subscription box below every post or related post box, maybe you'll see that the corner is rounded. Maybe on your subscription box are rounded too, but maybe some people arent have a rounded corner on them subscription box. So i will give you a tutorial "How To Create Rounded Corner On Blogger Widget"

1. Login to blogger
2. Go to design - Edit HTML - Expand widget template
3. For an example, lets look this css code or read this "How To Create Related Box Below Your Post"
On that tutorial we'll see a css code like this :
.rbbox{border: 1px solid #E6E6E6;padding: 5px;
background-color: #F3F8FF;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #ffffff;}
4.And on that css you'll see a code like this

.rbbox{border: 1px solid #E6E6E6;padding: 5px;
background-color: #F3F8FF;-moz-border-radius:5px; margin:5px;}
.rbbox:hover{background-color: #ffffff;}
Or
-moz-border-radius:5px;
Yeah the code (css) that colored red. That css code that make your Related Box Widget corner are rounded. And now you can add that css code for every blog widget on your blog.
Example : Read the tutorial "How To Create Beautiul Slider - Nivo Slider"
and you will see a css code like this
/* The Nivo Slider styles */
#slider{
width:618px;
height:246px;
}
So now, how to create a rounded corner on that Nivo Slider?
Just paste the code
/* The Nivo Slider styles */
#slider{
-moz-border-radius:5px;
width:618px;
height:246px;
}
And now you'll look the corner of that slider are rounded.
How to make different rounded pixel for every direction.
/* The Nivo Slider styles */
#slider{
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;

width:618px;
height:246px;
}
And now lets change the code value that colored green.
/* The Nivo Slider styles */
#slider{
-moz-border-radius-bottomleft:15px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:5px;

width:618px;
height:246px;
}
This is the result of that code.
Ok thats it. I hope this information is very helpful. Thank you for visiting this blog.
How To Create Rounded Corner On Blogger Widget
Waw i will share too you a tips how to get .EDU Backlink for free, lets see them
How To Get .EDU Backlink For Free

No comments:

Post a Comment

My Ping in TotalPing.com
Feedage Grade D rated
Preview on Feedage: web-design Add to My Yahoo! Add to Google! Add to AOL! Add to MSN
Subscribe in NewsGator Online Add to Netvibes Subscribe in Pakeflakes Subscribe in Bloglines Add to Alesti RSS Reader
Add to Feedage.com Groups Add to Windows Live iPing-it Add to Feedage RSS Alerts Add To Fwicki
Ping your blog, website, or RSS feed for Free