Saturday, September 28, 2013

[Blog Design] How To Remove Header Widget and Make a Header With Multiple Buttons


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!


Follow Me  : Facebook / Twitter / Bloglovin / GFC

20 comments:

  1. 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. :)

    ReplyDelete
    Replies
    1. I am glad that you liked it, let me know when you try it!
      I want to see it !

      Delete
  2. I love this! Thanks for this tutorial!

    ReplyDelete
  3. Hello Beautiful! I nominated you for “The versatile Blogger Award” Get rolling Check it here:
    Awarded: Versatile Blogger Award <3
    http://redraoalice.blogspot.com/2013/09/awarded-versatile-blogger.html

    ReplyDelete
  4. omg this tutorial is brilliant! Will try it out when I have the time. Thanks Yomi! :D


    xx Mandy

    ReplyDelete
    Replies
    1. I am looking forward to see how you make it ! <3

      Delete
  5. awesome tip
    thanks for sharing

    Lots of love from Ireland sends Ewelina
    xxxxxxxxxxx
    chiclifestyleofewelina.blogspot.com

    ReplyDelete
  6. 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"
    xx

    www.sakuranko.com

    ReplyDelete
  7. 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

    ReplyDelete
  8. I love your little blog tutorials, they're so helpful! Thanks a lot!! <3

    Love, ina

    www.petite-saigon.com

    ReplyDelete
  9. 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

    http://beinggirl96.blogspot.com/

    ReplyDelete
  10. 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! :)

    Metallic Paws

    ReplyDelete
  11. These posts must take forever to do ;___; Thanks for these information!! I'll definitely keep this in mind now!!

    Join my first giveaway!

    Love, Aimee

    ReplyDelete
  12. Thank you so much for this tutorial Yomi!!!!
    I edited my blogs banner now~~
    check it out?
    charrmyn.blogspot.com

    xxxx CHarmianeeeeee

    ReplyDelete
  13. thank you so much for the tutorial!!!
    i 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?

    ReplyDelete
    Replies
    1. actually, never mind about the last comment about changing the 'outline' lol :)

      Delete
  14. Yomi!!! Mine keeps dissapearing after a few days!!!
    It's the 3rd time already!!
    what do I do?????
    xx Charmaine

    ReplyDelete
    Replies
    1. I see the one I had disappeared too, maybe the website owner changed something. I am not sure about the reason...

      But 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.

      Delete
    2. its ok thank you Yomi!~
      ...hehe...this looks really hard...It think I'll try figure this out on the weekend...
      THank you Yomi!!
      xx Charmaineeee

      Delete

I always read all comments, I will reply all comments that have questions!

Tweet me if you want a quick reply
@yomistyle

Related Posts Plugin for WordPress, Blogger...

ShareThis