Use Header Image as Blog Title in Blogger's Dynamic Views Templates | CutieCoding

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

In this edition, we are going to learn how to replace your generic Blog Title with a banner image for dynamic views templates in the Blogger platform.


It's surprising that this isn't a gimme in all Blogger templates considering how many bloggers and businesses use their own logos in place of written text as a sort of masthead or banner at the top of the site. Plus, bloggers might prefer to use fonts that are not available in the Blogger interface and so, it's easier to just convert it into an image and use their special font as a header image (though I again find it amazing that Google hasn't yet connected their brilliant web font product to Blogger) It's already a little bit of a workaround to achieve this for static templates in Blogger but still can be done by editing your HTML to include your header image.

For dynamic views templates, however, we need to do a bit of acrobatics and some CSS (in that order) to get your header image up there.

Notes:
  • At the time of writing this article, these instructions worked on all of the dynamic views template formats (though we finally went with the 'Magazine' format)
  • Your header image won't likely show up centered with the code below. Let me know if you would like to know how to do that. 
  • The header image once applied won't be clickable like a typical blog title. There is a hack to make it clickable though...next post.
For now though...here it is.
 
    HOW TO USE AN IMAGE FOR A BLOG TITLE IN BLOGGER'S DYNAMIC VIEWS TEMPLATE

    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. First, you need to upload your header image to Blogger. Create a 'new post' and insert your image. Then, jump into the 'HTML' side of your post editor and copy the URL of the image. 
    4. Close the post and paste the URL into code below in a text editor (Notepad is fine).
    5. Now, go to ‘Template’ and click on ‘Customize’ under the ‘Live on Blog’ frame.
    6. Then, move to ‘Advanced’ on the left panel and ‘Add CSS’.
    7. Paste the code below at the end of any other CSS code you might have there.
    8. Press ‘Apply to Blog’.
    9. You're Nickelo-done!

    /* ADD A HEADER IMAGE AS A BLOG TITLE */
    #header-container #header.header .header-bar .title {
    background: url(https://3.bp.blogspot.com/-91xRhC0s_PA/V4ZvJN1F0qI/AAAAAAAAAb4/lT5jNcQaO24MPTwdaFhRc0c3owubR8FBgCLcB/s400/aigu_logo_integrated_border.png) no-repeat left;
    height: 14em; width: 30em;
    background-size: contain !important; max-width: 100%; max-height: auto;
    }

    /* REMOVE THE TEXT OF BLOG TITLE */
    #header.header .title a h1 {
    display: none;
    }

    /* REMOVE THE UNDERLINE FROM THE BLOG TITLE */
    #header.header .header-bar span.title a, #header.header .header-bar span.title a:hover, #header.header .header-bar span.title a:active {
    text-decoration: none; !important;
    }



    The Lengthy Version

    With the above CSS code, we are actually removing the blog title and replacing it with an image as a background image which is why the clickability factor disappears.

    On the other hand, helloooo PIKCHUR!

    Editing your image size

    When you copy over your image URL, it would read something like this:

    https://3.bp.blogspot.com/-91xRhC0s_PA/V4ZvJN1F0qI/AAAAAAAAAb4/lT5jNcQaO24MPTwdaFhRc0c3owubR8FBgCLcB/s320/aigu_logo_integrated_border.png

    Notice the s320 tag there in the link? That's how it decides on the image quality based on the dimensions of the picture. Change it to the size you want. So you will need to play around a little bit with it. We went with s400 because the original size of our logo is huge. If your image is already made to the exact size you want, change this to s1600 so that your header image shows up in its original size.

    https://3.bp.blogspot.com/-91xRhC0s_PA/V4ZvJN1F0qI/AAAAAAAAAb4/lT5jNcQaO24MPTwdaFhRc0c3owubR8FBgCLcB/s1600/aigu_logo_integrated_border.png

    Along with editing your image URL, you will also need to play around with the dimensions of the box containing the image will be. If you notice, I usually like using em to define sizes in CSS because it usually follows the screen size and optimizes for it.

    The Mobile Version

    If you remember our CutieCoding post on how to customize your blog for mobile, I mention how you should try and add in the mobile version of CSS for every modification. Here it is for the header image:

    /* ADD A HEADER IMAGE AS A BLOG TITLE */
    .mobile #header-container #header.header .header-bar .title{
    background: url(https://lh3.googleusercontent.com/-AdaUBcPUrCc/V2UsrECePBI/AAAAAAAAAYk/cHI6RoX1zBEFco2G5bQbLvxei4FuVuiYwCCo/s400/aigu_logo_acuteaccent_1.png) no-repeat left;
    height: 7em;
    width: 15em;
    }


    That's pretty much it! Let me know in the comments below if you have any questions.

    ...o0o...

    Ray out! Peace!

    Image credit: me! 

    READ MORE BLOGGER TIPS ON CUTIECODING




    Comments

    Popular Posts