Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, December 5, 2010

Changing Blogger Header Image Link

If you choose to either place your header image 'Instead of title and description' or 'Have description placed after the image' while uploading your header image to Blogger, your image will have a link on it. The link acts like a home button, as it brings you to your main page. However, some prefer to have it pointing elsewhere, to a private website for example. In this tutorial, I will show how you can quickly change the target destination of this link.


Step 1:

Make sure your image has a link in the first place. You can do this by editing your header - Choose either the second or third option.



Step 2:

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) - Check the box next to 'Expand Widget Templates'

If you're using the new Blogger interface:
Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - Check the box next to 'Expand Widget Templates'

Find for the following line:
<a expr:href='data:blog.homepageUrl' style='display: block'>
Original code in place:


Step 3

Change it to:
<a expr:href='"http://www.southernspeakers.net"' style='display: block'>
If you want it to open in a new tab, change it to this instead:
<a expr:href='"http://www.southernspeakers.net"' style='display: block' target='_blank'>
.

Modified code in place:

It goes without saying that you've to change the URL in the code above to that of yours. Have fun!

77 comments:

  1. This was very helpful. Thank you VERY much.

    ReplyDelete
  2. @Brian: You're welcome Brian. Cheers.

    ReplyDelete
  3. Awesome! I've been working on this for about an hour, always making edits in the right place, but using other people's guidelines, never finding that you have to have the single apostrophe enclosing the quotation marks around the URL. Sure wish I'd found you first!

    ReplyDelete
  4. @ShowMePlainfield: Ah, classic! Used to bug me before as well..

    ReplyDelete
  5. @boygirldiet: Happy to help. Cheers and God bless.

    ReplyDelete
  6. After checking the Inpage analytics on Google Analytics, which is still in Beta, I found that 30% of visitors (the biggest chunk) were clicking the header image which linked back to the same blog URL they were on. I find your site to change the URL to our main company site and bingo. Thanks for putting this info out there.

    ReplyDelete
  7. @stairlifts king: You're welcome. Glad you find it helpful. Cheers.

    ReplyDelete
  8. I feel like I'm really close to solving this problem, but when I try to make edits, it removes the header image altogether... Any clue what I'm doing wrong?

    ReplyDelete
  9. Ahhh... figured out my mistake. I was not including the " inside the '

    This has fixed my issue. Thanks for pointing me in the right direction! Yay!

    ReplyDelete
  10. @Jon: Glad you got it solved. Cheers!

    ReplyDelete
  11. I was looking for that simple fix all over and finally stumbled onto your site. Worked great! Thanks. :)

    ReplyDelete
  12. @FXguy: You're welcome. Enjoy your stay here. Cheers and God bless.

    ReplyDelete
  13. IT WORKED !!!!

    THANKS A BILLION. UR A GENIUS !!!

    ReplyDelete
  14. @Mihir: No problem at all mate. Cheers :)

    ReplyDelete
  15. I have said it before and I will say it again...you are simply a genius !!!

    I have been trying to remove the header link for soo long !!!

    Thanks once again !!!

    ReplyDelete
  16. @Mihir Nayak: No problem at all buddy. Hope you're having a great 2012 :)

    ReplyDelete
  17. What if I don't want a link at all? My blog is located at http://sharylovesyou.blogspot.com and as you can see I have an image map header. My boyfriend said that having the entire image as a link makes it kinda weird since the words for the corresponding pages only actually take you somewhere. Can I remove the link in general and have only my image map links working? I tried deleting the line you changed in this tut, but HTML editor was like "OMG WTFX" so I undid it and put it back on default...

    ReplyDelete
    Replies
    1. Looks like you've already got rid of your header's link before I get the chance to reply you. Have fun HTML-mapping those images :)

      Delete
  18. Hi! I also have an image in the header and I don't want it to be clickable at all.
    http://meryeniko.blogspot.com/

    Do you have any suggestion?
    Thank you in advance and keep up the good work!

    ReplyDelete
    Replies
    1. This is the easiest way I can think of. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #header-inner{
      position: relative;
      z-index: -1 !important;
      }

      Cheers :)

      Delete
    2. Wow! It worked!!! You're a genius! :) I'm not quite sure what these parameters mean exactly but I'm going to investigate.
      Thank you for your time, energy and generosity!!

      Delete
    3. I try as much to stick with CSS, since you can easily reverse the tweak by deleting the code that you've entered if you change your mind in the future. Basically, I've sent your header one layer back. An invisible layer is preventing your header from being clicked now :)

      Delete
  19. Thanks a lot man. You are a real genius. It worked.

    ReplyDelete
  20. Is there any way to change the Header link URL in Dynamic Views? Your site's been awesome for getting my site to look passable.

    ReplyDelete
    Replies
    1. Thanks Michael.. :) Unfortunately we can't alter Dynamic View's header link address.. Sorry bout that..

      Delete
  21. hey man, i did put a banner on my blog: http://g-lofotos.blogspot.com/ and i like that i can click on it, but how can i hide the title? do u see it on top of the banner? i do like the search button on the right side though. could u help please?

    ReplyDelete
  22. Hey there,

    See 'Extra #1' here:
    http://www.southernspeakers.net/2012/06/use-entire-header-as-home-button-in.html

    Looks like you've already got this figured :)

    ReplyDelete
  23. HI! I also want to have an unclickable image. But the z-index trick will make transparent png image look odd.

    http://ccufcc.blogspot.tw/

    Please help!

    ReplyDelete
    Replies
    1. Hi 林君翰,

      Yes, it might.. Can I have a look at an example of your post with a transparent image?

      Delete
  24. Here's the comparison.
    http://goo.gl/HzQES

    Thank you for your reply!

    ReplyDelete
    Replies
    1. Hi there,

      If you're referring to your header image, add the following code to your template:

      header{
      position: relative;
      z-index: 100 !important;
      }

      Cheers :)

      Delete
  25. The header image became normal, but then again it's also clickable 0_0
    I guess I should ignore this problem.
    Thanks for helping me!

    ReplyDelete
    Replies
    1. Looks like you've replaced the code that you had with the code that I've suggested.. Sorry for not being clear early on.. You need both codes present in order for this to work.. Here, you need these two:

      #header-inner{
      position: relative !important;
      z-index: -1 !important;
      }
      header{
      position: relative !important;
      z-index: 100 !important;
      }

      Good luck! :)

      Delete
  26. IT WORKS!!! AMAZING!!!
    Thanks a lot :D

    ReplyDelete
  27. Hi! To clarify - will this fix not work for the Dynamic Views template? I have followed the instructions but the header image will still not link to my website. Is there a work-around?

    ReplyDelete
    Replies
    1. Hi Keltie,

      Unfortunately, this tweak will not work for Dynamic View templates. I'm still looking for a way to change Dynamic View template's header link, but not much luck so far.

      Cheers..

      Delete
  28. Thanks, Yoga - I ended up seeing that in the thread above - too bad. I've added a SHOP ONLINE link instead, that sends them back to my main website. On a different note, any chance you know if there is a way to add a link to a gadget's image title as well the image itself? Alternatively, since it is possible to add a link into a gadget "text" field, is there any way to narrow the space between these two gadgets? If you visit my blog hopefully you can see what I mean...I have it set up the 2nd way right now, but there is a space between the SHOP ONLINE link and necklace image, that I would like to be a bit smaller. Thanks! My blog is www.keltieleannedesigns.blogspot.ca.

    ReplyDelete
    Replies
    1. Hi Keltie,

      There are more than one way to achieve what you're after. If you haven't done anything, I would have just suggested you to go for an HTML/Javascript gadget and have both the title and the image linked within the gadget itself - but that'd require some small HTML writings..

      What you've done could work too. Just add the following code to your 'Add CSS' box to reduce the gap between the link and your image.

      #Image1{
      position: relative !important;
      top: -20px !important;
      }

      Cheers :)

      Delete
  29. Ok.....this blog is super helpful.....thanks a million.....but it figures that I can't find what I need. How can I make my header image a hyperlink on every single page of the blog? I've got it working on the home page at www.buyausedmodularbuilding.com but the title is the only think linked on other pages...

    ReplyDelete
    Replies
    1. Hi there,

      It appears your header is hyperlinked in all your pages. Could you gimme a link to one of your pages where your header isn't hyperlinked?

      Delete
  30. How do I remove the link completly from my header image in my blog seinfeldsitcom.blogspot.com.
    I think you gave me the code before, but I can't find it in any of my blogs html to copy it.

    ReplyDelete
    Replies
    1. Try this:

      #header-inner a{
      position: relative !important;
      z-index: -1000 !important;
      }
      .fauxborder-left{
      position: relative !important;
      z-index: 1000 !important;
      }

      Cheers :)

      Delete
  31. It works for Chrome and Firefox but not IE 9?

    ReplyDelete
    Replies
    1. Right, in that case you need to dive into your HTML to make hard-changes. Do you see the line in Step 2 in the tutorial above? You need to remove that. You also need to remove the </a> part few lines below, then save your template. Before you attempt any of this, please make a backup of your template.

      Cheers :)

      Delete
  32. Great that worked. Thanks.
    Have one more qestion, how do i add a image to my blogs background via html? Blogger template is still broken and will not let me add a background image.
    I already have an image uploaded, I just need the code to link it up to my image.

    ReplyDelete
    Replies
    1. No prob.. Just paste your image link here. I'll prepare a code and get back to you. Also, do you want the image to repeat itself, or fixed in a position (it'll remain at the same position even when you scroll down the blog).

      Cheers :)

      Delete
  33. Here is the image link and I would like the image to be in a fixed position please and thanks:
    http://3.bp.blogspot.com/-fR6Z_YtEnns/UOsAfF79JII/AAAAAAAAC5A/N4bJFUR1gtI/s1600/seinfeld%2Bbackgrounds.jpg

    ReplyDelete
    Replies
    1. Try this:

      body, .body-fauxcolumn-outer, .cap-bottom, .cap-top{
      background: transparent !important;
      }
      body{
      background: url("http://3.bp.blogspot.com/-fR6Z_YtEnns/UOsAfF79JII/AAAAAAAAC5A/N4bJFUR1gtI/s1600/seinfeld%2Bbackgrounds.jpg") fixed !important;
      background-position: -80px -500px !important;
      }

      Cheers :)

      Delete
  34. That worked but when you scroll down using a tablet, the background image does not go all the way down to the bottom of the page?

    ReplyDelete
    Replies
    1. That's because your background is fixed (as per requested). If you want to see the entire background, you need to use a smaller background, and you should probably remove the 'fixed' attribute from the code above.

      Delete
  35. I'm trying to make the header click-able because it's not. I tried what you suggested, but it didn't seem to do anything. I went back into the template and can't seem to find the spot I made the edits anymore.www.missyinspired.blogspot.com

    ReplyDelete
    Replies
    1. Hi Amanda,

      Sorry for the late reply. Your header seems to be clickable from my end. Have you got it fixed?

      Delete
  36. Hey again,
    I added a twitter timeline search widget to my http://transportermovie.blogspot.com blog but it will not load for some reason? I have added the same code to other blogs ie expendablesmovies.blogspot.ca and the code works fine. Any idea why the code is not loading?

    ReplyDelete
  37. I got my twitter timeline to work. The domain name wasn't pointing to the blog yet and once I did than it worked.

    ReplyDelete
  38. Hey again,
    Just wondering what css code I need to have to move the title ( OilFracking.com - Oil Fracking Information) of my page over to the right to line up with my image on my oilfracking.blogspot.com blog.

    Thanks,
    Mark

    ReplyDelete
    Replies
    1. Hi Mark,

      Try this:

      .post-title{
      position: relative !important;
      left: 55px !important;
      }

      Cheers :)

      Delete
  39. thank you, it's makes so useful header

    ReplyDelete
  40. Thank you so much. the steps are clear and easy to follow!
    it works without any issue!!

    ReplyDelete
  41. How do I edit the html now as blogger does not allow me to expand my widgets anymore.
    fastfuriousmovies.blogspot.com

    ReplyDelete
    Replies
    1. You need to use the integrated search function to find for an element. See this:
      http://www.southernspeakers.net/2013/04/bloggers-new-html-editor.html

      Cheers..

      Delete
  42. works good (Y) thanks it worked on my site www.mediamanza.co.nr

    ReplyDelete
  43. Thank you very much this is really helpful post to change your header link with another i just change my blog link: http://paidvertts.blogspot.com/

    ReplyDelete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.