Blogger : How To Fix Missing Header Image In Mobile Template

-
blogger-header-image-problem-thumb
The Blogger platform offers you different mobile templates for your site. You can choose between built-in templates (Simple, Picture Windows,…) or you can select a Custom mobile template, which will adapt your desktop template to the mobile version. This enables you to have a site with a consistent theme on both desktop and mobile versions. One part that might not be consistent though is a header. Depending on the options selected in the Layout section, the mobile template (either custom or built-in) might not show a header image. In this post, we will examine two ways to solve this problem.
Blogger - Header Image in Desktop Version
Header in desktop version
Blogger - No Header Image in Mobile Version
Header in mobile version
The problem of mobile template not showing a header image will only happen when you have a specific option selected in the Header Configuration Window in Layout section. One solution is to change that option, the other solution (that only applies to custom mobile template) is to modify template code. First, let’s try to solve the problem by changing the option in the Layout section.
Note: To test a custom mobile template in a desktop, all you need to do is to append ?m=1 at the end of your URL.

Solution 1 – Remove Description Of The Header In Layout Section

Go to Layout section. Under NavBar gadget, there should be Header gadget. For that gadget, click on Edit link.
A new window with the name “Configure Header” will open. This is where you set up your image header. At the bottom of the window you should have 3 options under Placement option:
  1. Behind title and description
  2. Instead of title and description
  3. Have a description placed after the image
If you have option 1 selected, your image will not show in the mobile version of your site. If you don’t need to show a title / description in the header, then the solution is simple. Just select either the second or third option. Both of these options shows a header image in the mobile version of your site.
But what if you still want to keep option 1 or you want to use different image for a mobile version? In this case, the modification of a template code is necessary and this is discussed next.

Solution 2 – Modify Blogger Template Code

To keep an option 1 “Behind title and description” and still have a header image in mobile version, we need to modify the template code. This solution only applies to custom mobile template!!!!
Note:If you have never edited a template before, you might want to check my other postHow to modify Desktop / Mobile Template.
  1. In Dashboard, choose Template section and then click on “Edit HTML” button.Blogger - Edit HTML Button
  2. Under “Jump to widget” dropdown menu, select Header1.
    Blogger - Jump to widget Header1
  3. The first line should start with <b:widget id='Header1' locked='true'. Expand it by clicking on the arrow located right of the line number.
    Blogger - Edit HTML Expand Code Line
  4. Line <b:includable id='main'> should show up. Expand it the same way by clicking on the arrow besides the line number.
    Blogger - Expand Code Line for id main
  5. After expanding, a lot of template code will get revealed. In your template, find the line below and Copy it. This code will wrap a few lines, so make sure you only select the code on that line and not any lines that follows it.
    Note: You should copy the line from your template and not from the code shown below, as the code below could differ from the code you have in your template.
  6. A few lines above it, you should find the line <div id='header-inner'> . Remove it and Paste the line you copied from step 5. That code shows our image and by Pasting it here, we are making sure that the image will also be shown in a mobile version.
  7. Click on “Save Template” button.

Popular posts from this blog

How to hide or remove Powered by Blogger

-
Image
We had already learned the trick for  disable or hide the Blogger Navbar  from blogger blog. Now in this tutorial we will be acquainted with the simple technique to remove the default annoying attribution message saying the name of  blogger template  you are using (e.g. Simple template.) followed by attribution link  Powered by Blogger . We know that there is a copyright (optional) field in blogger attribution widget to write/display our blog copyright information and credits. However, you can only write 99 characters long Copyright message. Further, it does not facilitate us to write a text link information viz. About Us, Sitemap, Terms and conditions etc. Many of us just want to add their copy right messages like All Rights Reserve, Privacy Policy and Contact Us link etc. to the blog footer instead or along with the blogger credit. Accordingly, you may use any of these following two easy Showeblogin Tricks to either hide or remove Powered by Blogger at...
Read more

Merge Partitions without Losing Data in Windows 10/8/7 - MiniTool

-
Image
It Is Necessary to Merge Partitions In daily computer use, more and more persons focus on disk management, for example, resize/extend partition, format partition, migrate OS, clone hard drive and more. Thereinto, to merge partitions is a usual partition management operation. For example, if there are many small partitions on a hard disk, you can merge them to create larger ones; if a very important partition ( like system partition ) is running out of space while its neighboring partition is filled with free space, you can merge them to expand the important one. Well then, how to merge partitions without losing data in Windows 10/8/7? Next, we will give a quite good solution. Two Ways to Combine Two Partitions Merge Two Partitions via Windows Disk Management When referring to merge disk partitions in Windows 10/8/7, some of you consider using Windows Disk Management. However, this free Windows built-in tool does not provide you with such a function to merge partitions directl...
Read more

Media buffering, seeking, and time ranges

-
Image
Sometimes it's useful to know how much  <audio>  or  <video> has downloaded or is playable without delay — a good example of this is the buffered progress bar of an audio or video player. This article discusses how to build a buffer/seek bar using TimeRanges , and other features of the media API. Buffered The buffered attribute will tell us which parts of the media has been downloaded. It returns a TimeRanges  object, which will tell us which chunks of media have been downloaded. This is usually contiguous but if the user jumps about while media is buffering, it may contain holes. This will work with  <audio>  or <video> ; for now let's consider a simple audio example: <audio id="my-audio" controls src="music.mp3"> </audio> We can access these attributes like so: var myAudio = document.getElementById('my-audio'); var bufferedTimeRanges = myAudio.buffered; TimeRanges Object TimeRanges are a series o...
Read more