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 !
Some time your template is so simple that it can not attract visitors, so you have to spices up your blog, but after that time your blog gonna heavy day by day and visitors also dislike this. So now here is the middle way to design simple and stylish with easy and short coding.
If you want to add borders you can also use this code, There are many different type of codes given below.But first have a look on both two image that are showing your before and after effect of this code.(This Is Not A Perfect Image)
By this useful article you teach that How you add Stylish and Handsome borders to free blog blogger gadgets, in my experience blogger gadgets is very useful and give attraction to your visitors and readers. If your blogger blog gadgets is beautiful your readers and visitors could be stay some time on your blogger blog. So now you are ready to give shades and stylish border to your blogger blog I am describing and and giving some tips to you see the following suggestion.
Before |
After |
How To Do This In Blogspot?
1.) For All Of These Code, You Have To Do Some Thing Like This.
2.) Go To Your www.blogger.com
3.) Open Your Desire Blog.
4.) Go To Layout.
5.) Click “Edit A Gadget” On Which You Want To Add Border.
6.) Get The “Gadget” ID Where You Want To Put This Code…(If You Don’t Know How To Get Widget ID Just Comment Below, I Will Explain You Easily)
7.) Open Edit HTML.
8.) Expand Your Widget.
9.) Find ]]></b:skin>
10.) And Paste The Below Code Just Before It.
For Simple Square Color Border:-
.widget{
padding: 5px;
border: 1px solid #ff0000;
}
For Simple Square Color Border With Filled Background:-
.widget{padding: 5px;border: 1px solid #ff0000;background:#ffffff;}
For Simple Square Color Border With Filled Background And Shade:-
.widget{padding: 5px;border: 1px solid #ff0000;background:#ffffff;box-shadow: 3px 3px 3px #ff0000;}
For Simple Rounded Color Border:-
.widget{padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;}
For Simple Rounded Color Border With Filled Background:-
.widget{padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;background:#ffffff;}
For Simple Rounded Color Border With Filled Background And Shade:-
.widget{padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;background:#ffffff;box-shadow: 3px 3px 3px #ff0000;}
Customization:
1.) Don’t Change “.widget” .
2.) You Can Change The CSS With Your Desire.
3.) Save And Done.
Certainly an article to be read! This was a great and informative read! Fabulous work by the author and creator! Nice feedback from the readers as well! I must admit the author had some very valid points here. Thank you for taking the time to share this with us!
Celabright video
You Are Welcome…
How to get widget id?
For Borders Around All Gadgets, You Did Not Have Need The Widget ID, Just Use These Codes…
hey hassan I get the borders in my posts and everywhere but i want it in widgets alone
Read The Below Link…
Border For Single Widget
Hey i just need this border round each of my single post, how should i do it?
Use The Below Code In CSS Of Your Blog…
.post {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}
Hey Man, how to add Yahoo Emoticon to post?
I really need your help. I’ve been looking this way everywhere but no effective…
Just Use HTML Image Tag To Add Image In The Post…
I copied code and paste but didn’t changes.pls tell me what i do? For all gadget border?
Share Your Blog URL Where It Effect Nothing…???