Southern Listeners

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

Saturday, February 19, 2011

Horizontal Blogger LinkList Gadget

Instead of using the ever-so-popular Pages gadget, lots of users prefer to use the LinkList gadget as their menu bars. Why? Because with Pages gadget, you can only add links to your static pages (Update: This is no longer true in the new Blogger interface). But with LinkList gadget, you can add external links, links to almost just anything. I've shown you how you can replace your Pages gadget with a LinkList gadget here.

Apparently, some of the older templates do not have proper 'crosscol' definitions to make LinkList gadget behave like the Pages gadget. Ideally, we want our gadget to stretch horizontally from left to right across the page, usually below the header. But this isn't the case for some of the older templates, as the LinkList stretches downwards vertically. In this post, I'm gonna show you how you can easily fix it, and use LinkList gadget instead of Pages gadget as your menu bar.


If you're using the old Blogger interface: Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.
#crosscol ul{
padding: 0;
}

#crosscol ul li{
display: inline-block;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}
OR
#crosscol ul{
padding: 0;
}  

#crosscol ul li{
display: inline;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 0px;
padding-left: 0px;
}
OR
.LinkList ul{
padding: 0;
}
 
.LinkList ul li{
display: inline-block;
padding-bottom: 8px;
padding-top: 8px;
padding-right: 10px;
padding-left: 10px;
}
There you go. Feel free to adjust the left, right, bottom and top paddings as you like. If you want to apply any other modifications, like borders and such, leave a comment and I will assist you accordingly.

