Blogspot offers us lot of mobile versions for each default template they have in stock and also leave us with two other options – Default and Custom. First we will need to understand the difference between all the mobile templates blogger offer and which one to choose.
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 blogger template. It lets you add gadgets, and anything you want to add but default templates only allows the – About me box, 2 Adsense Banners, Share button and the comment box.
No related posts, popular posts, no external banners. So you see the default templates are boring and as a pro blogger we are switching to the custom template which allows you add anything at all – Related Posts. Popular Posts, External Advert and any other thing you wish to add. You can also design the image thumbnails, titles, headings… Just name it!.
Table of Contents
How To Enable Custom Mobile View.
First step of our today’s tutorial will be enabling the custom blogger mobile template. Following the OgbongeBlog by Jide, i noticed him using the custom template. This enabled him to add a few advert banners, Facebook comment box, Newsletter box and every other widget on his blog.
If the second code above is seen, simple 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.
Hit: 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 like the popular post, recent post, Facebook comments, advert banners to show on 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 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.
Now lets check out how to find the ID of each widget on our blog, through the layout section.
Visit the layout tab >> Clink on Edit in any widget you want to find it’s ID eg. Subscription Box.
Just inside the pop up box, check out for the link above the widget settings.
Move till you get to the last part of the Widget URL. At the end, you will find something like this (For Popular Post = Popularpost1, for HTML widget = HTML and a dedicated number). Check photo below.
Simply copy the code at the end part as shown in the image above and paste it inside a notepad. That is the ID of the widget.
Add 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 show in mobile template.
Visit the Template section >> Clink on Edit HTML >> Clink on Jump to Widgets >> Select any widget ID you want to show on mobile view.
Locate the ID among others widgets.
Just after locked=’false’ in the single line of code, paste the code below.
Final code should look like this <b:widget id=’HTML4′ locked=’false’ Mobile=’yes’ title=” type=’HTML’ visible=’true’>.
Step 3 – Customization
Replace ‘yes’ with ‘no’ if you want to show widget only in desktop view.
Replace ‘yes’ with ‘only’ if you want to show widget only in mobile view.
Leave it as ‘yes’ if you want to show 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 clink on save and view your blog.
Edit Blogger Mobile Title
The title of the default mobile version, is not very nice because it doesn’t full up the page. This effect is mostly seen when you are viewing your blog on a tablet.
Note: Jide of Ogbonge blog and linda Ikeji are not using this code because this is the very first time, such a tutorial is being posted.
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 deference. You can also change the mobile post title color, font using the below code.
Replace 22px with your desired font-sze
Replace Calibri with your desired font eg Arial
Replace #444 with your desired color
Make Blogger Thumbnail Large
If you have visited any blogspot blog using mobile version, then you must have noticed the small thumbnail image shown at the homepage and achieve pages. So this step is optional and is suppose to be another tutorial on it’s 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 with a mobile or tablet.
Show Related Post And Subscription Box In Blogger Custom Template.
Related post being a very important part of the blog, it is always advised to place on at the footer showing at least 3 recommended posts. We earlier added one to the desktop view and we will be add same list style to the mobile view.
The reason for choosing the list style over the one with thumbnails (images) is because, the mobile phones are not as powerful as the desktop so it advised to limit the usage of images to prevent low loading spend.
Log in to blogger.com >> visit the template section >> backup your template >> clink on edit HTML
Using CTRL+F search for the first <div class=’post-footer’>.
Just below the first <div class=’post-footer’> paste the below code.
Show Adsense And Other Affiliates Inside Post In Blogger.
Showing adsense and other affiliate banners and link in our 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.
Code: Ogbonge Blog
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!