Customize Blogger Custom Mobile Template

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.

Now You Can: Add Adsense Ads Before, Between And After Posts In Blogger Blog

Default Mobile Version

Before now, my favourite mobile version was the default template. This is because it showed the colors and some of the styles i had on 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 and more related to my desktop view.

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!.

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.

Step 1

Visit blogger.com >> Locate the template section.

Step 2

Clink on the gear icon below the mobile view. Then wait for a pop up to show up.

Step 3

Now tick on the "show mobile version" among the two listed options. 

Step 4

Select Custom in the list of mobile templates.

Step 5 

Finally check out your blog on a mobile phone and if it looks arranged with no widgets displaying wrongly, then clink on save.

Step 6 - Optional

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

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

<meta expr:content='data:blog.isMobile         ? &quot;width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0&quot;         : &quot;width=1100&quot;' name='viewport'/>

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

<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>

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.

Step 1

Visit the layout tab >> Clink on Edit in any widget you want to find it's ID eg. Subscription Box.

Step 2

Just inside the pop up box, check out for the link above the widget settings. 

Step 3

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.

Step 4

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.

Step 1

Locate the ID among others widgets.

Step 2

Just after locked='false' in the single line of code, paste the code below.

Mobile='yes'

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.

Step 4

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>

.mobile-index-title {
    margin-top: .5em;
    margin-bottom: .5em;
    width: 100% !important;
    font-size: 22px !important;
    font-family: Calibri !important;
    color: #444 !important;
}

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

Customization

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.

<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function() {
  // change the dimension variable below to be the pixel size you want
  var dimension = 640;
  // this identifies the Mobile Index Thumbnail div element, finds each image in it, and resizes it
  $('.mobile-index-thumbnail').find('img').each(function(n, image){
    var image = $(image);
    image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
    image.attr('width',dimension);
    image.attr('height',dimension);
  });
});
//]]></script>
<style>
.mobile-index-thumbnail img {
width: 100% !important;
height: 100% !important;
text-align: center;
margin: 0 auto;
padding: 5px;
display: block;
  }
.mobile-index-thumbnail {
float: none;
margin: 0 auto;
padding: 5px;
}
</style>

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.

Step 1

Log in to blogger.com >> visit the template section >> backup your template >> clink on edit HTML

Step 2

Using CTRL+F search for the first <div class='post-footer'>.

Step 3

Just below the first <div class='post-footer'> paste the below code.

<!-- Related Posts without Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts: </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if><b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>
<!-- Related Posts without Thumbnails Code End-->
&lt;form style=&quot;border:1px solid #ccc;padding:3px;text-align:center;&quot; action=&quot;https://feedburner.google.com/fb/a/mailverify&quot; method=&quot;post&quot; target=&quot;popupwindow&quot; onsubmit=&quot;window.open(&#039;https://feedburner.google.com/fb/a/mailverify?uri=obhiabablog&#039;, &#039;popupwindow&#039;, &#039;scrollbars=yes,width=550,height=520&#039;);return true&quot;&gt;&lt;p&gt;Enter your email address:&lt;/p&gt;&lt;p&gt;&lt;input type=&quot;text&quot; style=&quot;width:70%&quot; name=&quot;email&quot;/&gt;&lt;/p&gt;&lt;input type=&quot;hidden&quot; value=&quot;obhiabablog&quot; name=&quot;uri&quot;/&gt;&lt;input type=&quot;hidden&quot; name=&quot;loc&quot; value=&quot;en_US&quot;/&gt;&lt;input type=&quot;submit&quot; value=&quot;Subscribe&quot; /&gt;&lt;p&gt;Delivered by &lt;a href=&quot;https://feedburner.google.com&quot; target=&quot;_blank&quot;&gt;FeedBurner&lt;/a&gt;&lt;/p&gt;&lt;/form&gt;&lt;p&gt;Gadget by &lt;a href=&quot;https://obhiababablog.blogspot.com&quot; target=&quot;_blank&quot;&gt;Obhiaba Blog&lt;/a&gt;&lt;/p&gt;&lt;/form&gt;

 Replace obhiabablog with your feed burner name.

Step 4 - CSS - Optional. 

If you already have this 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.

<!--Related Posts Scripts and Styles Start-->
<style>
#related-posts {
float : left;
width : 300px;
margin-top:20px;
margin-left : 5px;
margin-bottom:20px;
font : 11px Verdana;
margin-bottom:10px;
}
#related-posts .widget {
list-style-type : none;
margin : 5px 0 5px 0;
padding : 0;
}
#related-posts .widget h2, #related-posts h2 {
font-size : 20px;
font-weight : normal;
margin : 5px 7px 0;
padding : 0 0 5px;
}
#related-posts a {
text-decoration : none;
}
#related-posts a:hover {
text-decoration : none;
}
#related-posts ul {
border : medium none;
margin : 10px;
padding : 0;
}
#related-posts ul li {
display : block;
background : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhuNhsJNvN35hxHO6Hnq4deBfVmOp10i6HccRSmW0_s0IW44vqDajz0t2ZmNEO10r8zs6IVx7NWl4_5agzKIlQyjysxozLxKIQ7Vz_ND1LvHf40r-ypafBDmnmsG0Rvs8HBv1pcyWQkw6I/s200/greentickbullet.png) no-repeat 0 0;
margin : 0;
padding-top : 0;
padding-right : 0;
padding-bottom : 1px;
padding-left : 21px;
margin-bottom : 5px;
line-height : 2em;
border-bottom:1px dotted #cccccc;
}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
document.write('<a href="https://obhiabablog.blogspot.com.ng/2016/09/related-posts-subscription-box-share-button-blogger.html" target="_blank" rel="nofollow"><font size="1" color="black">[Get Related Posts Widget for Your Blog]</font></a>');
}
//]]>
</script>
<!--Related Posts Scripts and Styles End-->

Step 5.

Save the template and that's all.

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

Step 1

Log in to blogger.com >> visit the template section >> backup your template >> clink on edit HTML

Step 2

Using CTRL+F search for the second

Step 3

Just below the first <div class='post-footer'>

copy and paste the below code.

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;
 &lt;span style='font-size: 15px;font-weight:bold;'&gt;Share : &lt;/span&gt;
&lt;p align='center'&gt;
&lt;div class='fb-like' data-action='like' data-layout='button_count' data-share='true' data-show-faces='false'/&gt;
&lt;a href="http://twitter.com/share" class="twitter-share-button" data-count-value="horizontal"&gt;Tweet&lt;/a&gt;
&lt;script src='http://platform.twitter.com/widgets.js' type="text/javascript"&gt;&lt;/script&gt;
      &lt;/p&gt;
&lt;/b:if&gt;

Step 5.

Save the template and that's all.

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.

Credits

Images: CarieLoves

Code: Ogbonge Blog

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!