Southern Listeners

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

Sunday, December 5, 2010

Changing Blogger Header Image Link

Spoken by at 3:15 AM
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!
Labels:

79 comments:

  1. Brian Smith PhotographyMarch 9, 2011 at 9:31 AM

    This was very helpful. Thank you VERY much.

    ReplyDelete
  2. YoboyMarch 9, 2011 at 3:57 PM

    @Brian: You're welcome Brian. Cheers.

    ReplyDelete
  3. OurHometownPlainfieldMarch 13, 2011 at 4:45 AM

    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. YoboyMarch 13, 2011 at 5:17 AM

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

    ReplyDelete
  5. www.sistersdresses.comApril 10, 2011 at 11:23 AM

    thank you- worked perfect!

    ReplyDelete
  6. YoboyApril 10, 2011 at 9:04 PM

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

    ReplyDelete
  7. stairlifts kingMay 9, 2011 at 4:33 PM

    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
  8. YoboyMay 9, 2011 at 10:11 PM

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

    ReplyDelete
  9. Jon M. RichardsonMay 28, 2011 at 12:03 AM

    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
  10. Jon M. RichardsonMay 28, 2011 at 12:09 AM

    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
  11. YoboyMay 29, 2011 at 8:43 PM

    @Jon: Glad you got it solved. Cheers!

    ReplyDelete
  12. FXguyJuly 21, 2011 at 1:02 PM

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

    ReplyDelete
  13. YoboyJuly 22, 2011 at 6:15 AM

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

    ReplyDelete
  14. Dr MihirNovember 28, 2011 at 4:13 AM

    IT WORKED !!!!

    THANKS A BILLION. UR A GENIUS !!!

    ReplyDelete
  15. YoboyNovember 28, 2011 at 7:00 AM

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

    ReplyDelete
  16. Dr MihirDecember 31, 2011 at 10:45 PM

    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
  17. YoboyJanuary 1, 2012 at 1:54 AM

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

    ReplyDelete
  18. SharyFebruary 4, 2012 at 9:55 AM

    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. YoboyFebruary 4, 2012 at 8:49 PM

      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
  19. EnikőFebruary 16, 2012 at 9:16 AM

    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. YoboyFebruary 18, 2012 at 1:16 AM

      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. EnikőFebruary 18, 2012 at 1:50 AM

      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. YoboyFebruary 18, 2012 at 2:38 AM

      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
  20. DeepakMay 22, 2012 at 11:07 AM

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

    ReplyDelete
  21. MichaelJuly 23, 2012 at 5:32 AM

    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. YoboyJuly 23, 2012 at 5:39 AM

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

      Delete
  22. Gérson LopesAugust 21, 2012 at 5:18 PM

    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
  23. YoboyAugust 22, 2012 at 3:29 PM

    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
  24. UnknownAugust 27, 2012 at 9:41 AM

    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. YoboyAugust 28, 2012 at 12:15 AM

      Hi 林君翰,

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

      Delete
  25. UnknownAugust 28, 2012 at 8:24 AM

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

    Thank you for your reply!

    ReplyDelete
    Replies
    1. YoboyAugust 28, 2012 at 10:26 PM

      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
  26. UnknownAugust 28, 2012 at 10:46 PM

    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. YoboyAugust 28, 2012 at 11:04 PM

      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
  27. UnknownAugust 28, 2012 at 11:07 PM

    IT WORKS!!! AMAZING!!!
    Thanks a lot :D

    ReplyDelete
  28. KaySeptember 7, 2012 at 12:12 AM

    Thanks! Worked really well.

    ReplyDelete
  29. Web DesignOctober 20, 2012 at 6:45 PM

    Informative Blog!!

    ReplyDelete
  30. Keltie Leanne DesignsNovember 1, 2012 at 2:31 PM

    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. YoboyNovember 2, 2012 at 2:51 AM

      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
  31. Keltie Leanne DesignsNovember 2, 2012 at 9:35 AM

    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. YoboyNovember 3, 2012 at 12:59 AM

      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
    2. Keltie Leanne DesignsNovember 3, 2012 at 2:13 AM

      Perfect - thanks!

      Delete
  32. Matt BanesNovember 2, 2012 at 12:40 PM

    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. YoboyNovember 3, 2012 at 1:02 AM

      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
  33. NameSelling.comJanuary 5, 2013 at 2:44 PM

    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. YoboyJanuary 5, 2013 at 9:32 PM

      Try this:

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

      Cheers :)

      Delete
  34. NameSelling.comJanuary 6, 2013 at 1:38 AM

    It works for Chrome and Firefox but not IE 9?

    ReplyDelete
    Replies
    1. YoboyJanuary 6, 2013 at 1:43 PM

      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
  35. NameSelling.comJanuary 7, 2013 at 11:49 AM

    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. YoboyJanuary 7, 2013 at 11:38 PM

      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
  36. NameSelling.comJanuary 8, 2013 at 1:09 AM

    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. YoboyJanuary 9, 2013 at 8:47 PM

      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
  37. NameSelling.comJanuary 10, 2013 at 12:02 AM

    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. YoboyJanuary 11, 2013 at 12:33 PM

      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
  38. NameSelling.comJanuary 12, 2013 at 1:37 PM

    Ok, fixed it, thanks again.

    ReplyDelete
  39. AmandaJanuary 13, 2013 at 2:55 AM

    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. YoboyJanuary 15, 2013 at 12:23 AM

      Hi Amanda,

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

      Delete
  40. NameSelling.comJanuary 19, 2013 at 8:25 AM

    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
  41. NameSelling.comJanuary 19, 2013 at 11:56 AM

    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
  42. NameSelling.comJanuary 31, 2013 at 11:14 AM

    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. YoboyJanuary 31, 2013 at 11:40 PM

      Hi Mark,

      Try this:

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

      Cheers :)

      Delete
  43. NameSelling.comFebruary 1, 2013 at 1:41 AM

    That worked, thanks again.

    ReplyDelete
  44. Tv-CorkFebruary 7, 2013 at 9:13 PM

    Thanks for that

    ReplyDelete
  45. NarsFebruary 12, 2013 at 5:10 PM

    thank you, it's makes so useful header

    ReplyDelete
  46. YeeJunMay 29, 2013 at 1:18 PM

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

    ReplyDelete
  47. NameSelling.comJuly 21, 2013 at 10:08 AM

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

    ReplyDelete
    Replies
    1. YoboyJuly 21, 2013 at 2:40 PM

      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
  48. UnknownOctober 31, 2013 at 6:08 PM

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

    ReplyDelete
  49. MultiHackToolsJuly 26, 2014 at 9:19 PM

    Thanks!

    ReplyDelete
  50. UnknownNovember 14, 2014 at 4:12 AM

    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
  51. Billy LoweMarch 27, 2017 at 3:25 AM

    This comment has been removed by the author.

    ReplyDelete
  52. Vimal BairagiMarch 27, 2017 at 6:52 PM

    Hello sir,
    I have a problem, when I share my blog link with anyone, it shows an image with it. Please tell me how can I change that image. I want to show a custom image with my link when I share it. Please help me. ☺

    ReplyDelete
  53. Vimal BairagiMarch 27, 2017 at 6:53 PM

    Hello sir,
    I have a problem, when I share my blog link with anyone, it shows an image with it. Please tell me how can I change that image. I want to show a custom image with my link when I share it. Please help me. ☺

    ReplyDelete
  54. Dmitry PushkarJune 17, 2017 at 11:03 PM

    Thank you very much.

    ReplyDelete

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

Subscribe to: Post Comments (Atom)