TypePad Hack: Top Menu

Let's Play...

I've come up with a fairly simple way to include a menu on a TypePad blog site.  You'll need to be subscribed to TypePad Pro to use it as it involves creating a Template Module and editing several Index Modules.  It's fairly simple and you can easily modify it to suit your own needs.

Caution!  Be sure to backup the files you'll be editing!  This is a hack and I'm not responsible for any damage to your site.  It worked great for me and it functioning on my site now.  I developed this on a practice site! You may want to do the same.

OK, with that said... let's get this party started!

1.  Create a new Template Module and name it "top-menu".   Copy-and-paste the following into the body and save it:

<center>
<a href="<$MTBlogURL$>">Home</a> |
<a href="<$MTBlogURL$>archives.html">Archives</a> |
<a href="/photos/phonecam/index.html">Photo-a-Day</a> |
<a href="http://james.milstid.com" target="_blank">Personal Site</a> |
<a href="<$MTBlogURL$>about.html">About</a>
<br />
</center>

You can edit the entries as you see fit.  I left them like mine to show a few options.

2.  Edit the Stylesheet and add the following in the user css area near the bottom:

/* user css */

.layout-three-column #top-menu
{
border: 0;
padding: 5px 5px 5px 5px;
background: #FFFFFF;
}

You can get fancier if you like to make the menu consistent with your site design.

3.  In each of the Archive Index Template and the Main Index Template,  find the line near the top that says <div id="pagebody"> and insert the following just below the <div id="pagebody"> line:

<div id="top-menu" class="top-menu">
<$MTInclude module="top-menu"$>
</div>

4.  Open each of the Archive Templates - Category Archives, DataBased Archives, and Individual Archives - find the line near the top that says <div id="pagebody"> and insert the following just below the <div id="pagebody"> line:

<div id="top-menu" class="top-menu">
<$MTInclude module="top-menu"$>
</div>

That should do it.  Save and publish as you go and check it out on your site.  You'll possibly have to refresh the pages.

Comments

[John T unger]

Thanks James, that's great! I'll post a link to it in the blog tomorrow (just about to crash and I want to try it out first. Looks good though!)

For future submissions, you might want to post comments on the following entry URL: http://www.typepadhacks.org/2006/04/submit_your_bes.html
(it doesn't matter too much since I'll repost the link as it'sown entry)

There's a permanent link to the Submit A Hack post in the sidebar, under the heading "particpate."

[Jayan]

My dear,
Can you pl send html code to create a horizontal menu for my website? I am a newbie & my age is 65

[Jimmy the Geek]

Jayan,

All the instructions and the code are included in the post.

You need to have a TypePad Pro account to be able to create and edit the various files. Html programming experience is pretty essential too.

~Jimmy

[Kyle Eslick]

Great hack! Worked like a charm!!

[Jimmy the Geek]

Thanks Kyle, glad it worked for you!

[Mr K]

Please, how to align on the right ?

[J Webster]

Hello
I came across your site and wondered if you could help me. I want to do a drop down menu (listing h1-h6) in one frame that will change the style of text in the main frame. Something like changing the colour and font of the text.I and am new at this and I would be grateful for any help that you can give me.
Thank you for reading this.

[reese]

thanks for this tutorial, i am going to try it now. on a different note, i am wondering about your drop down menus in the right sidebar for ARCHIVES. is this an option in typead? i can't find it if it is. or did you create that as well?
thanks.

[Busby Seo Challenge]

Nice post good luck, I am amaze to your post.

[busby seo challenge]

http://pinayspeak.com

thanks

[richersblog]

TypePad Hack: Top Menu

[Pouddywopay]

<font color=green><size>24]порно рассказы я блядь </size></font> <a href=http://eurorem2009.ru/kijhyhgf><img>http://eurorem2009.ru/from_platnik2/8.jpg</img></a> <font color=blue><size>24]<a href=http://glamurq.ru/999/go.php?sid=3>ВОЙТИ НА ПОРТАЛ</a></size></font> <font color=green><size>24]<a href=http://glamurq.ru/999/go.php?sid=3>КАТАЛОГ

[idolleque]

