How To make Label Scroll Function In Blogger

How To make Label Scroll Function In Blogger

How does your blog guys? I hope you have many improvement on your Blog. Along this week, I was surfing on the internet from one Blog to another Blog and I look at the sidebar which some of them create a “Label”. This was actually good to create a Label so that people will know what kind of category they have. But, for Blog which has a many categories, this goes down vertically so long that take more space. Alternatively, I think that why do not make it shorter in order to look professional. For those of you who have many categories, it is better to make it label scroll. The screenshot will look like below:

Looks great right, Today I would like to tell you how to make Label scroll on your Blog, simply follow my steps below:

1. Log in to your blogger account
2. Choose design and Add gadget to choose Label
3. Give name of topic, let’s say “Category” then save it.
4. Now, go to edit HTML
5. Remember always backup your template (this will help you if anything goes wrong in adding or changing HTML code).
6. Find the script like below

<b:widget id='Label1' locked='false' title='category' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<div style='overflow:auto; width:ancho; height:250px;'>

<b:if cond='data:display == &quot;list&quot;'>
<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 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='&quot;label-size label-size-&quot; + 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 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>

7. Some of you may have the code like below, try by use CTRL+F and find the code below, means that you must add the code with red color immediately BELOW this code.

<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'> 

8. or if you do not find code above try to find alternative code below

<div class='widget-content'>

9. The only thing you have to focus is the red color, means that you just need to add the code with the red color above in between, do not wrong place the red color code. Just simple follow the same script above. Save it.

10. You can definitely change Height:250px to suit with your Blog, try it until you get it right. Keep making a professional Blog.