Search This Blog

Loading...

Sunday, March 19, 2006

How to edit links in the side bar

Update: This post is for the old Blogger classic template which is no longer supported by Blogger.com. Also update at bottom of page.

The HTML for a link list for you to edit as shown below is present in most of the standard Blogger templates (click on the screenshot to enlarge it:

To create links that in your sidebar to actually lead to sites you want, you will have to edit the HTML already in the template. Log into Dashboard, select the relevant blog, click TEMPLATE tab and look for the codes you see above. Look for the block of codes after
<h2 class="sidebar-title">Links</h2>

Edit the link list so that it become something like this

Replace the http://news.google.com/ with your actual link, and description with what you want to be seen in the displayed link. For example, I may edit
<li><a href="http://news.google.com/">Google News</a></li>
to
<li><a href="http:blogger-tricks.blogspot.com/">Blogger Tips and Tricks</a></li>
If you do that, what will be displayed will be what you see below:

  • Blogger Tips and Tricks

  • .

    Edit the other links. If you want more links, you can always copy and paste the links and edit them to what you want.

    Update: 2 readers and a commentor in this post had problem with editing the link list because they couldn't find the part of the template where it occurs. A screenshot helped them. Follow this link to see the screenshot: Part of the Minima template where the link list is

    Update 2: I just realised that while the link list you are supposed to edit are present in nearly all the standard Blogger templates, some (like the Sand Dollar and Scribe template I think) doesn't have them. Check for this in the sidebar of your blog.
    link list for Blogger bloggers to edit

    If you can see that, that means this HTML for the link list for you to edit exist in your template. If it is absent, then you will have to make your own link list or copy paste this HTML into your template:

    <MainOrArchivePage>
    <h2 class="sidebar-title">Links</h2>
    <ul>
    <li><a href="http://news.google.com/">Google News</a></li>
    <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
    <li><a href="http://help.blogger.com/bin/answer.py?answer=110">Edit-Me</a></li>
    </ul>
    </MainOrArchivePage>


    into the appropriate part of your template and edit it according. You can refer to his post Adding content to your blog via the template as a guide as to which part of the template you should add the HTML. The post shows text as an example, but it can be HTML, scripts for ads, hit counters, etc.

    Note: Following the instruction above will result in your link list displayed in the main page and also in the archives. If you want the link list to appear in all pages, remove the <MainOrArchivePage> and </MainOrArchivePage> tags from the HTML.

    Update: Note that this post was published before New Blogger was introduced, and this post is only relevant for those using the old classic template (even if your account have been upgraded to the New Blogger account). If you are using the New Blogger template, the normal way to add a link list is to click TEMPLATE tab which will take you to the LAYOUT. You will then click "Add a Page Element" in the appropriate section and select "Link List". For more detailed instructions, refer to How to add link list in New Blogger. However, most of the link list in my blogs are added using HTML similar to this. I have saved the HTML in a Notepad file and each time I have a new blog and want to add the link list, I just click on "Add a Page Element" like above, but this time select HTML/Javascript. The HTML I used I will put in a scroll box below:


    <h2 class="sidebar-title">Blogger Resources</h2>
    <ul>
    <li><a href="http://blogger-tricks.blogspot.com/" target="_blank">Blogger Tips and Tricks</a></li>
    <li><a href="http://bloggerfordummies.blogspot.com" target="_blank">Blogger for Dummies</a></li>
    <li><a href="http://testing-blogger-beta.blogspot.com" target="_blank">Testing Blogger Beta</a></li>
    <li><a href="http://dummies-guide-to-google-blogger.blogspot.com" target="_blank">Dummies Guide to Google Blogger</a></li>
    <li><a href="http://generating-revenue-from-your-site.blogspot.com/" target="_blank">Generating Revenue from your Site</a>
    <li><a href="http://adsense-alert.blogspot.com" target="_blank">AdSense Alert</a></li>
    <li><a href="http://firefox-alert.blogspot.com/" target="_blank">FireFox Alert</a></li>
    <li><a href="<a href="http://www.shareresults.com/t/url.php/cid/2702/sid/6451" target="_blank">Free Image and Video Hosting</a></li>
    </ul>

    <h2 class="sidebar-title">Environmental Blogs</h2>
    <ul>
    <li><a href="http://enviromansays.blogspot.com/" target="_blank">Enviroman Says</a></li>
    <li><a href="http://envirocard.blogspot.com" target="_blank">Environmentally Friendly Greeting Cards</a></li>
    <li><a href="http://foodasmedicine.blogspot.com" target="_blank">Food as Medicine</a></li>
    <li><a href="http://aerator.blogspot.com" target="_blank">Zero Energy Waterwheel Aerator</a></li>
    <li><a href="http://owaste.blogspot.com/" target="_blank">Zero Waste</a></li>
    <li><a href="http://morganicfarming.blogspot.com" target="_blank">Backyard Organic Farming</a></li>
    <li><a href="http://freecycleinternational.blogspot.com" target="_blank">Freecycle International</a></li>
    </ul>


    If you feel so inclined and will like to add my link list in your blog, I will be very happy. Just click inside the scroll box, press ctrl+A to highlight everything, right-click, select copy, then paste it into a HTML/Javascript widget.


    Books from Amazon

    Book: Blogging for Dummies

    18 comments:

    1. it seems that instead of going it goes to my.blogspot.com/http//www.thewebsiteiwant,xin

      ReplyDelete
    2. This comment has been removed by a blog administrator.

      ReplyDelete
    3. You posted the same question on Blogger Help and I have answered there. Anyway, read the post again, particularly the bottom part.

      However, I just realised that not all templates will have that ready made link list for bloggers to edit. I am going to edit my post again to take that into consideration. In your case, it will help if you give us the URL to your blog so that we can see if that link list exist in your template.

      ReplyDelete
    4. I seem to have some extra buttons after adding additional links. Any idea how to remove them?
      My Home, New Mexico!
      M

      ReplyDelete
    5. Very good tips and trick for new blogger, i get benefit from it. Thanks.
      http://www.jominfo.com/blogging/

      ReplyDelete
    6. Hi Meor,

      This post was published before New Blogger was introduced and only apply to old classic Blogger template. I have updated the post with links to post for New Blogger. Hope you will check the update.

      Peter (Blog*Star 2006 and 2007)
      Blogger Tips and Tricks

      ReplyDelete
    7. Hi Peter,

      Pls help!I am using New Blogger, how do I add bullets or dots to my link list in the sidebar? I have tried many ways but I can't seem to do it.

      ReplyDelete
    8. I tested adding the attribute list-style-type:disc; to an unordered list at the first right sidebar of Star Home Improvements and when that didn't work, I tried editing the CSS in the template. Report of the test at Testing bulleted list in Blogger sidebar.

      ReplyDelete
    9. what if the links are like 'profile, achives, links, etc'?
      how do i edit the contents?
      and what urls should i put?
      please help me out..

      ReplyDelete
    10. This post was created a long time ago before the New Blogger xml template, but is still applicable if you have chosen to use the old classic Blogger template.

      If you want to edit the profile, refer to create or edit Blogger profile (same for old classic template as well as new xml template).

      For the archive, there is a limit to what you can do but for the xml template, you can edit the archive via the LAYOUT.

      About the rest I am not sure what you are referring to.

      ReplyDelete
    11. hi,
      plz guide me
      how to make all links of only posts open in another window or tab,

      ReplyDelete
    12. hi,
      plz guide me
      how to make all links of only posts open in another window or tab,

      ReplyDelete
    13. Just add a target="_blank" attribute to the hyperlink tag. See Anchor text and how to make hyperlink open in new window.

      ReplyDelete
    14. Hi
      Don't know if this is the right place to ask or if you even still answer questions on this post, but I'll give it a try.
      On my blog: http://linnmariehansen.blogspot.com I have added a menubar below the header, this is added with the gadget option in the template. And i was wondering how do I edit the looks of this bar? For example if I want the links to have a grey background so they look like boxes and not links anymore. Is that possible when the links are a gadget?

      ReplyDelete
    15. Linn, I have checked all the gadgets available via Add a gadget I|(LAYOUT or DESIGN) but could not find such a menu gadget.

      Perhaps you are referring to making your own menu via a HTML/Javascript gadget? If so, you can achieve what you want using CSS.

      ReplyDelete
    16. Hi
      I don't know what the gadget is called in english because I have it in Norwegian, but it was a gadget to show links for the sites you have created now that blogger have added the opportunity to add pages like "about me" without doing it in a post that you date so far back it won't show on your blog.

      But I don't know how to edit them in CSS, what do i write to get to edit the look of the menulinks? Because if i edit the css for the links on the whole page, all the links would look the same and not only the links for the sites :S Is it even possible?

      ReplyDelete
    17. OK the "menu bar" in your blog is one which Blogger.com adds for you when you create static pages and to achieve what you want will involve editing the CSS (cascading style sheet) in your blog template which I have not yet tried.

      However, not sure if you might be interested in how I create my own menu bar which gives me better control and more choices as to what I want in that menu bar. Currently mine is plain vanilla but it would not be too difficult to add background color to the tabs etc which I hope to do later.

      ReplyDelete
    18. Thank you, i'll definetly look into that :)

      ReplyDelete


    Find topics by using the Google custom search box above which can search multiple blogs, or the SEARCH BLOG in the left corner of navbar. You can also find topics in the Label List and Categrories in the right sidebar.

    For more information and special deals related to any of the issues on this page, place your cursor over the double-underlined links. All information supplied by Kontera.com.

    Disclaimer: This blog has no relation with Wiley Publications