Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Saturday, March 19, 2011

How to use Blogger's Linklist Gadget

This one is for the beginners. Quite some time ago, Blogger introduced the concept of Static Pages, where you can create up to 10 stand-alone independent pages. To add the links of the pages to your homepage, Blogger came up Pages gadget. Pages gadget is a cool add-on. It sits below the header and serves like a menu bar or navigation bar to your blog. But here comes the down-side: you can't just add any links to your bar (at least not easily). You can only add your static pages' links. In this pictorial walkthrough, I'm gonna show you how you can use LinkList gadget as an alternative to Pages gadget to make your very own customized navigation bar.


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.



Step 2:

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.



Step 4:

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.



Step 6: 

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.




Step 8:

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.

72 comments:

  1. Is there a way to have the external link open up in the same window?

    ReplyDelete
  2. @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.

    Go 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.

    ReplyDelete
  3. Hey this is wonderful tutorial, i thank you whole heartedly..

    ReplyDelete
  4. @Harsha: Glad you think so. You're welcome. Cheers.

    ReplyDelete
  5. Hi 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
  6. @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.

    ReplyDelete
  7. Wow, thank you so much, i've been looking for an answer to this for about 3 hours now!

    ReplyDelete
  8. @EnLight: No problem. Glad you came to the right place. Cheers.

    ReplyDelete
  9. This 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
  10. @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.

    Instead 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.

    ReplyDelete
  11. thank you for this tutorial. really big help!
    i've already made a horizontal list.

    is there a way to align it to center?

    ReplyDelete
  12. scratch that, i figured it out. thank you!

    ReplyDelete
  13. @raldical: Glad you got it figured. Cheers :)

    ReplyDelete
  14. This is I think really appreciative work done. This might help in many good causes....

    ReplyDelete
  15. @Spy: Glad you think so :) Cheers.

    ReplyDelete
  16. Is there a way to move blogroll gadget to separate static page (as links) instead of sidebar? I would be very grateful about the information.

    K

    ReplyDelete
  17. @Anon: Yes there is. Refer to these posts:

    Dedicated 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>

    ReplyDelete
  18. 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?
    thanks!

    ReplyDelete
  19. genius! thank you very much!!!!

    ReplyDelete
  20. Hi YoboY,

    Thanks 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!

    ReplyDelete
    Replies
    1. Hi Author,

      I 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..

      Delete
  21. Hi Yoboy,

    Thanks 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

    ReplyDelete
    Replies
    1. 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:
      http://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);
      }

      Delete
  22. 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!

    ReplyDelete
    Replies
    1. Great idea. Have fun bloggin, and traveling :)

      Delete
  23. Is 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?

    ReplyDelete
    Replies
    1. Hi 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 :)

      Delete
    2. Oh, 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.

      Delete
    3. Yes 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.

      Delete
    4. So 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.

      Delete
    5. You don't have to use multiple linklist gadget, as one is enough to do the trick. You can include multiple links in one gadget.

      Delete
    6. Do you think you could make a tutorial or something to help me understand? I'm new to blogger thanks :)

      Delete
  24. Oh, and i'm trying to make multiple tabs with the linklist but don't know how.

    ReplyDelete
    Replies
    1. I 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.

      In any case, what's your blog's address? And why don't you try using Pages gadget if you find Linklist difficult?

      Delete
  25. 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.

    ReplyDelete
    Replies
    1. Yes, 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.

      Delete
  26. Alright, 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.

    ReplyDelete
    Replies
    1. You 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..

      Delete
  27. I menat the links you add into the pages anyway to sort them or do you have to do it manually?

    ReplyDelete
    Replies
    1. Yes that's what I meant as well.. Yes you can sort them, and yes you need to sort them manually. See my previous reply.

      Delete
  28. Hey, is there any way to create a drop down menu using the link list, as seen on www.spoonybardreviews.wordpress.com?

    ReplyDelete
    Replies
    1. Hi Anon,

      I'm not sure about Linklist, but there are plenty of ways to add a drop-down menu to Blogger. Just Google them up :)

      Delete
  29. thnx man ,
    http://cairo-pro.blogspot.com/

    ReplyDelete
  30. Nice blog and nice post,
    but i want to decrease font size of title of the links,and also gaps b/w titles.
    My blog is
    www.geeksnetworks.org

    ReplyDelete
    Replies
    1. Hi Vinay,

      To 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..

      Delete
  31. Thank 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/

    ReplyDelete
    Replies
    1. Hi Molly,

      Add 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.

      Delete
  32. 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!

    ReplyDelete
    Replies
    1. Hi Sarah,

      It depends largely on your blog. What's your blog's address?

      Delete
  33. 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??

    ReplyDelete
    Replies
    1. Hi Debra,

      Sometimes 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.

      Delete
  34. 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/

    thanks!

    ReplyDelete
    Replies
    1. Hi Vicki,

      See if this is what you're looking for:

      #LinkList1 ul{
      border-top: 4px solid black !important;
      border-bottom: 4px solid black !important;
      }

      Cheers..

      Delete
  35. 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.

    ReplyDelete
    Replies
    1. Hi Eric,

      I'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..

      Delete
  36. Hi, everybody.
    How to configurate my blog so that my link list be opened in a new window. Thank you!

    ReplyDelete
    Replies
    1. 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?

      Delete
  37. Hi! Is there a way that could the current page appear as active, with a highlighted link? Thank you!

    ReplyDelete
    Replies
    1. Hello there. You'll have to use Pages gadget for that - I don't think Linklist gadget can highlight active pages.

      Delete
    2. Dear 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
      http://newcaredentist.blogspot.gr/
      Thank you very much for the information that you provide here!

      Delete
  38. This might have been answered before..

    I 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!

    ReplyDelete
    Replies
    1. Hello Travis,

      I need to look at your blog to answer this. What's your blog's address?

      Delete
  39. Hello
    If this thread is still active....
    Do you know of a way to add drop downs to the list?

    ReplyDelete
    Replies
    1. Hello,

      I haven't actually tried it - but I've come across plenty of third party tutorials showing ways to add drop down menus to Blogger.

      Delete
  40. Do you know how to do this? http://stackoverflow.com/questions/33015075/how-to-list-blogger-posts-by-label-in-alphabetic-order

    Not working with my blogspot link :(

    ReplyDelete
    Replies
    1. 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:

      http://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.

      Delete
  41. 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

    ReplyDelete
    Replies
    1. What 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 :)

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.