LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Tricks » How To Add Stylish Borders Around All Blog’s Gadget/Widget?

How To Add Stylish Borders Around All Blog’s Gadget/Widget?

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. 

How To Add Stylish Border Around Selected Widget Of Blogger?
Before

How To Add Stylish Border Around Selected Widget Of Blogger?
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.

You Like It, Please Share This Recipe With Your Friends Using...

12 Responses to “How To Add Stylish Borders Around All Blog’s Gadget/Widget?”

  1. Mike Perham says:

    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

  2. ARAVIND BALAJI says:

    hey hassan I get the borders in my posts and everywhere but i want it in widgets alone

  3. Cyracks says:

    Hey i just need this border round each of my single post, how should i do it?

    • EXEIdeas says:

      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;
      }

  4. Hey Man, how to add Yahoo Emoticon to post?

    I really need your help. I’ve been looking this way everywhere but no effective…

  5. I copied code and paste but didn’t changes.pls tell me what i do? For all gadget border?

Leave a Reply

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