How To Show Only Post Title In Blogger Mobile Template

You can customize the look of the custom blogger mobile template just the same way you would edit the desktop view. Customizing the mobile look of post titles in Blogger template will only take a few lines of CSS.

What we are going to do is hide every other element showing up with the post title on the homepage. These include the snippet, date and also the small-sized thumbnail image. 


See Demo Live Preview 
Info: If you wish to further customize the look of your mobile template which could include increasing thumbnail size and more advanced post title styling, you need to read –  Customize Blogger Custom Mobile Template

Enable Blogger Custom Mobile View

The customizable version of all Blogger mobile templates is the custom mobile template. What it basically does is try to mimic the look of your theme on larger screen devices.

Step 1
Go to themes >> Mobile >> Gear Icon below the mobile view.

Step 2
Tick “Yes. Show mobile theme on mobile devices” >> Choose mobile theme >> select Custom >> save your new mobile theme.

Adding The CSS

Below are the CSS codes that will completely hide post thumbnail, comment counts, snippet and the date span. The below CSS codes should be added as shown.

Go to themes >> Edit HTML >> Using CTRL + F search for ]]></skin>. All codes are to be added above ]]></skin>.

Hide Blogger Mobile Post Thumbnail

Blogger shows a default small size (72px) post thumbnail which acts as featured image. You can hide it on mobile devices by adding the CSS below.

.mobile-index-thumbnail img{display:none!important;}
.mobile-index-thumbnail{display:none!important;}

Paste the code above ]]></skin>. The !important tag specified tells the browser to override every related CSS declaration and use this one. By doing that, thumbnails will be hidden on homepage only.

Remove Comment Count And Read More Arrow.

Just the same way you have read more arrows on the desktop, you have it also on mobile, It floats to the right of each post beside the post snippet. To hide it along side comment counts per post,

html .mobile-index-arrow{display:none!important}
.mobile-index-comment{display:none!important;}

Paste the above code, the same way you added the first code.

Hide Post Snippet And Mobile Date

The post snippet is the summary which is shown alongside the post title and thumbnail while the date is always shown above the post title. Hide the post snippet and date by pasting the below code above ]]></b:skin>

html .mobile-index-contents .post-body{font-size:100%;display:none!important}
.mobile .date-header span {display: none;}
.mobile-index-contents{display:none!important}

Make Post Title Full Width, Remove Shadows and Add Border

Add more styling to the look of the post title by adding borders, and removing the shadows shown. The below CSS will also make the post title display in full width.

.mobile .date-outer{border-color:#444;border-width:0 1px 1px;box-shadow:none!important}
.mobile .date-outer{box-shadow:none!important;border-bottom:1px solid #444!important}
.date-outer{border:none!important}
.mobile-index-title{width:100%!important}

Extra Declarations.

In other to make sure these CSS codes don’t affect the desktop view and also don’t have an effect on post pages we will wrap our codes with special tags.

Total codes will look as shown below.

<b:if cond=’data:blog.isMobileRequest == “true”‘>
<b:if cond=’data:blog.url == data:blog.homepageUrl’><style>
html .mobile-index-contents .post-body{font-size:100%;display:none!important}
html .mobile-index-arrow{display:none!important}
.mobile-index-thumbnail img{display:none}
.mobile-index-thumbnail{display:none}
.mobile-index-comment{display:none}
.mobile .date-header span{display:none;}
.mobile-index-contents{display:none!important}
.mobile .date-outer{border-color:#444;border-width:0 1px 1px;box-shadow:none!important}
.mobile .date-outer{box-shadow:none!important;border-bottom:1px solid #444!important}
.date-outer{border:none!important}
.mobile-index-title{width:100%!important}</style>
</b:if></b:if>

Info: Learn to properly hide any widget in blogger mobile template.

Rounding Up
This is how easy it is to show only post title in mobile templates. It has a lot of advantages for your blog which includes high loading speed and increases SEO rank.

Feel free to let me know if you were successful at it. If you like the demo theme and wish to purchase it, visit this page.

Update: This post has been updated and it works perfectly on all default blogger template. It is most preferred you use the total codes below extra declaration.

Related Articles

  • How To Show Default Author Bio Box In Blogger
  • Add Emoticon, Special Icons To Blogger Post
  • Properly SEO Optimize Blogger Blogspot
  • Why You Should Speed Up Your Blog?
  • Tips For Branding Your Blog – Make It Professional
  • 11 Killer Tips To Increase Blogger Blog Loading Speed
  • 12 Comments - Post Yours! How to? ▼

    1. This comment has been removed by the author.

    2. This is simply awesome … Thanks for sharing … I am a regular visitor of your site and Whenever I am here, I always get some cool stuff ….

    3. Wow… Nice post.
      Really rare to find a post like the… I love it.

      I love your blog new design.

    4. hi very good article.
      thanks for sharing. keep up the good work.

    5. Thanks for stopping Hiren.

      I appreciate your sincere feedback.

    6. Thanks…

      Will soon place version 1 on sale.

    7. Very nice blog it is very helpful to other and also me.
      If you want to Avast Antivirus Support Get in contact with our specialists at GlobalTech Squad by dialing Toll Free Numbers :USA: 1-800-294-5907 Canada: 1-844-573-0859 UK : 0-808-189-0272 Australia : 1-300-326-128

    8. thanks for the helpful post.

    9. Very Helpful Post John Keep Sharing.

    10. Wow. Its really helpful. You have a great blog. Will surely do this on my blog.

    11. wonderful you've got here but after following the steps, i discovered the dates were still showing.

      any way out?

    12. Add the below code and see if it will solve the problem.

      .mobile .date-header span{display:none!important;}

    Leave a Reply

    1 Shares
    Share1
    +1
    Tweet
    Pin
    Share
    Stumble