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

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!

New Blog Design//Description of Changes!

Hiya! Annika here. Over the last few days I have been tweaking my blog's design, and I'm very happy with the results. I thought's I'd go over and list the changes for you curious folk :)

Change: I have disabled copy and paste. The only thing you can copy now will be the codes for my new buttons.
Why: Because as a writer, I have no sympathy for or about the idea of my work -posts and snippets- being stolen. I know this will provide a hindrance to those who wish to quote and credit me on their own blog with good intentions, but this is just as a precaution.

Change: New header!
Why: Well, I wanted a header originally, but I was just starting out and had this idea all writing blogs had a vintage, forest-y, autumn colors feel about them. Yep, and I now know that isn't true. The main reason my blog design changed so often before was I was learning, wanted to try different things and because I was unsure about using hot pink, which is a color I love above all others. I have no idea how, but somehow hearts got in the mix, as you've seen over the last few days. I guess since I love writing, they fit right in.

Change: New Buttons.
Why: Actually, the header I have now was inspired by the buttons. As you can see, hearts are still a going theme. If you have my button on your blog, please switch out the one you have for one of the new ones. The first one is circular and the last two are square. 

Change: Blog Lovin' gadget. 
Why:  I've been seeing this on a few blogs, so I went to the site, On a whim, I searched my own blog, and it turned out there's one person who follows me through it! So, I've decided to go on and add the gadget.

Change: I've finally figured out how to make the post title grow bigger (or smaller) and change color when hovered over.
Why: I've always wanted to do this, since I thought it looked cute. It was a little trial and error, but I'm very happy about the results.


Also, have you heard? Picnik is closing! Nah, kidding. Most people on the internet have known and been enraged about it for more than a couple months. I used to think everyone was overreacting and all, since I was using fotoflexer more then.

But I used it to create my newest blog design images, and I'm blown away by the results with the (now free) premium features. There are some things it can't do, but a lot of people use it. I also realized we'd lose many of the awesome fonts that seem pretty much exclusive to it as well.

Well, good news:  a website called dafont.com has tons of downloadable fonts that include Star Wars (search for Jedi, not Star Wars), Harry Potter and the Hunger Games. It's very easy to find most fonts featured on Picnik, so set aside some time, open Fonts and get ready to extract some files. You can only use them in word, Paint or other text using programs that came with your computer, though. You might edit your images in Picnik, Picasa, fotoflexer etc., but to use your installed fonts you'll have to open them in Paint or word.

Updates, Spice and Everything Nice

Hey, I noticed something- one of my most popular posts of all time is the Luxsoka one I did after a Fiend Friend In Need aired.  With 291 page views. 

Whoa. Okay... heheh. 

Speaking of the Clone Wars... THE SEASON FINALE AIRS NEXT WEEK!!!!!  Ahem. Fangirl moment there... 

Anyway, I have some reservations because one: Ventress is being 'baptized' into black magic, as StarWars.com says (in Mother Talzin's section). Ummmm, wha?! 

I love Fantasy and Mythology and writing Sword and Sorcery is fun and all, but come on. I think they're going way too far. This is Sci-Fi, not whatever you call this atrocity. I want explosions, not magic. It really is just the Force, but the way it is presented as... dark magic, well, yeah. In fact, I just recently saw the original Nightsister arc a couple weeks ago. I only enjoyed Anakin and Obi-Wan, and even then I was still glad I had skipped those episodes originally. 

Anyway...

I am suddenly tempted to remake my blog all white with pink for the accents. Yes, you read/heard right. Of course, I will keep this design for a bit more. Something where the accents could go from pink, to blue to purple or whatever and there won't be major changes. It still bugs me I can't make the changes I really want to with Minima yet. Oh well, a little more trial and error won't hurt anything. ;)

Less is More When It Comes to Blog Designs

Hey, see that adorable little list of blogs on my sidebar and the marquee? No, wait. The blogroll loves to pull a disappearing act and erase all my links. So it's just the marquee now. But I think I'll list the main reasons why I choose read these blogs:  

• 
  
• They're funny
• They make me think
• I can relate to the author 
• It's interesting in general
• I have something in common with the author
• It has an awesome design

And the list goes on. But, I think I need to elaborate on the last one, as while the others depend on the person and their writing skills, that could be remedied . 'Awesome Design'  does not mean some kind of neon colored nightmare template with tons of curly, eye watering fonts with just about every gadget imaginable and ads galore.

No.

Awesome Design, in my book, equals simple, easy to read, neat, presentable, and compact. The things that impress me when it comes to blog's design may be a drop down accordion menu, a well made header or even a neat image that changes to another one when you hover your mouse instead of a header.

Have you ever had that disappointment when you come across a blog with a neat design, but one week later you find it on some free blog templates site? That is one of the worst feelings. Ever.

Okay, not really; I was just joking. Still, it is kind of a let down. But you almost can't blame people. Most blogs with a custom, really nice design almost always use Minima. It's a great template, but it's almost impossible to do more than some amateur changes without a good amount of knowledge about HTML and/or CSS. Preferably HTML, since, unlike with the new templates, HTML does more on an everyday basis when it comes to the old ones.  To help you out, I have a few resources and tutorials:

• Getting Your Blog Ready For Designing
• How to Create a Drop-Down/Accordion/Toggle Menu
• Create a Dropdown Menu For Your Labels
• w3schools.com's HTML Tutorials
• w3schools.com's CSS Tutorials
• 'Grab My Button' Code Generator 
• Custom Mouseover Image Generator
• Practice Your HTML Here
• Fotoflexer (Online Image Editor)
• How To Center Your Header
• Make a Disappearing Navigation Bar!

Also, here is the code for making a button/content/text marquee:

Paste as many button codes as you want to in there! Just erase the capitalized text. Also, make sure to check that it works using the 'Practice Your HTML Here' link above before pasting it into an HTML gadget.

If you are using the new blogger dashboard, do this to achieve Minima: 

1. Go to your Dashboard

2. Click onYour Blog

3.Click on the Wrench in the upper right-hand corner. This will take you to the old Blogger interface

4.Go to Edit HTML

5. Scroll to bottom and click Old Template

6. Choose Minima and click Save. Click the 'Try Updated Blogger Interface' link at the top of the page. 

Have fun!