Beginners ignore this: For those of you who are looking for ways to dissect and edit your Pages gadget instead of switching to Linklist gadget, you can refer to this post.
Update Note: You can readily add external links in Pages gadget using the new Blogger interface. Do give it a try.
Step 1:
Go to Dashboard - Design - Page Elements - Click 'Add a Gadget' below your header. If you already have Pages gadget sitting there, click Edit - Remove.
Go to Dashboard - Design - Page Elements - Click 'Add a Gadget' below your header. If you already have Pages gadget sitting there, click Edit - Remove.
Step 2:
Scroll towards the middle of the list and choose LinkList from the list of gadgets. Click on '+' to select.
Scroll towards the middle of the list and choose LinkList from the list of gadgets. Click on '+' to select.
Step 3:
In the LinkList window, leave the 'Title' and 'Number of items to show in list' fields blank. Let the 'sorting' field be as it is. In the 'Add List Item' field, insert the title of your first link. These are the texts that will appear in your menu bar. Once you've inserted your title, don't click on anything yet, go to Step 4.
In the LinkList window, leave the 'Title' and 'Number of items to show in list' fields blank. Let the 'sorting' field be as it is. In the 'Add List Item' field, insert the title of your first link. These are the texts that will appear in your menu bar. Once you've inserted your title, don't click on anything yet, go to Step 4.
Step 4:
Click on the chain icon next to the 'Add List Item' field. Proceed to Step 5.
Click on the chain icon next to the 'Add List Item' field. Proceed to Step 5.
Step 5:
Enter the address of your first link. Click OK when you are done.
Enter the address of your first link. Click OK when you are done.
Step 6:
Click on 'Add Item' now.
Click on 'Add Item' now.
Step 7:
Repeat Steps 3 to 6 until all the links that you want to add are added. Don't forget to add links to your static pages as well. You can get the links to your static pages by going to Dashboard - Edit Post - Edit Pages - View - Copy the link from your browser's address bar.
Repeat Steps 3 to 6 until all the links that you want to add are added. Don't forget to add links to your static pages as well. You can get the links to your static pages by going to Dashboard - Edit Post - Edit Pages - View - Copy the link from your browser's address bar.
Step 8:
Click on the small up (↑) and down (↓) arrows to sort your links out. Click on 'Save' when you are done.
Click on the small up (↑) and down (↓) arrows to sort your links out. Click on 'Save' when you are done.
That will be all folks. Cheers and God bless.
Is there a way to have the external link open up in the same window?
ReplyDelete@Anonymous: That will be a little bit more complicated. I'll show you nonetheless. Perform Step 1, Step 2, and click Save in Step 3. Skip all the other steps.
ReplyDeleteGo to Dashboard - Design - Edit HTML - Check the box next to 'Expand Widget Templates' and find for this: <li><data:item/></li>
Delete that line, and start inserting your links in HTML. I will give you examples instead:
<li><a href="http://staticpage.com">My Static Page 2</a></li>
<li><a href="http://www.southernspeakers.net">Voices from South</a></li>
<li><a href="http://southernspeakers.net/static.html">My Static Page 1</a></li>
<li><a href="http://flickr.com/idividedby0">Flickr</a></li>
<li><a href="http://www.youtube.com/yoboy77">My Youtube</a></li>
<li><a href="https://my.sunderland.ac.uk/pg/profile/bg01kw">Sunderland</a></li>
Click on Save template then. You can use the same code above, just change the address and the title. I'm sure you'll be able to tell which one is which. We have manually added the links to our HTML, so it will open in the same window now. The disadvantages: this might look complicated (actually it is not) and you can't easily edit the links from Page Elements.
Cheers and God bless.
Hey this is wonderful tutorial, i thank you whole heartedly..
ReplyDelete@Harsha: Glad you think so. You're welcome. Cheers.
ReplyDeleteHi YoBoy. Thank you so much for all this help. I am trying to add a link list as well..I followed your steps ...but in the URL section..I am not sure what to enter exactly. Basically I just want my posts to be listed under separate links. Can you help please? Thanks!
ReplyDelete@Mrs. Alaoui: You have to enter the address of your posts in the URL section. You can get the address of your posts by clicking on your post's titles from the main page, and when the post page loads, copy the address of that page from your browser's address bar. Cheers.
ReplyDeleteWow, thank you so much, i've been looking for an answer to this for about 3 hours now!
ReplyDelete@EnLight: No problem. Glad you came to the right place. Cheers.
ReplyDeleteThis was very helpful. But, I'm curious if it's possible to have the static link tabs along with the external link tabs all horizontal under the header. Currently I can only get external one to show, but none of my static ones do. For example...I need an external link for my shop, but I need static ones for Home, About Me, Tutorials, etc. Thanks for any help!
ReplyDelete@Cozy Pumpkin: It is possible to have both Linklist gadget and Pages gadget side by side, but that will take a lot of unnecessary work. If you're interested, look into section-division using HTML tables. I'd teach you how but I have a better suggestion.
ReplyDeleteInstead of using Pages gadget for your static page links and Linklist gadget for your external links, why not throw everything in Linklist instead? You could have a link in Linklist gadget that says 'Home' that'd point to your homepage, and other static page's names that would point to their respective addresses.
If you still want to have both Linklist gadget and Pages gadget side by side, use the contact form and get in touch with me. Send your template over so that I can easily guide you on what to do.
thank you for this tutorial. really big help!
ReplyDeletei've already made a horizontal list.
is there a way to align it to center?
scratch that, i figured it out. thank you!
ReplyDelete@raldical: Glad you got it figured. Cheers :)
ReplyDeleteThis is I think really appreciative work done. This might help in many good causes....
ReplyDelete@Spy: Glad you think so :) Cheers.
ReplyDeleteIs there a way to move blogroll gadget to separate static page (as links) instead of sidebar? I would be very grateful about the information.
ReplyDeleteK
@Anon: Yes there is. Refer to these posts:
ReplyDeleteDedicated Separate Archive Page
You should be using the same steps in the tutorial above. And in Step 2, use the following code (don't forget to change the URL):
<b:if cond='data:blog.url != "http://testblog8-southernspeakers.blogspot.com/p/followers.html"'>
<style>
#BlogList1{
display:none;
}
</style>
<b:else/>
<style>
#Blog1{
display:none;
}
</style>
</b:if>
great tutorial! I tried it above the header and ended up with a vertical list instead of a horizontal one, is there a way to get a navigation bar, above the header to be horizontal?
ReplyDeletethanks!
@Marcelina: Yes there is, here you go:
ReplyDeleteHorizontal Blogger LinkList Gadget
God bless :)
genius! thank you very much!!!!
ReplyDeleteHi YoboY,
ReplyDeleteThanks for all the help here, fantastic source of information - and much appreciated. I am trying to figure out how to add pictures to my link list elements (individually) as well as how to take them out of the dock completely (I'm using dynamic views).
my blog is: singulus.blogspot.com
I'm trying to place the contents of the page 'Countries I've been to' to show up in the sidebar and have links by label to the posts related to certain countries... I would appreciate your help with this.
Thanks a lot!
Hi Author,
DeleteI hate to reply questions with questions, but I need further clarifications on the things you've asked.
1) how to add pictures to my link list elements (individually)
Q: Add picture where? To the gadget's link background?
2) how to take them out of the dock completely
Q: Don't think you can take the contents out. Where exactly do you wanna bring them to? Perhaps you could replicate the contents elsewhere?
Cheerss..
Hi Yoboy,
ReplyDeleteThanks for coming back to me and sorry if I wasn't clear. If you see my blog, I have a page called 'Countries I've been to'. There's a list of countries (with little flag icons next to the names) and the countries with posts are shown as links (I did this through labeling).
All I want is to show this list of countries and flags on the main page on the sidebar (exact same list and format). I can do a link list, but then all of them have to be links, even the ones where I have no posts, and also, I can't add the little flag icons next to the list names (i.e. country names).
http://singulus.blogspot.com/
Please let me know if this isn't clear.
Thanks
I get what you mean now. Unfortunately, the Linklist gadget is the only way forward. I admit, you'll have to include links for all the countries, even for countries that you've got no posts on. In any case, after working on it for quite some time, I came up with this:
Deletehttp://yoboy-11.blogspot.co.uk/
Check out what I did in the test-blog above. I included the flag, and I kinda hide the text for China and just left the flag. You could do the same for countries that you haven't visited. This is the code that I used. Let me know if you have questions on it:
.gadget-linklist-item{
padding: 0px;
position: relative;
right: -30px !important;
}
.gadget-linklist-item a{
position: relative;
top: -5px !important;
}
.gadget-linklist li:nth-child(1){
list-style-image: url(http://4.bp.blogspot.com/-hrvz7iSExOg/T2lDdduvbvI/AAAAAAAABKc/QuJGFYBpAFE/s320/Belgium.png);
}
.gadget-linklist li:nth-child(2){
font-size: 0px !important;
list-style-image: url(http://2.bp.blogspot.com/-QgQcp4K5004/T2lFZdBt3lI/AAAAAAAABKo/hoFkUuJeH0s/s320/China.png);
}
.gadget-linklist li:nth-child(3){
list-style-image: url(http://2.bp.blogspot.com/-MXVdImZxQ6A/T2GnGvhQyWI/AAAAAAAAA0k/Vwvz1BxjSgs/s320/Malaysia.png);
}
Wow, this is exactly what I wanted! Thanks so much. Instead of hiding some items I decided to just change the font color for the ones with no posts - not terribly elegant as it is kind of cheating the eye but will be fine until the Lists gadget will work with Dynamic Views I guess. Thanks again - you are fantastic!
ReplyDeleteGreat idea. Have fun bloggin, and traveling :)
DeleteIs there a way to display the link list the same as tabs? I have tabs now but I want to put the links in Alphabetical Order and don't want to do it manually think you can help?
ReplyDeleteHi there.. I'm not sure if I'm following.. If you place your link list below your header, technically they are your tabs as well. And you can re-order your links by clicking on the up and down arrow (when you edit your Linklist gadget). I might have a better idea if I have a look at your blog :)
DeleteOh, right now I'm just using the pages as tabs don't know much about the link list though I wasn't sure if I could have seperate tabs for the link list like if I posted links to youtube videos for one tab and maybe post game reviews for the other tab sorry if I'm confusing you but it was annoying trying to put all the links in Alphabetical order manually.
DeleteYes you'll have separate tab for each link, just like Pages gadget. You could sort it alphabetically by choosing 'Sort Alphabetically' under 'Sorting'. Give it a try.
DeleteSo do I have to make multiple link lists? I thought gadgets could only be used once? Anyway, I'll test it thanks for your help I really appreciate it.
DeleteYou don't have to use multiple linklist gadget, as one is enough to do the trick. You can include multiple links in one gadget.
DeleteDo you think you could make a tutorial or something to help me understand? I'm new to blogger thanks :)
DeleteOh, and i'm trying to make multiple tabs with the linklist but don't know how.
ReplyDeleteI do have tutorial on it - oh wait, you're already seeing it :) Have you tried following the tutorial in this page? Just add few links to your linklist, and place it below your header.
DeleteIn any case, what's your blog's address? And why don't you try using Pages gadget if you find Linklist difficult?
I did read the tutorial but I was just wondering if link list can work the same way as the pages gadget where they have multiple tabs instead of one for the link list also, I don't have any links as of right now since I just made the site today.
ReplyDeleteYes, they work the same way. Pages gadgets weren't able to support external links in the past, thus Linklist gadgets were preferred. But now, pages gadget could add external links as well. I don't see an advantage to Linklist gadget anymore. Stick with Pages.
DeleteAlright, thanks anyway the only reason I was asking about the linklist gadget was because you could sort it in Alphabetical order and in pages gadget you can't I guess I'll have to do it manually though.
ReplyDeleteYou still can sort links in Pages gadget, but not automatically. Go to Dashboard - Pages and you should be able to click and re-position the boxes. Cheers..
DeleteI menat the links you add into the pages anyway to sort them or do you have to do it manually?
ReplyDeleteYes that's what I meant as well.. Yes you can sort them, and yes you need to sort them manually. See my previous reply.
DeleteHey, is there any way to create a drop down menu using the link list, as seen on www.spoonybardreviews.wordpress.com?
ReplyDeleteHi Anon,
DeleteI'm not sure about Linklist, but there are plenty of ways to add a drop-down menu to Blogger. Just Google them up :)
thnx man ,
ReplyDeletehttp://cairo-pro.blogspot.com/
Don't mention it :)
DeleteNice blog and nice post,
ReplyDeletebut i want to decrease font size of title of the links,and also gaps b/w titles.
My blog is
www.geeksnetworks.org
Hi Vinay,
DeleteTo reduce your post title's font size, add this to your CSS:
.post-title a{
font-size: 20px !important;
}
As for reducing gap between titles, I'm not quite sure which title you're referring to. Were you referring to the gap between your posts?
Cheers..
thanks man..
ReplyDeleteNo biggie :)
DeleteThank you for this post! Is there a way to remove the boxes that show up around the horizontal list of links? I would also love it if you could tell me how to center these links... I know someone said earlier in this thread that they figure it out but I cannot! Here's my blog: http://stiff-lip.blogspot.com/
ReplyDeleteHi Molly,
DeleteAdd this to your CSS:
#LinkList1 ul{
width: 260px !important;
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
.tabs-inner .widget li a, .tabs-inner .section:first-child ul{
border: 0px !important;
}
Cheers.
Thank you! How do you then center the links? I've looked around so many sites and nothing what I've found has worked for me. And I've done other custom CSS before, so I know I'm following the steps correctly. Thanks!
ReplyDeleteHi Sarah,
DeleteIt depends largely on your blog. What's your blog's address?
Hi Yoga - I've been successfully using Link List until now. Just tried to add my 6th Link in the list and when I click on it, after I add it, it does go to the correct site. But when I try to save the revised gadget, I get the message "please correct the errors on this form". I can't figure out what the errors are. Any suggestions??
ReplyDeleteHi Debra,
DeleteSometimes glitches happen, and it is difficult to understand the reason behind it. In any case, try clearing your browser's cache/cookies. If that doesn't work, try using a different browser.
Hi, I was wondering if you could help. I'd like to add two thick horizontal black lines, one above the link lists but under my banner and one under the link lists just before the main body of the blog. Just as a way to seperate things! A bit like this: http://www.miss-tangerine.blogspot.pt/
ReplyDeletethanks!
Hi Vicki,
DeleteSee if this is what you're looking for:
#LinkList1 ul{
border-top: 4px solid black !important;
border-bottom: 4px solid black !important;
}
Cheers..
Link list gadget, as of today, is not working. Go in there to add a url, and it does nothing. Click "add" a hundred times and it does nothing. Anyone know a way around this? It's greatly irritating.
ReplyDeleteHi Eric,
DeleteI've seen several other reports in Blogger Help Forum. For latest updates, subscribe to one of the threads in the forum (or start one of your own).
Cheers..
Hi, everybody.
ReplyDeleteHow to configurate my blog so that my link list be opened in a new window. Thank you!
You're gonna have to make a small change in your template. Are you looking to make all linklist open in a new tab or just a particular one? Mind if I take a look at your template?
DeleteHi! Is there a way that could the current page appear as active, with a highlighted link? Thank you!
ReplyDeleteHello there. You'll have to use Pages gadget for that - I don't think Linklist gadget can highlight active pages.
DeleteDear Yoga, thank you very much for your reply. To tell you the truth, I managed to find a piece of code that enabled me to use Linklist gadget and also highlight the current page. One could see it in my blog
Deletehttp://newcaredentist.blogspot.gr/
Thank you very much for the information that you provide here!
This might have been answered before..
ReplyDeleteI did it once before, but cannot figure out how to do it: Once I create a Link List, how can I remove the horizontal lines/borders that separate each link? Any help would be appreciated!
Hello Travis,
DeleteI need to look at your blog to answer this. What's your blog's address?
Hello
ReplyDeleteIf this thread is still active....
Do you know of a way to add drop downs to the list?
Hello,
DeleteI haven't actually tried it - but I've come across plenty of third party tutorials showing ways to add drop down menus to Blogger.
Do you know how to do this? http://stackoverflow.com/questions/33015075/how-to-list-blogger-posts-by-label-in-alphabetic-order
ReplyDeleteNot working with my blogspot link :(
I'm not very versed in JSON, I'm sorry. But if you've got some time to fiddle around, you may want to look into this:
Deletehttp://stackoverflow.com/questions/33146801/sort-jquery-result-alphabetically/33146861
I will get back to you if I ever come across a way to get this integrated with Blogger.
Hi all, Is there a way to group some links under some header and by clicking it the links related to it wud be listed under it, just like the archive post option but instead of dates,i need some other names on the leading texts. Thanks in advance
ReplyDeleteWhat you want is a drop-down menu. I don't have a tutorial on it but there are plenty of tutorials around. Just try some for the templates you've got :)
DeleteThank you very much.
ReplyDeleteI have a problem. I suppose there's a link limit in LinkList gadget. Because, after 6 links, it didn't work.
I want to show my own popular pages links, they're more than 6. (Actually they're a kind of tv serial/story)
How can I show all links?
Thanks in advance.
(By the way I'm 59 and don't understand technical templates ets. :)))
Latets hindi, punjabi, album songs lyrics
ReplyDeleteAtif Aslam Latest Songs Lyrics Collection
Roke Na Ruke & Mast Magan Lyrics
Baat Ban Jaye Lyrics from A Gentleman
Lyrics of Khair Mangda from A Flying Jatt Atif Aslam
Mera Yeh Jahan Lyrics latest hindi song lyrics
Barfani song lyrics from Babumoshai Bandookbaaz