Make a rolling label


At this time blogger tip I will try to make a few tips on how to make a label with the roll. Everyone already knows not that the label is the category of a blog, more and more categories then it will display the label length. The solution is:


  • Login to Blogger
  • Click Layout->Edit HTML,
  • Download Full Template
  • mark on "Expand Widget Templates"
  • Search for:
<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>

<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>

Place the following codes:

<div style='overflow: auto; width: 160px; height: 300px; text-align: left;'>

End it with bellow code:

</div>

The end result looks like bellow:

<b:widget id='Label1' locked='false' title='Categories' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div style='overflow: auto; width: 160px; height: 300px; text-align: left;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>

<data:label.name/>

<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
<data:label.name/>
</a>
</b:if>
<span dir='ltr'>(<data:label.count/>)</span>
</li>
</b:loop>
</ul>
</div>

You can change 160px and 400px in accordance with your needs
  • Preview it and Save
  • Done

0 comments:

Post a Comment