How to Customize Label Widget in Blogger with CSS?

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRaXRzLjXKq3g2dMpn5iA3KyUNdmksDwS6_KmgZvr0fX0LHtnXY_pkyy3FBYp3p9ceOCHtCNFmN2TyMDVv7AWYhIImZ8iSwq5_gPG73VhzFZp-TF4xIKx8IMZ6OTxTB9pWPVR9eipSPk/s1600/How+to+Customize+Label+Widget+in+Blogger+with+CSS.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="How to Customize Label Widget in Blogger with CSS?" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwRaXRzLjXKq3g2dMpn5iA3KyUNdmksDwS6_KmgZvr0fX0LHtnXY_pkyy3FBYp3p9ceOCHtCNFmN2TyMDVv7AWYhIImZ8iSwq5_gPG73VhzFZp-TF4xIKx8IMZ6OTxTB9pWPVR9eipSPk/s1600/How+to+Customize+Label+Widget+in+Blogger+with+CSS.jpg" title="How to Customize Label Widget in Blogger with CSS?" /></a></div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <a href="http://www.blogger.com/" style="color: #349ecb; text-decoration: none;" target="_blank">In blogger</a> you can change or customize any widget you want. The labels widget in blogger is by default very simple in almostall templates including custom ones. But, we can change the label widget to a fancy one respectively. As blogger labels are the categories for the entire blog's posts, so they should be looking more attractive and beautiful. And for this purpose today I have a trick to share with you. The trick is some CSS3 codes which will change your default labels widget to a fancy one.</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <b>Remember</b>, this trick will only bring best results if you keep the type of labels as cloud labels. Cloud shows all the label links in a box. So this trick will make them buttons. Now let's start adding the widget and the trick.</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; margin-bottom: 14px; padding: 0px;"> <span id="more-130"></span></div> <h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;"> How to add a label widget to blog?</h3> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> To apply today's trick you'll first have to add a label widget into your blog. follow given steps to add labels cloud widget in blogger:</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <ol style="margin: 0px; padding: 0px 0px 20px;"> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Blogger Dashboard</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Layout >> Add a Gadget >> Scroll Down and Select the Labels Widget</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Add it and select the cloud where it says "<b>Display</b>" also uncheck the box which says "<b>Show number of labels</b>"</li> </ol> <div> Now when you've added the label widget successfully, you can implement this trick on labels. But if you've already added the label widget then you just need to change it to the setting I mentioned at <b>step 3</b>.</div> </div> <h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;"> How to customize Label widget with CSS3?</h3> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> Now the actual part is here, in order to make your label widget fancy and attractive follow below steps and do it instantly:</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <ol style="margin: 0px; padding: 0px 0px 20px;"> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Go to Blogger</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Template >> HTML >> Proceed</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Find <b>]]></b> and just above/before it paste the following code:</li> </ol> <div> <blockquote style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/blockquote.png); background-origin: initial; background-position: initial; background-repeat: no-repeat; background-size: initial; border: none; margin: 5px 5px 20px; padding: 25px 30px 5px 70px;"> <div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> .label-size {<br /> float: left;<br /> margin: 0 0 7px 20px;<br /> position: relative;<br /> font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;<br /> font-size: 0.75em;<br /> font-weight: bold;<br /> text-decoration: none;<br /> color: #996633;<br /> text-shadow: 0px 1px 0px rgba(255,255,255,.4);<br /> padding: 0.417em 0.417em 0.417em 0.917em;<br /> border-top: 1px solid #d99d38;<br /> border-right: 1px solid #d99d38;<br /> border-bottom: 1px solid #d99d38;<br /> -webkit-border-radius: 0 0.25em 0.25em 0;<br /> -moz-border-radius: 0 0.25em 0.25em 0;<br /> border-radius: 0 0.25em 0.25em 0;<br /> background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba47');<br /> -webkit-box-shadow: inset 0 1px 0 #faeaba,<br /> 0 1px 1px rgba(0,0,0,.1);<br /> -moz-box-shadow: inset 0 1px 0 #faeaba,<br /> 0 1px 1px rgba(0,0,0,.1);<br /> box-shadow: inset 0 1px 0 #faeaba,<br /> 0 1px 1px rgba(0,0,0,.1);<br /> z-index: 1;<br /> }.label-size:before {<br /> content: '';<br /> width: 1.30em;<br /> height: 1.39em;<br /> background-image: -webkit-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: -moz-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: -o-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: -ms-linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> background-image: linear-gradient(left top, rgb(254, 218, 113), rgb(254, 186, 71));<br /> filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#feda71', EndColorStr='#feba47');<br /> position: absolute;<br /> left: -0.69em;<br /> top: .2em;<br /> -webkit-transform: rotate(45deg);<br /> -moz-transform: rotate(45deg);<br /> -o-transform: rotate(45deg);<br /> transform: rotate(45deg);<br /> border-left: 1px solid #d99d38;<br /> border-bottom: 1px solid #d99d38;<br /> -webkit-border-radius: 0 0 0 0.25em;<br /> -moz-border-radius: 0 0 0 0.25em;<br /> border-radius: 0 0 0 0.25em;<br /> z-index: 1;<br /> }</div> <div style="color: #999999; font-style: italic; line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> .label-size:after {<br /> content: '';<br /> width: 0.5em;<br /> height: 0.5em;<br /> background: #fff;<br /> -webkit-border-radius: 4.167em;<br /> -moz-border-radius: 4.167em;<br /> border-radius: 4.167em;<br /> border: 1px solid #d99d38;<br /> -webkit-box-shadow: 0 1px 0 #faeaba;<br /> -moz-box-shadow: 0 1px 0 #faeaba;<br /> box-shadow: 0 1px 0 #faeaba;<br /> position: absolute;<br /> top: 0.667em;<br /> left: -0.083em;<br /> z-index: 9999;<br /> }<br /> #Label1 {<br /> height: 210px;<br /> }<br /> .label-size:hover {<br /> background-image: -webkit-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: -moz-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: -o-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: -ms-linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: linear-gradient(top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fee18d', EndColorStr='#fec86c');<br /> border-color: #e1b160;<br /> }<br /> .label-size:hover:before {<br /> background-image: -webkit-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: -moz-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: -o-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: -ms-linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> background-image: linear-gradient(left top, rgb(254, 225, 141), rgb(254, 200, 108));<br /> filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1,StartColorStr='#fee18d', EndColorStr='#fec86c');<br /> border-color: #e1b160;<br /> }</div> </blockquote> <div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> Save your template and view your blog for the changes. You'll find a new stylish labels' widget on your blog.</div> <div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> Enjoy it and stay peaceful in your country <img alt=":)" class="wp-smiley" src="http://www.bestbloggercafe.com/wp-includes/images/smilies/icon_smile.gif" style="border: none; float: none; height: auto; max-width: 100%;" /></div> </div> </div>

How to Customize Label Widget in Blogger with CSS?

In blogger  you can change or customize any widget you want. The labels widget in blogger is by default very simple in almostall templa...

Read more »