How To Easily Customize Blogger Custom Mobile Template

customize blogger mobile template

Customizing the custom mobile version of your blogspot template will make your blogger blog mobile friendly, hence there would be no need to download a mobile friendly blogger template. In this post, you wil learn How To Easily Customize Blogger Custom Mobile Template.

customize blogger mobile template

Each free default blogspot template comes with a mobile version which you could use as the default mobile theme but better still you could choose an easily customizable (custom) mobile version.

First, we will need to understand the difference between all the mobile templates blogger offer and which one to choose.

Default Mobile Version

Before now, my favorite mobile version was the default mobile template. This was because it showed the colors and some of the styles I had in the desktop view.

I was really not much of a geek then in design so I felt comfortable with it but as I started learning CSS, JavaScript and HTML from other blogs, I realized that I could make the mobile view of my template better by customizing it using blogger mobile CSS.

Pros of Using Default Mobile Template

  1. It easy to set up.
  2. Mobile Friendly
  3. Fast Loading

Cons of Using Default Mobile Template

  1. Not customizable
  2. A limited number of widgets (About me box, 2 Adsense Banners, Share button and the comment box)
  3. Not unique (your blog would look same as other blogger blogs).

Custom Mobile View

When I realized that I could make the mobile version of my blog better and look more like my desktop view, I met the custom mobile blogger template.

It lets you add an unlimited number of gadgets, and anything you want to add, unlike the default mobile templates, that only allows the – About me box, 2 Adsense Banners, Share button and the comment box.

Recommended Posts

With a blogger custom mobile theme, you can easily add related posts, recent posts, popular posts, subscription widget, external advert etc.

You can also design the image thumbnails, edit titles, headings… Just name it!. Virtually anything you can use on your desktop version can also be shown on mobile view.

Pros of Blogger Custom Mobile Template

  1. Easily customizable
  2. Unlimited number of widgets
  3. Mobile and User-friendly
  4. Design uniqueness.
  5. Fast loading

Cons Of Blogger Custom Mobile Template

  1. Requires you to have a little coding idea.
  2. Takes time to fit to taste.

How To Enable Custom Mobile View.

  1. Visit blogger.com dashboard >> Theme.
  2. Click on the gear icon below the mobile view. A pop up will appear.
  3. Tick “show mobile version”.
  4. Select “Custom” among other mobile templates.
  5. Save.

enable blogger custom mobile template

How to fix BlogSpot mobile template display problem

This step is exclusive to only those that fault a defect in the mobile look. something similar to what is shown below.

Locate “Edit HTML” in the template section and click, using CTRL+F search for the below code.

If found, simply click on save but if not found, search for the below code instead.

If the second code above is found, simply replace it with the first code above. Finally, save your template, and check out your blog on a mobile device, it should be looking arranged now.

How to view blogger mobile version on PC

To test your work, you might want to check it out on your laptop, to do this, simply add ?m=1 to the URL of your blog to view the mobile template of your blog on your laptop browser.- (www.obhiabablog.blogspot.com?m=1).

How To Add Widgets To Blogger Mobile Templates.

Next stage of today’s tutorial, is to enable our desktop view widgets such as the popular post, recent post, Facebook comments, advert banners to show in our mobile view. To do this, we first need to find out the Id of each widget on our blog.

How To Find The ID of Widgets In Blogger

To find the IDs of widgets in a blogspot blog, you can do it either via your layout section or you can use browser plugins like Google Inspect tool, Firebug for FireFox and many other tools or plugins available.

find blogger widget id

Now let’s check out how to find the ID of each widget on our blog, through the layout section.

Finding Widget ID in Blogger Using Layout Section

  1. Visit the layout tab >> Click on Edit in any widget you want to find it’s ID eg. Subscription Box.
  2. Just inside the pop-up box, check out for the link above the widget settings.
  3. Move till you get to the last part of the Widget URL. In the end, you will find something like this (For Popular Post = Popularpost1, for HTML widget = HTML and a dedicated number). Check the photo below.
  4. Simply copy the code at the end part as shown in the image above and paste it into a notepad. That is the ID of the widget.

Add Any Blogger Gadgets To Mobile Template

Now that you know the ID of all the widgets you want to show on your mobile template, it’s time to locate the widgets inside the HTML section and enable it to display in the mobile template.

  1. Visit the Template section >> Click on Edit HTML >> Click on Jump to Widgets >> Select any widget ID you want to show in mobile view.
  2. Locate the ID among others widgets.
  3. Just after locked=’false’ in the single line of code, paste the Mobile=’yes’.
  4. Final code should look like this <b:widget id=’HTML4′ locked=’false’ Mobile=’yes’ title=” type=’HTML’ visible=’true’>.
  5. Save.

Further Customization

  1. Replace ‘yes’ with ‘no’ if you want to show the widget only in desktop view.
  2. Replace ‘yes’ with ‘only’ if you want to show the widget only in mobile view.
  3. Leave it as ‘yes’ if you want to show the widget in both mobile and desktop view.

