Make Scroll Menu for label, post, widget, etc on blogger/blogspot

Basic scroll code :
The following are 2 examples of basic/standard scroll code that you can apply directly to your HTML Widget..

Example 1



Your links here...


Code:
<div style="overflow:auto;width:ancho;height:500px;padding:5px;border:1px solid #096DB0">

Your links here...

</div>


Example 2


Your links here...


Code:
<div style="overflow:auto;width:200px;height:300px;padding:5px;border:1px solid #096DB0">

Your links here...

</div>

Note: width:ancho , "ancho means : auto-fixed with widget section where you've placed the code" , or you may change it with any values, ex : 300px, 100px, ...etc

Make scroll menu on label

1 - First create label with an unique title, example "categories-1"
2 - Go to CSS section , Design/Layout - Edit HTML - Tick Expand widget template
3- Then, find the "categories-1"that you have made , then look at the red codes below , the red codes are that you must insert / add into it


<b:widget id='Label1' locked='false' title='categories-1' 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>


4- Afterwards, you can change the "categories-1" title as you want, the unique name is just to make it easier when you search for the code..


Make scroll menu on posting / blog archive

1 - Find the code below, and the red codes are that you must insert / add into it

<div id='ArchiveList'>
<div style='overflow:auto; width:ancho; height:200px;'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
</div>
<b:include name='quickedit'/>
</div>

Look here for HTML color codes

26 comments:

Chicago SEO said...

Carillion Technology Consultants' Search Engine Optimization services assist their Chicago clients increase their page rankings on the major search engines; Google, Yahoo, and Bing.

Ricardo Gambino said...

Excellent topic. Continue the great work. Thank you.

Chicago Web Design said...

I was really into searching for a site where I could find good articles, and here I am now. I am really amazed by your creativity to have come up with a post like this. Nice one.

Chicago SEO said...

Very informative post, I must say. This post is fully encouraging in its own ways and I am confident that it will even succeed in inspiring many people like me.

seo reseller said...

Also, the scroll script works well with and or in combination with CSS and PHP script. There are also scroll parameter scripts that enables better resolution for various screen widths.

Unknown said...
This comment has been removed by the author.
Sam said...

Thank you for the wonderful post and listing all the important stuff to being a successful blogger.

seo services said...

I am first here visiting your site while I'm Glad your a post a useful to help me i really like it .. thanks sharing tips

tomyares said...

Thank's for your a post a useful help me
(http://www.tomy-coretan.blogspot.com)

SEO Company Montreal said...

yup! as in these comments every one has thanked you for such a good and useful information but I also want something else to say and that is keep it up... :)

white label seo said...

A scroll menu, now why haven't I thought of that?

seo singapore said...

Thank you for the info. It sounds pretty user friendly. I guess I’ll pick one up for fun. thank u

Ecommerce developer said...

Interesting post.Very valuable information.Thanks for sharing it.

Dwijayasblog said...

Is there any way to implement this tricks for every widget without have to tweak them separate?

free7 said...

@ Dwijayasblog

Yes, using UL Class of the blog post
e.g. : ul class=data-post

Bisnis Online said...

this is very interest

al-qolam said...

mantabbb
very nice Website..

Distributor Alat Pancing

Anonymous said...

I think this is among the most important information for me.

And i am glad reading your article. But wanna remark
on few general things, The site style is wonderful, the articles is really excellent :
D. Good job, cheers
My page - backup camera

Anonymous said...

Asking questions are actually pleasant thing if you are not understanding anything fully,
except this paragraph offers nice understanding yet.
Also see my site :: sci-fi book blog

Anonymous said...

I wanted to thank you for this wonderful read!! I certainly enjoyed every bit of it.
I've got you book-marked to look at new things you post…
Take a look at my webpage ... Credit Repair Reviews

kontes indonesia said...

BOOKMARK PAGE!! love it

Anonymous said...

What's up, I read your blog daily. Your humoristic style is witty, keep it up!

My site; tens units for sale

Unknown said...

La plupart des  robinets vente en métal pour salle de bains et cuisine équipée avec un double-clic ou un robinets cascade. Dans le seul robinet est généralement moins cher, parce que c'est un moyen de transformer l'eau chaude, l'eau froide autrement que d'une poignée ou un bouton. robinetterie baignoire avec deux robinets, un de chaque température de l'eau. Ce type est généralement plus cher, mais il peut permettre à l'utilisateur grace à l'robinets LED l'eau chaude et froide mélangée pour obtenir leur température idéale. Les deux tap-tap sont habituellement faites de métal, et de finitions en laiton et chrome et mitigeur douche de nickel.

Unknown said...

When you’re ready to unwind after a long day, there’s nothing as relaxing as lying back and soaking in the tub. When you’re ready to fill up the tub, you’ll want it done properly and in style. http://www.findtaps.co.uk/68-bathtub-taps

Amycarry said...

With the http://www.faucetsmarket.com/antique-faucets-c-1.html coming in many different formats, it is easy to find a solution that works for you. Installing an Kitchen faucet Light KitA simple way to add LED lighting to your kitchen without spending a lot of money is to use an Bathroom mirror light kit.

Unknown said...

This is a very good guide to some essential SEO guidelines. Thanks for the information.

Digital Agency Philippines

Post a Comment