Wednesday, June 8, 2011

Making Labels With Scroll Function

Making Labels With Scroll Function
C
reating Labels With Scroll Function-It is not a strange thing for all of us who deals in blogging about the labels, and scroll function. The label is a function provided by blog service providers to classify our writing in several categories, for which we write writing can be more easily found by search engines in the search index on the category of writing that we write, to be more easily known to be our writing categories. But sometimes even our blog using one theme remains consistent, but our writing has various categories of posts, as I have this blog that actually has a theme, namely "Tips & Tricks Bloggers", which describes various tips and tricks that are related to Blogger . But my blog also has several categories, including Templates, SEO, Script, Monetizing, etc., that each category will have a different article. As examples of categories to Monetize, in which describes various tips and tricks and tutorials to make money with a good blogger who had the extension extension blogspot.com or wordpress.com, etc. or to obtain additional income from the internet or from our website .

But can we imagine if existing categories on our blog too much, what happens to our blog page which can be caused by a category that we have? Surely the sidebar of our blog page will be filled with the category of land will spend pages on our blogs, will make visitors uncomfortable due to slow loading, the display is not beautiful to look at, and so forth. Moreover, if we use the widget label with the list. Although we use the function of clouds, the things I mentioned still will happen, not to mention too many links on the tag clouds, this will make visitors uncomfortable to find a category that he wants.

This is what ultimately makes me interested in finding a ready-made scripts to create the scroll function on the labels or categories on my blog that I tempilkan to the display list, because I still lay in the field of programming let alone make the script itself, not to mention my lazy person. Hehehehe

Well this time I will share the with you on how to display a label on blogger with scroll function that I can from miscah.blogspot.com's blog. How easy and simple installation, just a few clicks, scroll label will appear. Good for those who can not wait, please follow the tutorial below:

1. Make sure you log in premises in the state of your blogger account.

2. On the Dashboard page, click the menu design

3. Then click add widget

4. Choose Labels

5. Make sure the labels with the "List"

6. Christened with the name "Category" and click save

7. Now go to Edit HTML.


8. Click the Expand Widgets Templates.


9. Find a buddy label that has been created earlier, with CTRL + F and type in "Category", it would appear that complicated HTML code, but do not bother to see the HTML code.


10. Just look at the text in red below, that code should be pasted into a label that has been my friend made.
<b:widget id='Label1' locked='false' title='Kategori' 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>

11. Click save

Each template has a different character, perhaps in your blog that there is a code

<div class='widget-content'>

not like the one on my blog are:
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>

an important location of the inserted additional code must be correctly placed.


For code height: 250px is the height of label scrolls, please pal replace with a higher number if you want to display the menu label is higher. Thank you.

5 Comment:

  1. thanks for this wonderful tips. I was able to have my labels scrollable. Yey!

    ReplyDelete
  2. Hello here,
    I am permanently exploring online for articles that can benefit me, and I am seriously benefited by this article! Best regards and gratefulness for the article writer.

    ReplyDelete
    Replies
    1. Thank you also to those of you who have visited this blog ...

      Delete
  3. This is a really well written article. I will make sure to bookmark it and return to read extra of your useful information. Thank you for the post. I will definitely return.
    website design

    ReplyDelete