URL Hack for Header Image in Blogger's Dynamic Views Template | CutieCoding

Estimated Reading Time:
Hi! Welcome back to another edition of CutieCoding, a blogging tips series for the lazy blogger learning things the KISS way.

We are continuing from our customization of your blog's beautiful crown, aka the header. Last time, we replaced the default blog title text with an image in your dynamic views template. BUT, it wasn't clickable since the CSS we used adds your picture as a background image. CSS currently doesn't allow you to add a background image and a URL that the image can lead to. It also logically doesn't make sense to have background image clickable, ya know. It just doesn't compute.

So, this time, let's look at how you can set a destination URL for your header image in Blogger's dynamic views template, in a sorta hack sorta way, sort of.

The concept is pretty basic if you think about it. Remember how we removed the text version of your blog title in lieu of the image last time? We are going to keep it! Yes, that's right. But with one condition, that it be transparent.

The blog title in dynamic views template works as intended in that it is clickable and when you click on it, it takes you to your designated homepage. We want the same functionality for our header image which isn't clickable (unforch) and so, we keep the blog title the way it is and just make the colors transparent so that it shows the header image through and gives the illusion that you clicked on the header image rather the original blog title.

Still confused? Don't worry. Once you're done with placing this code, if you select all your text on the desktop and mobile, it'll look like this:

That's the blog title you just selected which is superimposed over your header image. So, how do we do this? First, we add the font we used for the logo into Blogger (In our case, it's Cookie which isn't yet available in the web fonts in Blogger). If you've used your own custom font or done some hand lettering, try and find the closest font to use there. If the letterform of your logo is shaped into a shape that's different from the way it would appear if typed, play around with the letter spacing to cover the most of the header image so that no matter where they click on the image, it will still work as intended and take the user to the blog's homepage.

Before you continue, make your header image is placed exactly the way you want it. Then, we make sure that your blog title is correctly sized and aligned on top of our blog header image, filling the entire block of the image. Then, we make the font color disappear. That's it!


THE TL;DR Version

  1. Log in to Blogger.com.
  2. Click on the blog you want to edit. The one that uses a dynamic views template.
  3. Go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
  4. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
  5. If you followed the instructions to add your Blogger title image here, find the CSS code you'd inserted earlier that looks like this and delete it. 
  6. /* REMOVE THE TEXT OF BLOG TITLE */ #header.header .title a h1 {   display: none; }
  7. Now, paste the code below at the end of any other CSS code you might have there. Play around with the parts in green to cover as much of the header image as possible so that no part remains unclickable. 
  8. /* REMOVE THE TEXT OF BLOG TITLE */ #header.header .title a h1 {   font-family: 'Cookie' !important;   font-style: italic !important;   font-size: 15em;   letter-spacing: 0.2em;   color: transparent;   text-shadow: none;   margin: 0 1em 0 0; }
  9. Press ‘Apply to Blog’.
  10. Done-ise Richards!

Let me know if you have any questions or ideas in the comments below.


Ray out! Peace!

Photo credit: me