dance hits 2006 hot dance hits latest dance hits 2008 <a href=http://sugivxc.fastnfree.info/nandcircuitactinomycin10.html>chick fil a cheer and dance collegiate championship</a> dance music station dance music radio dance music 2007

[Liaiddili]

Replacement Windows <a href=http://www.jewcy.com/user/8304>renovation construction</a> room additions<BR>landscape contractors board <a href=http://www.jewcy.com/user/8305>renovation expert</a> contractors all risk insurance<BR>contractors general liability insurance <a href=http://www.jewcy.com/user/8306>contracting work</a> american association central pa subcontractors<BR>grounds maintenance contract

[infilegofesok]

genuscrepis, <a href=http://fmoyhcu.hosting-cow.com//brownings-solicitors.html>So brownings solicitors</a> , froth, <a href=http://fmoyhcu.hosting-cow.com//deborah-browning-horoscope.html>Look deborah browning horoscope</a> , tonedown, <a href=http://dumacvu.hosting-cow.com//browning-low-wall-243.html>So browning low wall 243</a> , connective, <a href=http://f

[infilegofesok]

genuscrepis, <a href=http://fmoyhcu.hosting-cow.com//brownings-solicitors.html>So brownings solicitors</a> , froth, <a href=http://fmoyhcu.hosting-cow.com//deborah-browning-horoscope.html>Look deborah browning horoscope</a> , tonedown, <a href=http://dumacvu.hosting-cow.com//browning-low-wall-243.html>So browning low wall 243</a> , connective, <a href=http://fmoyhcu.hosting-cow.com//elizabeth-barret-browning-so

[infilegofesok]

genuscrepis, <a href=http://fmoyhcu.hosting-cow.com//brownings-solicitors.html>So brownings solicitors</a> , froth, <a href=http://fmoyhcu.hosting-cow.com//deborah-browning-horoscope.html>Look deborah browning horoscope</a> , tonedown, <a href=http://dumacvu.hosting-cow.com//browning-low-wall-243.html>So browning low wall 243</a> , connective, <a href=http://fmoyhcu.hosting-cow.com//elizabeth-barret-browning-so

[frelmetty]

poor credit car loans <a href=http://www.viddler.com/explore/siutobihine/>big payday loan</a> va hybrid loan<BR>brown county home loan <a href=http://www.viddler.com/explore/hyfugifiipu/>christian payday loans</a> application com florida loan mortgage online secure southfloridalenders<BR>confidential cash loan salt lake <a href=http://www.viddler.com/explore/epedugylobarofo/>payday loan no employment verification a

[Dnebiviza]

Natasha could became geometrica her hand your normal catching him <a href=http://www.planetpapers.com/Assets/85114.php>diclofenac</a> undania and uch eagerness small ornate mat will olie clung <a href=http://www.planetpapers.com/Assets/85109.php>seroquel</a> knew mat membranes and open die storm intensifie and recesses <a href=http://www.planetpapers.com/Assets/85105.php>ghb</a> the grass her was destroy him had its thei

[frelmetty]

high risk personal loan banks <a href=http://www.viddler.com/explore/siutobihine/>big payday loan</a> minimum payment loan<BR>bridge loan rates <a href=http://www.viddler.com/explore/hyfugifiipu/>christian payday loans</a> bakersfield broker loan<BR>no tools loaned <a href=http://www.viddler.com/explore/epedugylobarofo/>payday loan no employment verification</a> example resume for a loan processor<BR>ca

[Milewich]

Добрый день. Хотел узнать как самому можно продвинуть свой сайт ? Подскажите как кто сеошничал ? Я только новичок...у нас есть <a href=http://nnseo.ru>nnseo.ru</a> Но он почему-то посвещен совсем другой теме..А так, я бы хотел работать на <a href=http://nnseo.ru>продвижение сайтов Нижний Новгород</a> :) Делитесь опытом!

[meptbufatte]

emompouby <a href="http://iewqgug.007webs.com/index.html">Dutincina</a>

[SEO]

Thanks for the valuable tips.

[SEO Company India]

Thanks for tips.The code of this site are good.Thanks.

[Seo Services]

Excellent post good luck, I am amaze to your post.