Breaking News
Loading...
Thursday, 27 March 2014

Labels Widget For Bloggers Customized By Designcart.org

design cart styled labels for bloggers
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.


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
Remember It: Add list style labels only do not add cloud labels.


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.
Congratulations! you have successfully added customizations to your labels widget



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

 
Toggle Footer