BlogHelp.ZapWalla.in

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHUUobTvGdm74Gs1IhD7uh-tH6gDpdfIg5ARzTO51A6ikIXoXkLxDCy3uNmq8cINgyt6NiTjB-LdMW_oBCIYPyOqr14KH4UonzIM3AyG11IefSz8FV5Vgsu7IojakRKKNJ9lRq3gug7KM/s1600/how-does-my-blog-look-on-smartphone-tablet-mobile-device.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWHUUobTvGdm74Gs1IhD7uh-tH6gDpdfIg5ARzTO51A6ikIXoXkLxDCy3uNmq8cINgyt6NiTjB-LdMW_oBCIYPyOqr14KH4UonzIM3AyG11IefSz8FV5Vgsu7IojakRKKNJ9lRq3gug7KM/s320/how-does-my-blog-look-on-smartphone-tablet-mobile-device.png" width="245" /></a></div>
<div style="text-align: center;">
<b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">This article explains why mobile mattes for some blogs (but not all), what tools Blogger has provided to help with this, and how to set up a mobile template for your blog.  It also links to Google's mobile testing tool, which shows you how your blog looks on a mobile device.</b><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"><br /></b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"></span></div>
<div style="background-color: white; clear: both; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px;">
</div>
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_EAbVYFlCvtFq8bToPZhrL_vcJ6KsvuByOBdzvF7o8S0GdVT-rZSO7mT7LNgwOQKwRyRCRcqILCBz0Ab7o0GP1PadqRD2K30JOhbRskCM6HM68UFdz3WoPrBl3gr9lOqbQ3IuzMR-PYMz/s512/how-does-my-blog-look-on-smartphone-tablet-mobile-device.png" imageanchor="1" style="clear: right; color: #1850da; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img alt="" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_EAbVYFlCvtFq8bToPZhrL_vcJ6KsvuByOBdzvF7o8S0GdVT-rZSO7mT7LNgwOQKwRyRCRcqILCBz0Ab7o0GP1PadqRD2K30JOhbRskCM6HM68UFdz3WoPrBl3gr9lOqbQ3IuzMR-PYMz/s512/how-does-my-blog-look-on-smartphone-tablet-mobile-device.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; max-width: 98%; padding: 5px; position: relative;" title="How to enable a mobile template in Blogger" width="245px" /></a></div>
<div style="text-align: center;">
<a href="https://www.blogger.com/null" name="more" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"></a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">By default, when someone uses a smartphone, tablet or other mobile device to look at your blog, they see the "full site" just like they would if they were using a PC.   The pages aren't set up to work well on their small screen, but they have access to all the features and gadgets you've installed.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">In some cases, this is fine.  For example, when I first wrote this article, I looked at the</span><a href="http://blogger-hints-and-tips.blogspot.com/2012/01/its-annual-performance-review-time-how.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start; text-decoration: none;">statistics for this site</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> and hardly any of the visitors were mobile.   However now, a couple of years later things have changed and I've implemented a mobile template, even here.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">But for other blogs, especially ones that have</span><a href="http://blogger-hints-and-tips.blogspot.com/2010/09/showing-google-custom-map-on-your-blog.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start; text-decoration: none;">maps</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> and other location-information or which people read on the go, having a mobile-friendly template is very important:   for example, on my public-transport blog, over 25% of visitors are using mobile, and that figure is growing.  Making my site work well for these visitors is definitely important for its long-term future (and my short term </span><a href="http://blogger-hints-and-tips.blogspot.com/2010/02/advertising-programmes.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start; text-decoration: none;">advertising revenue</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">!)</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<h2 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; font-stretch: normal; margin: 0px 0px 1em; position: relative;">
What's available</h2>
<div style="text-align: center;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Blogger have made a set of mobile templates, to match the standard </span><a href="http://blogger-hints-and-tips.blogspot.com/2010/03/types-of-blogger-template.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start; text-decoration: none;">Designer Templates</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">, and so far only one to match the Dynamic template.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">We cannot control the layout of gadgets on these - when the screen is only 300-ish pixels wide, there's not much room to move. </span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">But we can </span><a href="http://blogger-hints-and-tips.blogspot.com/2012/05/add-gadget-to-mobile-template-for-your.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start; text-decoration: none;">add and remove gadgets</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">, and also by choosing a custom template get colour settings that match our main blog.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<h2 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; font-stretch: normal; margin: 0px 0px 1em; position: relative;">
How to enable a mobile template for your blog</h2>
<div style="text-align: center;">
<b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"><br /></b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"></span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Log in</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> to Blogger using an account with </span><a href="http://blogger-hints-and-tips.blogspot.com/2011/12/setting-up-new-administrator-for-your.html" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start; text-decoration: none;">administrator rights</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> to the blog.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Go to the </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Template</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> tab.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">If your blog has a Designer or Dynamic template, then there will be a </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Mobile option</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">to the right of the "Live on Blog" area.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65w54JT_i1VwbakGZuTlokQEzb6-J57V73Rb7wX-isAtAouwg22oqsDZ0Td4pdFPq2AKHgmatT2mCcy8AGFt9jJXTzS6zOdRJ6y1BNTLBZNX7-0kFCc4U6oD9L08d1fEnVR6T1i5aRffv/s597/select-template-blogger-dynamic-designer-mobile.png" imageanchor="1" style="color: #1850da; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg65w54JT_i1VwbakGZuTlokQEzb6-J57V73Rb7wX-isAtAouwg22oqsDZ0Td4pdFPq2AKHgmatT2mCcy8AGFt9jJXTzS6zOdRJ6y1BNTLBZNX7-0kFCc4U6oD9L08d1fEnVR6T1i5aRffv/s400/select-template-blogger-dynamic-designer-mobile.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; max-width: 98%; padding: 5px; position: relative;" width="80%" /></a></div>
<div style="text-align: center;">
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">If the blog is not set up to use a mobile template,then the word </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Disabled</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> will be in the middle of the picture area - although it may be hard to read if your base template (chosen in the Live on Blog area) has a picture behind it.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Click on the </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">gear-wheel</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> underneath the picture to see the mobile options.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Select "</span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Yes.  Show mobile template on mobile devices.</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">"</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJMLuWiAuO78S_Ksn1MwLhCTFlfX9_qCovqOWd5jmxyB_h3HwVEY4siloRc4doUmDCuCfZ1cODcaWycCszARiPC4E1pJqe6LtUURRiJWN36htfWrwYmp4uXmwvXd932iZ5gQV0Odk9en_/s392/blogger-choose-mobile-template-not-desktop.png" imageanchor="1" style="color: #1850da; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmJMLuWiAuO78S_Ksn1MwLhCTFlfX9_qCovqOWd5jmxyB_h3HwVEY4siloRc4doUmDCuCfZ1cODcaWycCszARiPC4E1pJqe6LtUURRiJWN36htfWrwYmp4uXmwvXd932iZ5gQV0Odk9en_/s400/blogger-choose-mobile-template-not-desktop.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; max-width: 98%; padding: 5px; position: relative;" width="80%" /></a></div>
<div style="text-align: center;">
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Either leave the mobile template on </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Default</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">, or </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">select one of the other options</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">.</span></div>
<ul style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">If you choose Default, your mobile template will use the standard template matching your desktop template.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">If you choose Custom, your mobile template will use the colour-scheme and various features from your desktop template, and you will be able to makes changes to these settings.</li>
</ul>
<div style="text-align: center;">
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Use the </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Preview</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> button if you want to see what your blog will look like with the selected template on a mobile device.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">When you are happy with your selection, press </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Save</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<h2 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; font-stretch: normal; margin: 0px 0px 1em; position: relative;">
What your readers see</h2>
<div style="text-align: center;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Visitors to your blog who are using a desktop PC (or laptop or netbook or any other machine with a full-size screen) won't see anything different.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpA1ang_-J94n7Jz_XxhieKKMwSZMC8YDoePxwOuVS8dgCFgROTT3zGlbqOed9JZ8xfOSejZBPhN5oQE7w-1cTkmz8KvUfqliIf8WEeWNVTXuk8jYdnr9SSapyWT5V0xb_qcmwf0aWPl4m/s285/preview-mobile-template-blogger-designer.png" imageanchor="1" style="clear: right; color: #1850da; float: right; margin-bottom: 1em; margin-left: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpA1ang_-J94n7Jz_XxhieKKMwSZMC8YDoePxwOuVS8dgCFgROTT3zGlbqOed9JZ8xfOSejZBPhN5oQE7w-1cTkmz8KvUfqliIf8WEeWNVTXuk8jYdnr9SSapyWT5V0xb_qcmwf0aWPl4m/s285/preview-mobile-template-blogger-designer.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; max-width: 98%; padding: 5px; position: relative;" /></a></div>
<div style="text-align: center;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Readers who are using an internet-enabled cellphone (ie smartphone), tablet, iPad, etc will see a different view:</span></div>
<ul style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">They won't have a <b>sidebar</b></li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">The <b>gadgets will be limited</b> (unless you add some extra ones) and in the header and footer only</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">On the <b>home-page</b> there will just be the title, thumbnail and snippet for each post, and a button for read-more (this is irrespective of where you've put the jump-break) - notice that <a href="http://blogger-hints-and-tips.blogspot.com/2012/11/blogger-home-page-vs-mobile-template-setup.html" style="color: #1850da; text-decoration: none;">the usual methods of giving your blog a home-page don't always work</a>.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;"><b>Custom styles</b> that you have added to the template may not be applied (this has happened on one blog where I use styles, I'm still investigating whether it's a feature of all mobile templates, or just due to the way I added these particular styles).</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">There will be buttons at the <b>bottom</b> of the page for <b>Home, <   and > </b>.    I think that the latter two refer to older and newer posts (though possible they are the opposite way around from what I expect).</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">There will be a link to "<b>view web version</b>", which lets your visitor switch to to see the blog using the desktop template.</li>
</ul>
<div style="text-align: center;">
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">I have a  feeling that there may be some other differences too - very keen to hear about </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">any others</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"> you've spotted.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<h2 style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 22px; font-stretch: normal; margin: 0px 0px 1em; position: relative;">
Seeing what your mobile readers see</h2>
<div style="text-align: center;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">The absolute best way that I've found to accurately experience my blogs as mobile visitors see them is to use a mobile device myself:</span></div>
<ul style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; margin: 0.5em 0px; padding: 0px 2.5em;">
<li style="margin: 0px 0px 0.25em; padding: 0px;">Just like preview mode in the Post-editor, the <b>mobile-template preview mode</b> shows a "look and feel" view, which is not entirely accurate.   For example in the picture above, it shows part of the most-recent article insteaod of just the post title and mini-snippet that I see when I look at the site on my phone.</li>
<li style="margin: 0px 0px 0.25em; padding: 0px;">The <b>screen-size testers</b> that I've tried out (ie software tools that mimic showing your website in various different screen sizes) don't actually use the mobile template - I suspect that this is due to the way that Blogger detects mobile devices.</li>
</ul>
<div style="text-align: center;">
<br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">However you can see any blog as it would be on a mobile device by appending </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">/?m=1 to the end of the URL</b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">.    For example, to see this blog in mobile, I would look at </span><a href="http://blogger-hints-and-tips.blogspot.com/?m=1" style="background-color: white; color: #1850da; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start; text-decoration: none;">http://blogger-hints-and-tips.blogspot.com/?m=1</a><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">      If you're going to use this approach, it's best to re-size your browser window so that it's about 300px wide - from my netbook, that's about 1/3 of the screen size, but it would be less from machiens with bigger screens.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">Another approach is to use </span><b style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;"><a href="https://www.google.com/webmasters/tools/mobile-friendly/" style="color: #1850da; text-decoration: none;" target="_blank">Google's Mobile Friendly Testing tool</a>, </b><span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">which will</span></div>
<blockquote class="tr_bq" style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px;">
<i>... analyze a URL and report if the page has a mobile-friendly design.</i></blockquote>
<div style="text-align: center;">
<span style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;">As well as showing you how your blog looks, it also reports on any issues that have been found.</span><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /><br style="background-color: white; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: start;" /></div>
<div class="separator" style="background-color: white; clear: both; font-family: Arial, Tahoma, Helvetica, FreeSans, sans-serif; font-size: 15.3999996185303px; line-height: 23.9555549621582px; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Ly1MC2EY89OjTvf1vcmPYqxC8Go9uio0GDHVvsmnjjmXcFijxSWQouqMsLwk5mkaczIUN4JE0o6XigidlwACc0js5DyLy03egW7xiiWh0a1W0HJDkIhyXUvCxvmdOxAnFIF28eUKvzae/s799/test-how-your-blogger-blog-looks-on-mobile-screen-google-testing-tool.png" imageanchor="1" style="color: #1850da; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_Ly1MC2EY89OjTvf1vcmPYqxC8Go9uio0GDHVvsmnjjmXcFijxSWQouqMsLwk5mkaczIUN4JE0o6XigidlwACc0js5DyLy03egW7xiiWh0a1W0HJDkIhyXUvCxvmdOxAnFIF28eUKvzae/s799/test-how-your-blogger-blog-looks-on-mobile-screen-google-testing-tool.png" style="-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; background-attachment: initial; background-clip: initial; background-image: initial; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; border: 1px solid rgb(238, 238, 238); box-shadow: rgba(0, 0, 0, 0.0980392) 1px 1px 5px; max-width: 98%; padding: 5px; position: relative;" width="80%" /></a></div>
</div>

How to turn on a mobile template for blogs in Blogger

This article explains why mobile mattes for some blogs (but not all), what tools Blogger has provided to help with this, and how to set ...

How to turn on a mobile template for blogs in Blogger

Contact Form