Showing posts with label pages. Show all posts
Showing posts with label pages. Show all posts

Friday, 17 December 2010

Tina's Tutorials #9: How to add external links to menubar

This tutorial will teach you how to add external links (links to non-pages) to your menu bar.

e.g. If you click on the link to "About Tina" on my menu bar above, you'll see that it leads to this site:
http://bookcouture.blogspot.com/p/about.html

Notice that there is a "p" there? This indicates that "About" is a Page on my blog.

But what if I want to link to a site that isn't a page? For example, the Book Contest Directory?


Click on the "International" link under my menu bar. Notice that the external website opens up in a new tab or window. This is what this tutorial will teach you to do for your blog.

Step 1:
Go to your blog Dashboard, and access the page Design, and the subtab Edit HTML.
Remember to backup your blog template by Downloading Full Template and saving it somewhere easily accessible.


Step 2:
Check the box Expand Widget Templates.

Using CTRL + F, search for <b:widget id='PageList1'.

You will then see code that looks something like this. Under <b:loop>, add the code in bold.

The parts you need to change are highlighted in red. Where it says URL, replace it with your link. Where it says Link Name, replace it with the name of the link you want visible on your menubar.

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
<b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <ul>
      <b:loop values='data:links' var='link'>
        <b:if cond='data:link.isCurrentPage'>
          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
        <b:else/>
          <li><a expr:href='data:link.href'><data:link.title/></a></li>
        </b:if>
      </b:loop>
      <li><a href='URL' target='_blank'>Link Name</a></li>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - 

Then click on Save Template and then View Blog to see your external link in your Menu Bar.

You're done! To add more, simply copy that line and repeat it, changing the URL and Link Name when needed.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

More Tips & Tricks from Tina:

Sunday, 29 August 2010

Tina's Tutorials #3: How to make Pages


Pages are seperate posts on your blog that can be linked to via a header.
It is a common way on blogger to link to review policies, contact information, profiles, etc. The advantages of having pages is that links to important information is easily accessible to others visiting your blog.




How to make pages: a step by step guide


Step 1:
In your blogger dashboard, click on design.




Step 2:
You should now be in the "Design" tab.  Go to the "Page Elements" subtab.



Step 3:
Under your header, click on "Add a Gadget".


Step 4:
This box should pop up. Click on the + button next to pages.


 Pages should now be added to your blog design. Save your Page Elements.


Step 5:
To edit your page elements, go to the Posting tab, and click on the "Edit Pages" subtab that should now have appeared.


Step 6:
To make a new page, click on the blue rectangular button that says "New Page". Once it has been created, existing pages will appear below, and you may edit, delete or view them.



To edit the header:


Step 1:
Click on the Design tab.


Step 2:
It should bring you to this page:

Click on "Template Designer".


Step 3:
Once you are in the "Blogger Template Designer", click on the Advanced tab.



Step 4:
In the Advanced tab, click on "Tabs Text".

What you need to edit is the text color (how the text of the page will appear in your header when it is not selected), and the selected color (how the text will appear when the page is selected).

Experiment around until you get it right.



Step 5:
Remaining in the Advanced tab, click on "Tabs Background".
What you need to edit is the background color (how the color of your header will appear when the page is not selected), and the selected color (how the color of your header will appear when the page is selected).
Experiment around until you get it right.



Step 6:
Remember to Save your progess by clicking on "Apply to Blog". Then click on "View Blog" to view the changes you've made.




That's it! I hope you found this useful!

If you have any questions, feel free to leave a comment below. If there is anything blogger related that you would like to ask about or request a tutorial for, I would be happy to oblige and help.

For more tutorials, check out the page Tina's Tips and Tricks.

Happy blogging,
Tina