31 January 2013
How to Add Stylish colored Borders to Blog Widgets?
Thursday, January 31, 2013
By
Imtiaz Ahmed
Blogger Tips,
Blogger Widgets and plugins,
Tips And Tricks
No comments
Here another way to convert your blog attractive and stylish by adding
stylish colored borders to each Widget or Gadget on blogger blogs. Lots
of time will consume on customizing blog with borders but here you don’t
need to work hard to modish your blog. By adding simple and easiest
technique widget code bestows your blog look more attractive and the way
you can impress the readers/visitors by its eye-catching appearance.Here, BlogTariff presents customizable “BTF Stylish Widget Border code” for bloggers to maximize visitors/readers. Simple and easiest technique widget code bestows your blog look more attractive. Let’s begin the tutorial to add widget.
How to Add “Borders to Widget/Gadget to Blogs?
Sign into your blogger accountClick on “EDIT HTML” link Tab
(Before you do experiment on your blog Backup blog template if anything goes wrong you can reuse it again)
Search for code
]]></b:skin>After finding the code now copy your choice code and paste above to it
Border type: Simple Square Color
.widget {
padding: 5px;
border: 1px solid #ff0000;
}
Border type: Simple Square Color With Filled Background
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
}
Border type: Simple Square Border With Filled Background and Shade
.widget {
padding: 5px;
border: 1px solid #ff0000;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}
Border type: Simple Rounded Border
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
}
Border type: Simple Rounded Border With Filled Background
.widget {
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
}
Border type: Simple Rounded Border With Filled Background and Shade
.widget {After successful adding the code now, "Save the Template" and preview.
padding: 5px;
border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px;
background:#ffffff;
box-shadow: 3px 3px 3px #ff0000;
}












0 comments:
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. To add HTML CODE in comments then please use our HTML Encoder
2. You can always Test the tutorial on our HTML Editor
3. Please do not spam Spam comments will be deleted immediately upon our review.
Regards,
Imtiaz Ahmed