Thursday, May 26, 2011

Make Non-Static pages for your Navigation Bar!

We know that you can put a navigation bar in a side bar but what happens when you want things like facebook or twitter as links alongside Home and Contact up top?

Blogspot doesn't have an option for this, but with a good eye and some extra coding, you can pull it off!

Here's how you do it:
Go to your dashboard, click design, then edit html.
Once you get there, there should be a big box full of coding. At the top right of the box, you should see an option to expand widget templates. Do so!

You're almost done with the hard part-- easy huh?

Now for the good eye... scroll down the list (not too far) and find this code:

(If you don't want to scroll and look for it, I pressed ctrl and the letter "f" to find the word loop. Press "next" once it highlights the first "loop" found in the coding. The second one should match with all the surrounding coding given above in my example. It saves some browsing time!)

01<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>

02<b:includable id='main'>
03  <b:if cond='data:title'><h2><data:title/></h2></b:if>
04  <div class='widget-content'>
05    <ul>
06      <b:loop values='data:links' var='link'>
07        <b:if cond='data:link.isCurrentPage'>
08          <li class='selected'><a expr:href='data:link.href'><data:link.title/></a></li>
09        <b:else/>
10          <li><a expr:href='data:link.href'><data:link.title/></a></li>
11        </b:if>
12      </b:loop>
14    </ul>
15    <b:include name='quickedit'/>
16  </div>

So once you find this coding (I numbered the rows to make explaining this step easier), insert the following coding in row 13 after the loop coding

(by the way, if you have a custom blog theme going on, you may not have this coding.)

<li><a href="YourLink">YourLinkText</a></li>

Your link: Put any link (facebook, twitter, a shop, flickr gallery, etc)
YourLinkText: This is what will show up for the page tab. It's just the label but make sure you match up the correct link to your text. You don't want people clicking a link and ending up in the wrong place!

That's it! Fairly easy once you find the coding.

Make sure you have no typos and preview before saving!

Photobucket Photobucket

1 comment:

  1. Nice! I am pretty new to blogging, so I'm always looking for tips and tricks:)
    Found you via etsy's blog team!


All thoughtful comments are appreciated. :) Thanks for being here!

Blog Design by Caked Designs