Today while surfing in vain on web I stumbled upon Designcart.org, a theme-resource site for bloggers and theme designers.In this whole site one thing which I liked the most was the Customized Label Widgets which was a very simple and attractive. Soon I decided how will it be if other bloggers can also avail this customized labels widget? That's how this article came out to you just for sharing this beautiful widget
So friends lets us now dive into the tutorial to learn how can we implement this widget on our bloggers site.
Share is Care! I hope owner of the designcart will not get annoyed when he sees I have hacked and share this widget to others. Any ways friends do not forget to share your words in comment box below, feel free to share your words with me.
So friends lets us now dive into the tutorial to learn how can we implement this widget on our bloggers site.
Step#1 : Adding Widget
- Before customizing first add the widget
- To add widget open Blogger dashboard → Layout → Add a gadget → Labels Widget.
- And then add the labels widget
Step#2 : Customizing Widget
- Open Html editor from Blogger dashboard → Template → Html editor
- Now add the below given css code before ]]></b:skin>
Css
.Label {display: block;width: 100%;background: #FDFDFD;margin: 0 auto;padding: 10px;} .Label h2 {display: table;margin: 0 auto 5%;line-height: 1.5em;font-style: normal;font-size: 22px;letter-spacing: 0.5px;padding-bottom: 0%;border-bottom:1px solid #C4C4C4;text-align: center;font-weight: normal;color: #5A5A5A;} .Label .widget-content { padding: 5px 5px; margin: 0; font-family: 'Arial', arial, serif; } .Label ul {list-style-type: none;margin: 0 0px;padding: 0; } .Label ul li {float: left;width: 42.5%;margin: 0 0 5px 5px;color: #616060;text-decoration: none;padding: 6px;display: block;text-align: left;font-family: 'Arial', arial, serif;text-indent: 0px;font-size: 13px;background: #FFF;border: 1px solid #EFEFEF;text-transform: capitalize;border-radius: 1px;-moz-border-radius: 1px;-webkit-border-radius: 1px;}
- Save the customization made in your template and have a look on preview.
Share is Care! I hope owner of the designcart will not get annoyed when he sees I have hacked and share this widget to others. Any ways friends do not forget to share your words in comment box below, feel free to share your words with me.
0 comments:
Post a Comment