Since I won't make beauty post for a few days and still want to update my blog for you guys. I have decided to share some fun codes to you!
What do you mean about header with multiple buttons?
I created the picture from above randomly to make a example for you guys. It's suppose to be a header and you will be able to click all of these text that will lead you to different links you have chosen!
What about remove the header widget?
Because you will need to use a HTML box instead of the original header widget, so we need to remove the original one or else it will force you to type something in for the title and will show above the new banner we created! I will explain more later!
Sample : Click Here
I used it on a new testing blog, so you can take a look and try clicking these buttons!
How To Do It?
Someone have created a website that make it easier for us to do it!
Use this url : http://www.image-maps.com
STEP 1
Choose the file for your banner and start mapping it!
STEP 2
Wait a few second and click continue!
STEP 3
Choose which shape you want to make for your button.
STEP 5
I have chosen the rectangle one and drag the dots to make it fit the picture I want to make as button.
Write the link you want this picture lead to and title that will show when a mouse hover over it.
STEP 6
Get your code and there are more options under that you can take a look at it before clicking this!
STEP 7
After clicking get your code will show this page.
Choose HTML code from above and then copy the HTML code from the box that show under it!
STEP 8
Make a new HTML widget and put this code in there.
Then move it to the header!
STILL NOT DONE!
Because after doing all these work from above... the are still a header widget that are there! So we will need to remove it before we are done with the whole thing!
So How To Remove It?
1. Go to edit your HTML
1.Template
2. Edit HTML
2. Search
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
3. Change the true that under this sentence to false
4. Click Layout and Click Edit for your header
Click Remove!
DONE!
I hope someone will find this useful
This is more complicated than my first post about codes.
So if there is any questions, you can just leave a comment and remember to mark notify me!
I always try to reply within 24 hours.
Let me know what you think!
Thanks for another helpful post Yomi! *_* This is something I wanted to do for sometime now, but was just too lazy to look it up. =.= You make it very clear and simple, going to reference back to this when I make one myself. :)
ReplyDeleteI am glad that you liked it, let me know when you try it!
DeleteI want to see it !
I love this! Thanks for this tutorial!
ReplyDeleteHello Beautiful! I nominated you for “The versatile Blogger Award” Get rolling Check it here:
ReplyDeleteAwarded: Versatile Blogger Award <3
http://redraoalice.blogspot.com/2013/09/awarded-versatile-blogger.html
omg this tutorial is brilliant! Will try it out when I have the time. Thanks Yomi! :D
ReplyDeletexx Mandy
I am looking forward to see how you make it ! <3
Deleteawesome tip
ReplyDeletethanks for sharing
Lots of love from Ireland sends Ewelina
xxxxxxxxxxx
chiclifestyleofewelina.blogspot.com
Oh this is very interesting, well I´m not fan to make this changes in my blog, because I dided many mistakes before and I need to pay for was fixed. Many thanks for this"
ReplyDeletexx
www.sakuranko.com
oh this is interesting, I will ponder on this when I'm not so busy with work anymore and hope it will help lighten up my boring header...thanks for sharing
ReplyDeleteI love your little blog tutorials, they're so helpful! Thanks a lot!! <3
ReplyDeleteLove, ina
www.petite-saigon.com
This is so helpful, although I don't know what my blog is about exactly to categorise everything but I'll soon figure it out, x
ReplyDeletehttp://beinggirl96.blogspot.com/
ooh I've always wanted to know how to do this! thanks for sharing your wisdom with us hehe. I'll definitely come back to this page and try it out! :)
ReplyDeleteMetallic Paws
These posts must take forever to do ;___; Thanks for these information!! I'll definitely keep this in mind now!!
ReplyDeleteJoin my first giveaway!
Love, Aimee
Thank you so much for this tutorial Yomi!!!!
ReplyDeleteI edited my blogs banner now~~
check it out?
charrmyn.blogspot.com
xxxx CHarmianeeeeee
I will check it now <3
Deletethank you so much for the tutorial!!!
ReplyDeletei changed mine but i can't remove the header itself, when i try saving it, it keeps saying 'an error occurred' lol, so i just made the title white, haha :)
do you know how i can change the 'outline' of the box so it's not blue?
actually, never mind about the last comment about changing the 'outline' lol :)
DeleteYomi!!! Mine keeps dissapearing after a few days!!!
ReplyDeleteIt's the 3rd time already!!
what do I do?????
xx Charmaine
I see the one I had disappeared too, maybe the website owner changed something. I am not sure about the reason...
DeleteBut you can try to do it in a another way.
http://www.w3schools.com/TAGS/tryit.asp?filename=tryhtml_areamap
CLICK try it yourself
(img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">)
Change it to your url and size
Remove :
area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun">
area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury">
area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus">
You will see really similar codes from the one you are using now, copy and paste it under (map name="planetmap">)
DONE
It should work the same, but I am not 100% if it will disappear as I have never tried it before today.
its ok thank you Yomi!~
Delete...hehe...this looks really hard...It think I'll try figure this out on the weekend...
THank you Yomi!!
xx Charmaineeee