Do this for all the widgets you will to show on the mobile version of your blog. When successful with the coding, finally click on save and view your blog.

How To Easily Edit Blogger Mobile Title

The title of the default mobile version is not very nice because it doesn’t fill up the page. This effect is mostly seen when you are viewing your blog on a tablet.

Still inside the HTML box, search for ]]></b:skin> using CTRL+F.

When found, paste the below code, just above ]]></b:skin>

Save your template, and you will notice the difference. You can also change the mobile post title color, font using the below code.

Customization

  1. Replace 22px with your desired font size
  2. Replace Calibri with your desired font eg Arial
  3. Replace #444 with your desired color

How To Make Blogger Mobile Thumbnail Large

If you have visited any BlogSpot blog using the mobile version, then you must have noticed the small thumbnail image shown on the homepage and achieve pages.

So this step is optional and it’s supposed to be another tutorial on its own, so I have decided to add it to this, as a way of letting your blog look better than any other BlogSpot blog in the platform.

I have prepared the code, all you need to do is paste it and see it bring out the beauty in your blog.

As always, using CTRL+F search for </head> and just above it, paste the below code.

After pasting, save and check out your blog on a mobile or tablet.

Show Related Post And Subscription Box In Blogger Custom Mobile Template.

Related post is a very important part of a blog, it is always advised to place it in the footer showing at least 3 recommended posts. We earlier added one to the desktop view and we will add same list style to the mobile view.

The reason for choosing the list style over the one with thumbnails (images) is because mobile phones are not as powerful as the desktop so it is advised to limit the usage of images to prevent low loading speed.

  1. Log in to blogger.com >> Theme >> backup your template >> click on edit HTML
  2. Using CTRL+F search for the first <div class=’post-footer’>.
  3. Just below the first <div class=’post-footer’> paste the below code.

Replace obhiabablog with your feed burner name.

Step 4 – CSS – Optional.
If you already have this related post on desktop view, do not add this code below again

Using CTRL+F search for </head>. Just above it, paste the below code.

5. Save the template and that’s all.

Add Facebook Like, Share, Tweet Button below Posts In Mobile view.

  1. Log in to blogger.com >> Theme >> backup your template >> click on edit HTML
  2. Using CTRL+F search for the second <div class=’post-footer’>
  3. Just below the first <div class=’post-footer’> copy and paste the below code.

4. Save the template and that’s all.

Show Adsense And Other Affiliates Inside Post In Blogger Mobile View.

Showing AdSense and other affiliate banners and link in our custom mobile view is very easy all we need to do is use the right banner size. Read this previous post and check out how to show AdSense inside a blog post.

Note: In the post do not paste the code at the second <data:post.body/>, <div class=’post-header’> or <div class=’post-footer’>  rather paste them at the first which is assigned to mobile view.

Final Words

We have successfully come to an end of today’s tutorial. Next tutorial will be posted next week and should in case you want any question, feel free to ask below. sharing is caring!

Hopefully, you now understand blogspot mobile templates and how you customize it to show any widget.

Summary
How To Easily Customize Blogger Custom Mobile Template
Article Name
How To Easily Customize Blogger Custom Mobile Template
Description
how to easily customize or edit the blogger blogspot custom mobile template (mobile version), add widgets, show Adsense, related post, edit post title, edit post thumbnail, share button etc..
Author
Publisher Name
Blogging Prince
Publisher Logo

Related Articles

  • 5 SEO Ranking Factors Learnt From Linda Ikeji’s Blog
  • How To Add Twitter Feed Widget To Blogger Blog
  • 9 Places To Waste Your Money And Love It!!
  • Download Blogging Prince Blogger Template V1
  • Blogger About Me Widget With Social Media Icons
  • How To Shorten Long URL With Google URL Shortener
  • 8 Comments - Post Yours! How to? ▼

    1. nice tutorial here but i cant find this code in my template ]]> so that i can edit my titles

    2. If you can not find the ]]> on your template, then simply paste the code above the tag. follow below instructions

      step 1: search for using CTRL + f

      step 2: paste the below code just above

      < style>

      paste your CSS here

      replace "paste your css here" with your CSS code.

      step 3: click save.

      Hope it works

      Note: there is no space in the head and style

    3. nice post, Now to hide the attribution widget, simply insert the mobile="no" , to make it show on mobile, insert the mobile="no"

      Read Also: How To Edit And Customize Blogger Mobile Templates

    4. Nice one Benson but when you do that.. the widget will not show but will still load which will affect loading speed.

      It's better to use conditional tags.

    5. Anonymous says:

      Thanks for sharing this valuable information..

    6. Welcome. Glad it helped!.

    7. Hey! The mobile version of my site shows 5 posts by default on the main page. Is there a way to customize how many and/or which posts are shown there? I can't for the life of me find one. Thanks!

    8. i tried but changes are not shown.

    Leave a Reply

    0 Shares
    Share
    +1
    Tweet
    Pin
    Share
    Stumble