Saturday, May 13, 2017

Display blog title image in Blogger's new floating header bars


Here's a simple way to display your Blogger blog's logo image in that floating header bar that appears as you scroll down in your blog (if you're using one of their new 2017 templates).

Blog title in floating header bar: text vs. image

Background


Right now, even if you add a header image to your blog (via the Layout page), the floating bar thing that appears when you scroll down will show just the name of your blog in text - not the logo image you love [Compare the blog title in the two images above]. Note this only applies to the four new themes: Contempo, Notable, Soho, and Emporio.

So this post will show one way to display an image in that floating header bar. It doesn't even have to be the same image. You could have one larger logo for the top of the blog page itself, but a different thinner logo to fit nicely in the floating bar.

This is adapted from an old trick for showing the image in Dynamic Views templates. Basically I will just set the background of the floating header element as an image. That way I can do it all via CSS rather than messing around with the blog template.

All the following code should be pasted into (Theme → Customize → Advanced → Add CSS)

Let's start.

Step 1 - Remove the blog title text 


We start by hiding the blog name text from the floating bar. Otherwise it will cover the image and look ugly. 

.centered-top-container.sticky .widget.Header h1 {display: none;}

Step 2 - Add the image


I'll assume you have your image already uploaded somewhere. The best way is just to insert the image into a Blogger post, and grab its URL by switching to the "HTML" compose view. You don't even need to post it; just uploading it once to a post draft is enough.

Your image should have a URL like:
 https://2.bp.blogspot.com/-blahblahblah/blahblah/blahblah/blahblah/s380/filename.png

Pay attention to that number. To get the best image size to use here (i.e. the smallest that's still clear enough to read), adjust that number manually first. For me in my example, s280 was the best size.

Hold on to that image URL.

Now paste the following into your blog's CSS:

.centered-top-container.sticky .blog-name, body.item-view .blog-name {
    background: url(https://2.bp.blogspot.com/-blahblahblah/blahblah/blahblah/blahblah/s380/filename.png) no-repeat center;
    height: 65px;
}

Replace the URL there with your own image URL.

Also check the height size. 65px looked best for me. Change the number to whatever size suits you and your chosen image. 

Step 3 - Remove the subscription button


So far it will look like this:

Subscribe button still there. Let's remove that.

We could either move the subscribe button, or just hide it completely. I think it's better to remove it. Add this code to hide it:

.centered-top-container.sticky .blog-name .subscribe-section-container {display: none;}

You could just move it down, in which case you would get this:

Subscribe button moved below the logo image

But I preferred just hiding it (as above), and relocating the blog subscription widget to the sidebar.

Step 4 - Padding (optional) 


This isn't necessary, but if the image spacing looks weird at all, you can also try just changing the padding (the white space around) with this:

body.collapsed-header .centered-top-container .blog-name {padding: 30px;}

Play around with the number until you find a good look. If you do this, you could also just remove the "height" portion of the Step 2 code.

Final look


Again here's what it would look like before and after:

Before: text title
After: Image title 

Those of course are mobile views. Here's how it looks on desktop:

Desktop view with image header


Alternative: keep blog title with a small logo image


Note that these instructions were for a full image header that includes the blog name in the design. If your image is just a small logo, you can still keep the blog title text next to your small logo. In that case, you'll want to:

  1. skip Step 1 from above
  2. change the word "center" in the code from Step 2 to either "left" or "right"
  3. align the blog title to the opposite side by adding this:

.sticky .widget.Header h1 {text-align: right;}

8 comments :

  1. Bro, I've been searching for almost two weeks how to fix my Soho template problem and you're code is the only one the works! I have tried a lot of codes from blogspot users and they didn't work. I just like to ask how can I position to the left my small logo?
    My is positioned in the center and the blog title is on the left side. I like to put it beside my blog title, either on the right or left, whichever looks good. Man big big big thanks! At last I saw the right code. I can sleep now.. LOL

    ReplyDelete
    Replies
    1. Haha, glad I could help!
      You can move the logo to the left or right just by changing the word "center" in the code to "left" or "right".
      Then, align your blog title to the opposite side by adding this code:

      .sticky .widget.Header h1 {text-align: right;}

      Delete
    2. Hello Sam,
      Been tweaking my site again..btw your code is working great and i thinkg it's the only code out there that works for the new blogger templates...
      I just like to ask some help again..I like to combine my header image and header text but i can't find the right codes again..I read all the blogger answers in the forum but they are no good...the only code I found working is this
      .Header h1 {
      text-align: [Alignment];
      }

      I can move the title left and right, but I need to position my image after the header text title...is there a way I can do that using css codes only?...and I like to resize and move the image up down left right to get the right spot...man been reading all the w3school codes selectors, divs, parameters etc..only brought me headaches.. :) hope you can help me with the codes...big thanks bro

      Delete
    3. What's your blog URL? I can't really help if I can't see what you're doing lol.

      Delete
    4. Hello Sam,
      This is my blog URL https://www.cooldogtuts.com/ my blog is just two weeks old...I noticed sometimes the image also appeared on the actual header...
      what i do is i just paste it again on the css panel, then its back to normal. this is my link on the Header widget
      https://2.bp.blogspot.com/-lBrMEA8wl9g/WnpoeZiNoyI/AAAAAAAABd8/vhJMQsPw6ksHhqvHB3zJX7yMqS4QVuqCgCLcBGAs/s1600/1.png

      I also noticed when I included my h1, I can't find the url of my logo...is there a way to add the image and text, adjust them side by side..and they will also appear on the sticky widget header?
      I tried to follow the tutorials here http://tricks-for-new-bloggers.blogspot.com/search/label/Header but I think its not updated or maybe I just don't know how to understand it :) LOL

      Delete
    5. I'd suggest aligning your logo to the right, instead of center. And also letting it auto-resize the height, like this:

      .centered-top-container.sticky .blog-name, body.item-view .blog-name {
      background: url(https://2.bp.blogspot.com/-lBrMEA8wl9g/WnpoeZiNoyI/AAAAAAAABd8/vhJMQsPw6ksHhqvHB3zJX7yMqS4QVuqCgCLcBGAs/s1600/1.png) no-repeat right;
      height: auto;
      }

      Or just align it to the left. That way you won't have to worry about a big space gap between the text and image on a big-size screen.

      You should remember that when you insert an image in this way, we're "cheating." The image *IS* the background of the text box. So it will be nearly impossible to make them line up side-by-side well since they're NOT 2 objects next to each other; they are 1 object.

      Delete
  2. Excellent man, thanks! However the height command did not change the size of the logo for me. I had to use the "background-size" command.

    I still want the logo to link to the homepage, which unfortunately it is not doing anymore. Is there a way to do this? Also is there away to move the new logo, a few pixels to the right?

    I really do appreciate your help. Thanks in advance.

    ReplyDelete
    Replies
    1. I don't know of any reliable way to make the image a link when you insert the image via CSS. You'd have to not use CSS and instead insert the image in your blog template. You can try that but it's harder than just copy/pasting CSS code, though it will let you make the link.

      To move the logo, just add something like {padding-left:5px;} Play around with the size until it's where you want it to be.

      Delete