How to Make a Blog Banner + Code

Hello everybody!!! This is a newer, updated version of my old banner + grab code tutorial. Blogger has changed a lot since 2010 and I've noticed that the old tutorial doesn't work anymore! But still, I still decided to keep it for ol' times sake. Let's get started!! :~)
The Banner
The most commonly asked question is, "How big should my banner be?" It can be any size you want!!!! Go America yea free country!!!! But realistically thinking, your banner should ideally be 200px wide and any height you want. I'm gonna go with 200px high for this example :~)

Now it's your time to let your creativity shine. Add a cute background and some (readable) text, and even add a picture of your Chobot if you want! Make your banner eye catching - it should make someone want to click it. Here's my quick banner:

Once you're content with your banner, upload it to an image hosting site such as Tinypic, Imgur, or Photobucket.
The Code
Since the old code doesn't work anymore on Blogger, here's the fix for the grab code! 1) Copy this code, and paste it into any text editor such as Notepad; <center><a href="WEBSITELINK" target="_blank"><img alt="WEBSITETITLE" src="IMAGEURL" /></a></center><textarea><div align="center"><a href="WEBSITELINK"><img alt="WEBSITETITLE" src="PICTURELINK" border="0" /></a></div></textarea>
2) Go back to Tinypic, Photobucket etc. and copy your banner's direct link. Then edit your code based on the key below:
WEBSITELINK - the URL of the page you want the banner to link to (ex: http://twolegersblog.blogspot.com) WEBSITETITLE - the name of the website (ex: Twolegers' Chobots Blog) PICTURELINK - the direct link to your banner (ex: http://i.imgur.com/GnWQzUR.png)
3) Now comes the tricky part. Once you're done editing your code, it should look something like this:
<center><a href="http://twolegersblog.blogspot.com" target="_blank"><img alt="Twolegers' Blog" src="http://i.imgur.com/GnWQzUR.png" /></a></center><textarea><div align="center"><a href="http://twolegersblog.blogspot.com"><img alt="Twolegers' Blog" src="http://i.imgur.com/GnWQzUR.png" border="0" /></a></div></textarea> 
Copy the section of code in between (yes I had to make the between bold and a large font b/c some people cannot read) the <textarea> tags. I've bolded the part you should copy.
4) Click here, and paste the copied code from above in the box. Click "Convert to escaped characters" - the result should be a pretty messed up code with a bunch of &'s and ;'s.

5) Replace the bolded code with the escaped code you just generated. Your final code should look something like this;
<center><a href="http://twolegersblog.blogspot.com" target="_blank"><img alt="Twolegers' Blog" src="http://i.imgur.com/GnWQzUR.png" /></a></center><textarea>&lt;div align=&quot;center&quot;&gt;&lt;a href=&quot;http://twolegersblog.blogspot.com&quot;&gt;&lt;img alt=&quot;Twolegers' Blog&quot; src=&quot;http://i.imgur.com/GnWQzUR.png&quot; border=&quot;0&quot; /&gt;&lt;/a&gt;&lt;/div&gt;</textarea>
It looks pretty jacked up BUT TRUST ME ON THIS ONE
6) Now it's time to apply the code onto your blog. Sign into Blogger, then go to Layout > Add a Gadget and scroll down to HTML/Javascript. Paste your code in the box, save, and you're done! Hopefully, yours looks like this too:

And if it doesn't, try figuring out what you've done wrong first before you ask!! ^_^
Have fun and good luck :~) Till next time,