Are you board with your Blogger labels widgets because its not supper cool? We know about this issue of every of Blogger. We have created the code for you to customize your labels widgets in your Blogger template and give the labels widgets the new look which is super cool. We give you two styles of Labels widgets. The first style is list style and second style is box style. Both these are easily customizable and work with any type of Blogger templates.
First Style (List Style Code):
- Go to your Blogger account and open the template tabs right of your Blogger dashboard.
- Click on the edit HTML and open it. The new window appears with your template codes.
- Now press Ctrl + F the new light box will appears and put the below code in to it to find the correct code.
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
|
Replace the above code with below code and save it your blog.
<b:loop values='data:labels' var='label'>
<li>
<a expr:href='data:blog.homepageUrl + "feeds/posts/default/-/" + data:label.name'>
<img alt='Subscribe' src='http://www.feedburner.com/fb/images/pub/feed-icon16x16.png' style='vertical-align:middle;border:0' />
</a>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
|
Refresh your blog and you will labels with list style.
Second Style (Box Style Code):
- Go to your Blogger account and open the template tabs right of your Blogger dashboard.
- Click on the edit HTML and open it. The new window appears with your template codes.
- Now press Ctrl + F the new light box will appears and put this ]]></b:skin> code in the box and just above this code ]]></b:skin> past the below code.
#textwidget {
color: #666;
font-size: 0.925em;
font-style: italic;
line-height: 1.6em
}
a.tag {
color: #777;
font: 9px verdana;
text-transform: uppercase;
transition: border-color .218s;
background: #f4f4f4;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
display: inline-block;
text-shadow: 0 1px 0 #fff;
-webkit-transition: border-color .218s;
-moz-transition: border .218s;
-o-transition: border-color .218s;
transition: border-color .218s;
background: #f3f3f3;
background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#F5F5F5), to(#F1F1F1));
border: solid 1px #ccc;
border-radius: 2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
margin: 0 4px 4px 0;
padding: 3px 5px;
text-decoration: none
}
a.tag:hover {
color: #333;
border-color: #999;
-moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 2px rgba(0,0,0,0.15)
}
a.tag:active {
color: #000;
border-color: #444
}
.slides {
font-size: 85%;
line-height: 130%;
overflow: hidden;
padding: 0;
margin: 30px 0 10px;
border-bottom: 1px solid #000
}
|
<b:widget id='Label1' locked='false'......... find until you find tis code </b:widget> replace code form <b:widget id='Label1' locked='false'......... to </b:widget>with below code.
<b:widget id='Label1' locked='false' title='Labels Cloud' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2>
<data:title/>
</h2>
</b:if>
<div class='textwidget'>
<div expr:class='"widget-content " + data:display + "-label-widget-content"'>
<b:if cond='data:display == "list"'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='"label-size label-size-" + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'>
<data:label.name/>
</span>
<b:else/>
<a class='tag' expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(
<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit' />
</div>
</div>
</b:includable>
</b:widget>
|
Refresh your blog and you will labels with list style.
Give us feedback about your experience with these codes. If you face nay problem please do lest us know we will solve your problem in a jiffy.
About Post Author:
This post is fruit of pen-clipping of Mohammad Hamza, poineer of ProFeedLinks. He likes to shear about his thought and experience with others.
Read more about Mohammad Hamza »
0 comments:
Post a Comment
Share your Feedback and suggestion with us. Any question or need some please contact us and get instant help. Do not post Spam or Back links comments. If spam or post backlinks comments on this blog, your comment will be deleted.