Tutorial: Making a Mapped Header (Minima & Simple Templates)

Monday, April 16, 2012

EDIT 4/22/2012: I've discovered an easier way to install this for the Simple template and have updated it accordingly. 
Note: Please, please, please BACK UP YOUR CURRENT TEMPLATE before doing any of this. I am going to assume that your blog is already fairly customized and you are using the SIMPLE or MINIMA template.


Hiya!  Okay, I know mapped headers are all the rage in the blogsphere. So, I'm going to help you create a mapped header. You'll need:
  1.  Blog header (if you already have one, open it in Pixlr and use a matching font to add the names of the pages you want to link to. Pixlr because it adds your own fonts)
  2. Test blog (to test this all out on)


Before we start we'll need to do some HTML editing. Go to Template (Design for the old Blogger interface) and click the 'Edit HTML' button. Check the 'Expand Widget Templates' box, hit Ctrl/Command+F and search for this code:



Minima:



 <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE (Header)' type='Header'>
<b:includable id='main'>

Change 'True' to 'False', like so:

 <div id='header-wrapper'>
      <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='false' title='YOUR BLOG TITLE HERE (Header)' type='Header'>
<b:includable id='main'> 



Simple:



<b:widget id='Header1' locked='true' title='YOUR BLOG TITLE HERE (Header)' type='Header'>

Change 'True' to 'False', like we did for Minima:

<b:widget id='Header1' locked='false' title='YOUR BLOG TITLE HERE (Header)' type='Header'>
  

Trust me, that'll come in handy later. Now, upload your header to an image hosting service or a drafted blogger post (I prefer the latter) and grab the image's direct URL (this is important). Go to this site and copy the URL into the 'From a URL box'. Before you click the 'start mapping your image' button, open the blog pages that you want your image to link to in separate tabs. Now, click the button and wait for the counter to confirm that your image uploaded successfully. Now, follow the directions below to  map your image:

  1. Click the 'Rectangle' button and size the box that appears to cover the title part of your header. Paste the URL of your blog under 'Link for this map'; don't bother with the Title/Alt box. Do this for the text for your pages too, making more boxes as needed and entering the appropriate URLs.
  2. Uncheck the box that says 'Show Text Links'.
  3. (Optional) If you don't want the site to add a (small) 2px by 2px backlink or it's in an inconvenient place (lower right hand corner), uncheck this.
  4. When you're done, hit the 'Get Your Code' button. 

Okay, now to install your header:




Minima:


  1. Since you changed your header gadget so it's moveable like the rest, go in and delete it. You'll be able to get it back at any time by finding the code we edited earlier and changing 'False' back to 'True'.
  2. Switch back to the image-mapping site and copy the code from the HTML Code tab. Add a HTML/JavaScript gadget where your header was and paste the HTML code into the box. Save it.


Simple:

  1. Go to your layout and delete your header gadget- don't worry, you can get it back using the same method I stated for Minima.
  2.   Add an 'HTML/JavaScript' Gadget where the header gadget used to be. Paste the HTML code from the tab of the same name on the image mapping site into it and save. 

Yay! Now you have your very own mapped header. Any problems or questions? Tell me in a comment and I'll see what I can do!

3 comments :

  1. Thanks so much Annika!!! You are so sweet!

    LOL (LoveOurLord!!!),
    Emma

    ReplyDelete
  2. Oh, cool! I am sooo gonna try this! Thanks, Annika! :)
    ~trinka 1 John 3:16-20

    ReplyDelete
  3. Hey, purpleash27432 is my on Pottermore. I sent you a request.

    ReplyDelete

comments make me smile. :)