77 comments:

  1. tyvm ya! :D
    in a minute ago i want to visit ur blog because i want to ask u about this menu bar.
    Then when i reach here & it already available at ur post.hehe.thanks! :)
    so happy~ lalala~

    ReplyDelete
  2. @Cutie Kitty Hakmilik Mr.Myz: Obviously you're having a good day. Should you have any other questions, and the answer that you're looking for doesn't magically appear here, feel free to shoot it at me.

    Cheers.

    ReplyDelete
  3. Thank you so so much! Was searching for a while for an easy explanation - your's was by far the most "user friendly".

    I am wondering if you can share how to change the size & color of your horizontal links.

    ReplyDelete
  4. @Jessica: Sure thing. Go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog:

    #crosscol a{
    color: black;
    font-size: 25px;
    }

    Cheers and God bless.

    ReplyDelete
  5. Thank you, thank you, thank you! I've been looking for a solution to this problem for the past three days.

    ReplyDelete
  6. @Kiley Boo: Glad you found the fix here.

    Cheers.

    ReplyDelete
  7. Yoboy ur da fuckin man, i just wanna ask you how to replace the text with images, if it's possible?

    ReplyDelete
  8. @Green: If you wanna use images instead, just use the HTML/Javscript gadget. You need to know how to insert image with link using HTML. It's really easy. Here's an example:

    <a href="TARGET_ADDRESS">
    <img width="35" height="35" src="IMAGE_ADDRESS"/></a>

    You just have to place HTML's like this by stack, and you'll get a horizontal linked pictures.

    ReplyDelete
  9. I too had the question about using images to create the links. I know how to use the html gadget, but I didn't quite understand your instructions on how to get them to go horizontally underneath the header. thanks for this tutorial!

    ReplyDelete
  10. @scooping it up: Get in touch with me via the contact form, and I will assist you accordingly. Cheers.

    ReplyDelete
  11. it doesn't work. I've just changed my template. but it works on my previous template. any ideas how to solve this?

    ReplyDelete
  12. I'm sorry but forget my question. I've changed it to my previous template. sorry :)

    ReplyDelete
  13. sorry but I've decided to use my prev template. forget my question. sorry :)

    ReplyDelete
  14. @Nduk: No problem. Don't worry about it.

    ReplyDelete
  15. Hello!...Thank you for your tutorials! This one is not working for me?....I copied and pasted applied to blog, and they are still stacked....idk if it has to do with the blog background/template thing...my blog is http://www.threelittlemunkees.blogspot.com. Is my layout preventing this tutorial from working?

    ReplyDelete
  16. ahhh!!! I did it! I forgot to hit "enter" after the last character :) Thank you thank you thank you for your tutes!

    ReplyDelete
  17. @Margaret: Glad you got it figured. Cheers.

    ReplyDelete
  18. hi there! i can't seem to make it work and i am wondering where i went wrong, here is the site http://wheremythoughtsarekept.blogspot.com/ and i've been trying to fix it but i'm really having a hard time.

    thanks for any help ☺

    ReplyDelete
  19. @Aya: Use this:

    .LinkList ul{
    padding: 0;
    }

    .LinkList ul li{
    display: inline-block;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-right: 10px;
    padding-left: 10px;
    }

    Cheers and God bless.

    ReplyDelete
  20. Hi! This was SO helpful! Thanks a million!
    One question - how do I change the font and make the headings bold?

    Thanks again.

    ReplyDelete
  21. @Lindsay: Well that depends. What font are you going for? You can make the headings bold by adding the CSS below:

    #LinkList1 ul li a{
    font-weight: 900 !important;
    }

    ReplyDelete
  22. You create great guides, and I'm wondering if you can help me with something. I'm running a site of Blogger and want to create a "Click to Enter" page. It could be like a Static Page/iFrame for Facebook, too. I just need something of the sort. Any ideas? Thanks!

    ReplyDelete
  23. @Swordroll: You want a welcome page. My very first tutorial was on this. It's a little old, but it is still relevant. Here's the link:

    Blogger Tips: Setting Up Homepage

    ReplyDelete
  24. using this:


    .LinkList ul{
    padding: 0;
    }

    .LinkList ul li{
    display: inline-block;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-right: 10px;
    padding-left: 10px;
    }

    and pressing enter after and it still isn't changing...what is wrong? site is http://healthinessisbliss.blogspot.com/

    ReplyDelete
    Replies
    1. Hi Gabrielle,

      I can see you've got yourself a horizontal link menu. Have you got this sorted?

      Delete
  25. i want to get the list in the grey bar above my header how can i do that also i have mistakenly reduced the size of my header how can i increase its height a bit.

    ReplyDelete
    Replies
    1. Try this:

      #crosscol-overflow{
      position: relative !important;
      top: -200px !important;
      }
      header{
      position: relative !important;
      top: 20px !important;
      }

      Cheers.

      Delete
    2. thanks i have done it with the code

      #LinkList2{


      now i want to reduce the white space you can see in between the top link list in grey area and header title

      please guide for that

      Delete
    3. Use this:

      #Header1{
      margin-top: -60px !important;
      }

      Looks like you're done. Your blog is looking good now. Wishing you all the best and happy blogging. Cheers and God bless :)

      Delete
  26. Hi there! May I know how to add the border color? Please advise. Thank you very much

    ReplyDelete
    Replies
    1. Hi there,

      It depends on the kind of template that you're using. What's your blog's address?

      Cheers :)

      Delete
  27. Hi Yoga,

    I am looking for someone who can change a blog template.Its an existing template i got from the internet.
    I really like the layout but i am not that experienced i have tried for days now but i am so limited in my time and the time i have to learn experience to change the html on the blog i am grey and old.
    There are only a few adjustments needed and i am willing to pay you a compensation for it if you are up for it.
    Can you please send me an email if you have the time its elfef78@hotmail.com

    ReplyDelete
    Replies
    1. Hi Elf,

      I'm pretty busy myself, and I'm afraid I can't commit to anything huge - as I only gonna end up disappointing you. That said, if what you're looking for is something easy and do-able, we can always do it step-by-step, FOC of course. What kind of adjustments are we talking about here?

      Cheers..

      Delete
  28. Hi, I am trying to change the font and size of the links, tried the code you said to use in one of your comments but doesnt seem to be working. How can I do this? Thanks :)

    ReplyDelete
    Replies
    1. Hi Natalie,

      It depends on the kind of template that you use. Let's have a look at your blog. What's your blog's address?

      Delete
  29. Your blog is SO helpful! Thanks so much. I have a question about how I would remove the white space between the Page list and the Link list and also, would I be able to make the font of the Link List smaller?

    Here is my blog for reference http://www.lovefromelle.com/

    ReplyDelete
    Replies
    1. Hi Elle,

      Sorry for the late reply. Here, this should do the trick:

      #LinkList3{
      margin-top: 0px !important;
      }
      #LinkList3 a{
      font-size: 14px !important;
      }

      Cheers.

      Delete
    2. No worries! I'm sure you are busy with all of us novice bloggers asking you all kinds of question. It worked! You are AWESOME!

      Love,

      Elle

      Delete
  30. One more request, I figured out how to center the page list but can't quite figure out how to center the link list. Please advise.

    ReplyDelete
    Replies
    1. Hi Elle,

      Try this:

      #LinkList3 ul{
      width: 550px !important;
      margin: auto !important;
      }

      Cheers..

      Delete
    2. I would have never guessed it. You are wonderful!

      Many Thanks again!

      Delete
  31. hey how can I add borders in between the links and a bottom border?

    the site is mycloset.fashionandadventures.com

    I'd like the link list to look like www.fashionandadventures.com

    ReplyDelete
    Replies
    1. This should do it:

      #LinkList1 ul {
      border-bottom: 1px solid #EEEEEE;
      }
      #LinkList1 li a {
      padding-right: 20px;
      margin-left: -20px !important;
      }
      #LinkList1 li a {
      border-right: 1px solid #EEEEEE;
      }

      Cheers.

      Delete
    2. Thanks a bunch!! You're Awesome!!

      Delete
  32. Thanks buddy, I implemented the horizontal link list from your demonstration and much of my trouble is resolved now.

    ReplyDelete
  33. Hi, I use link list as the main menu spanning from left to right. My blog address is http://welovebetty.blogspot.sg Right now it's 6 tabs, how can I include another tab without having it flow to the next line? I'd also like the option of being able to close up the space in between each tab.

    ReplyDelete
    Replies
    1. Hi Priscilla,

      You need to play around with your link padding. The following should work fine for 7 tabs, but should the need arise, feel free to decrease the padding in the code below:

      .tabs-inner .widget li a{
      padding-left: 0px !important;
      padding-right: 25px !important;
      }

      Go to Template Designer - Advanced - Add CSS - paste the code - Press enter after the last character of the last line } - Apply to Blog.

      Cheers.

      Delete
  34. This was the ONLY CSS trick that worked for me to FINALLY get my pagelist centered. Thank you so much!!!! But there's one thing I couldn't figure out how to adjust with my list... There's a lot of white space in between each one. I don't want them so spaced out, I'd like them to be a little closer to each other (but still centered under the header). How can I adjust this? Any help would be AMAZING!! Thanks so much.

    ReplyDelete
    Replies
    1. Hi Mindykay,

      Add this to your CSS, and adjust the value '19px' accordingly:

      .tabs-inner .PageList li a{
      padding-left: 0px !important;
      padding-right: 19px !important;
      }

      Cheers! :)

      Delete
  35. Hello! My blog is www.ejverx.blogspot.co.uk - I've figured out how to centre my links, but I'm trying to add a border. Ideally I'm trying to get it like this http://luxelifeaspirations.blogspot.co.uk/ - a plain black border, across the top and bottom, that stretches across most of the page.

    Thanks,

    Emma.

    ReplyDelete
    Replies
    1. Hi Emma,

      Sorry for my ridiculously late reply. I see borders in your blog. Have you got it sorted?

      Cheers.

      Delete
  36. Thank you very much! This was a very easy and quick fix! I appreciate you sharing this with the rest of us. :o)

    ReplyDelete
  37. Hi Yoga, my website is www.irobotgaming.com Can you please let me know how I can reduce the space between my Link List Top Tabs. My website looks perfect on Chrome, but on internet explorer at 100% Zoom my "About Tab drops off behind my slider, so I'm guessing maybe I can get it to fit perfectly if i reduce the space between the tabs. I would really really appreciate your help.

    Thanks

    ReplyDelete
  38. This Code worked for me.
    .LinkList ul li{
    display: inline-block;
    padding-bottom: 8px;
    padding-top: 8px;
    padding-right: 10px;
    padding-left: 10px;
    }

    But I need to go atleast -5px, but it doesnt seem as if CSS will accept Negative Values. Is there a way around this?

    www.irobotgaming.com

    ReplyDelete
  39. Hey Yoga, I found your code below to change the Font size instead, just 1px smaller and it fixed my issue.

    #LinkList1{
    margin-top: 0px !important;
    }
    #LinkList1 a{
    font-size: 14px !important;
    }


    Thanks alot bro. Definately appreciate your help. : )

    www.irobotgaming.com

    ReplyDelete
    Replies
    1. Hi Craig,

      Glad you've got it sorted - before I even had the chance to look at your issue, lol!

      Cheers buddy :)

      Delete
  40. I want ask u something. I want do a scroll box for my link list. Is it can?

    ReplyDelete
    Replies
    1. THat depends on your template. What's your blog's address?

      Delete
  41. It worked wonderfully. Thank you very much! =D

    ReplyDelete
  42. Hi, I was wondering how do I remove the border to my Link-list? my blog is xoamandaryan.blogspot.com

    Thank you

    ReplyDelete
  43. I can't get this to work and I've tried everything you've posted.
    Here is my url -
    http://www.modernmadeline.com/

    ReplyDelete
    Replies
    1. Hello there,

      I can't see a linklist gadget on your tabs. Have you got it removed?

      Delete
  44. I have a link list installed on my blog, and I want to change the font through CSS. I have to use Google Web Fonts because the font isn't available through Blogger, and I've been able to change my sidebar fonts, but I cannot get the link list font to change. I'm wondering if I have to change something in the HTML?
    This is my URL --
    http://www.prepforaday.com/

    ReplyDelete
    Replies
    1. Yes you need to add a reference to the font in your HTML. Follow Steps 1-3 from the tutorial below to do so:

      http://www.southernspeakers.net/2013/05/google-web-font-in-blogger-dynamic-view.html

      Delete
  45. Hello! Ive been trying to use your codes to center my linklist, but it just wont work. Im not sure if its because I downloaded the template? I can see that some of the codes are moving it, but just like a bit down or on the left, but never in the center. Is there any chance you can help me?
    The blog is: http://marilirooba.blogspot.fr/ , as you can see its not under the blog's name, and it just looks horrible like this! :D

    Thanks :)

    ReplyDelete
    Replies
    1. Hello,

      Sorry for the late reply. I see you've managed to center your tab. Let me know if you still need help on this.

      Delete
  46. Hi, I want to remove the grid on my link list nav bar. my url. is jaytechs.blogspot.com

    ReplyDelete
    Replies
    1. I don't see any grids no more. Have you got it sorted?

      Delete
  47. hi,
    I want have a horizontal blog list (instead of a link list). Can you help me please?

    And how I can remove the dotted line which blogger adds under each item in a blog list or link list?

    thank you

    ReplyDelete
  48. Hi... I'm frustrated... can't seem to get any expertise on my blog pages problem. I've composed 5 pages "About ME" etc. and set up a horizontal navigation bar.. but the pages don't show up. I've linked it to my mobile external site for now... as I didn't want to leave it empty. But... that defeats the purpose of pages... any help with this... is my template mucked up... or is the customize theme I have not applicable for horizontal bars (PS I've tried the side bar menu too)... can't sleep over this! Thanks.. I'm at http://www.soulsistersavvy.com.

    ReplyDelete
  49. I don't see your page content loading in your page source at all - this leads me to believe there could be some issues in your HTML's structure. If I were you, I'd back up the template, and revert my widget to its default (by going to Dashboard - Template - Edit HTML - Revert Widget Template to Default)

    ReplyDelete

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