Monday, April 27, 2009
Blogger Link list with scroll bar / very long list of link list with scroll barsupport in blogger
One of my blog has link list which has lot of links in it. I thought of creating a scrollable link list, so that it should not occupy too much space. I was playing around with HTML template with some CSS style code and finally I found the solution to make scrollable link list. I would like to share the steps and code to make scrollable linked list. Though it requires editing HTML template of your blog it doesn’t require knowledge of HTML. You just need to apply bellow mentioned simple steps:
1. Login to blogger.com and go to Dashboard
2. Now go to Layout or Template of the blog for which you wanted to change the header image or add the new header image
3. Now you are at Layout -> Page Elements. Click on Edit HTML link to edit HTML template for the blog
4. Here the first thing you need to do is take a back of your HTML template. Hence you can restore it later if you wanted to undo changes (Click here to know how to backup and restore HTML template for blogger’s blog)
5. Select the check box “Expand widget Templates”
6. Now search following code to search name of the link list
type='LinkList'
7. Here Link list name is LinkList1 for your it could be LinkList1, LinkList2, LinkList3 … or similar
8. Now you need to add following code just before ]]></b:skin> in the HTML template as shown in following image:
#LinkList1 {
height:150px;
overflow:auto;
}
9. Here hight:150px; the height of the link list to increase the height use bigger number and to decrease the height use small number.
10. #LinkList1 specifies the name of link list is LinkList1 if the name is different than use #.
e.g. if link list name is LinkList2 than use #LinkList2
11. If you are having multiple link list than you need to add multiple code similar to bellow:
e.g. If you have 3 link list with names LinkList1 , LinkList2 and LinkList3 than code will be
#LinkList1 {
height:150px;
overflow:auto;
}
#LinkList2 {
height:150px;
overflow:auto;
}
#LinkList2 {
height:150px;
overflow:auto;
}
12. After this you can click on “PREVIEW” button to verify the changes, if everything is alright than click on “SAVE” button to save the template or if there is any problem than click on "Discard Edits" or “CLEAR EDITS” button to revert changes and make changes again from step 5
13. Finally if you are not happy with new look and feel or template then you can always restore the backed up HTML template at step 4 ( follow the instruction to restore the backed up template)
Related Articles
How to embed Adsense code within post (after post title and before post body) for the blogger blog ?
How to add / Change Header image of blogger’s blog?
How should I restore my blog’s logo after changing to custom template?
How should I change my blog’s logo?
Change the order of the blog post archive
How to enable / disable adsense ads for the blog post widget ?
My blog is lost or forgot username / password of blogger blog
How to change scroll bar color and look and feel for a blog or website / web page?
Blogger Link list with the scroll bar support - link list with large set of links
How to change value of Older Post / Newer Post / Home for the blogger's blog
Enable / Disable receiving comments alert on email for blogger blog
How to make comments for blogger's blog moderated and How to moderate comments ?
No comments yet