How to Create a Mobile Friendly Version of Your Blogger blog?

<div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;"> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy8xSNj7znzUTQ3Z-i_UAHmDX1Xqi8k8ne3QnCzpi7cREMqkYrjdTVRKQXCuvA5afGqsEhn8WWkgA4Xi3kC8hr2yWAqC8yxG1_hrfcF1iT4s_SOXZmpc9phcj4mp37sTe8dp4jupXe3Hs/s1600/How+to+Create+a+Mobile+Friendly+Version+of+Your+Blogger+blog.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img alt="How to Create a Mobile Friendly Version of Your Blogger blog?" border="0" height="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy8xSNj7znzUTQ3Z-i_UAHmDX1Xqi8k8ne3QnCzpi7cREMqkYrjdTVRKQXCuvA5afGqsEhn8WWkgA4Xi3kC8hr2yWAqC8yxG1_hrfcF1iT4s_SOXZmpc9phcj4mp37sTe8dp4jupXe3Hs/s640/How+to+Create+a+Mobile+Friendly+Version+of+Your+Blogger+blog.jpg" title="How to Create a Mobile Friendly Version of Your Blogger blog?" width="640" /></a></div> <div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> We recently shared some tools for testing your website/blog on different mobile devices online. Now after checking your site/blog, you might be interested to create a user-friendly mobile version of your blog with very less efforts. A recent Google report says, Mobile searches have increased  up to 400% in 2011 and it will increase more in coming years. Google has declared 2013 as a turning point for mobile devices. Also, Google says, mobile users will dominate the desktop users onwards from 2015. So these figures show, how important mobile users are for webmasters or bloggers. Therefore, Today I would like to tell you about creating a user friendly and customized copy of your blogger blog for mobiles. Mobile users usually browse the internet with Apple, Windows Live Phones, BlackBerry, Nokia and IPADs etc. So we will create a blog that will be easily accessible on mobile devices and will also be more beautiful than normal one. The steps are straightforward.<br /> <span id="more-59"></span></div> <h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;"> What are the Benefits of Mobile friendly blog?</h3> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;"> The benefits of a Mobile friendly blog are more then your expectations. The first benefit is that you will present your content with an appropriate & suitable design to the mobile users. Mobile users will smoothly browse your content. Also you can make your blog more stunning by making few changes. And the last and most important benefit is <b>"You can insert Google Adsense ads inside your mobile blog"</b>. Usually, Adsense ads are not displayed on mobile devices, but using this tool, you can easily add Adsense ads to your Mobile site.</div> <h3 style="background: rgb(17, 17, 17) !important; border: 2px dashed rgb(52, 158, 203); color: rgb(52, 158, 203) !important; font-family: 'Yanone Kaffeesatz', sans-serif !important; font-size: 27px; font-weight: normal; line-height: 1.25; margin: 20px 0px 10px; padding: 5px 10px; text-shadow: rgb(0, 0, 0) 1px 2px 9px; word-spacing: 5px;"> How to Create a Mobile version of my blog?</h3> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> This tutorial will be straightforward and it shouldn't take more than 20 minutes to create a mobile friendly version of blogger blogs. Just follow the steps below:</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <ol style="margin: 0px; padding: 0px 0px 20px;"> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Go to: <a href="http://www.dudamobile.com/" rel="nofollow" style="color: #349ecb; text-decoration: none;" target="_blank">www.dudamobile.com</a></li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Scroll down and click where it says: <b>Create Your Mobile Site Now</b></li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">A screen like below picture will appear, just enter your site/blog address there</li> </ol> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-pzyumfFeQzt5PWiilg-xFIi17beor9p_y5KKacdIvQ6LgcCxRRYi3Gutl96PXHqDMKPBeOk9Q9JPEo3MD-3CAJUfh828-34Hr3BtkVEi1eULS_JulyPTvqLH6yM-6n3JsSNMLNJtqA/s1600/mobile-friendly-blog.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="215" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP-pzyumfFeQzt5PWiilg-xFIi17beor9p_y5KKacdIvQ6LgcCxRRYi3Gutl96PXHqDMKPBeOk9Q9JPEo3MD-3CAJUfh828-34Hr3BtkVEi1eULS_JulyPTvqLH6yM-6n3JsSNMLNJtqA/s400/mobile-friendly-blog.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div> <div> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div style="text-align: justify;"> Now just the click the button "<b>Make My Site Mobile</b>", A new window like below picture will open, where the website will be detected. There will be some beautiful templates for mobiles and also you can further customize your blog easily. If your blog is hosted on blogger, it will show you a message saying; We've identified your site as a blog. So you will click the "<b>Yes, Keep the Blog</b>" link. See below picture.<br /> <div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> </div> <div class="separator" style="clear: both; text-align: center;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVm8F6KkLMWntGG-wOZl9kFGY-gX51ccaM9B3RgEL4bxZPzyhNYJ_4V-KudX_G-jvT9kqkzeG2UzYP5eektYH6P7_40SfssPqbQt8uadVQgSAZW1PFcpsVl7LGANEGLGLZrd9eVUuAi4/s1600/mobile-friendly-blog1.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="187" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDVm8F6KkLMWntGG-wOZl9kFGY-gX51ccaM9B3RgEL4bxZPzyhNYJ_4V-KudX_G-jvT9kqkzeG2UzYP5eektYH6P7_40SfssPqbQt8uadVQgSAZW1PFcpsVl7LGANEGLGLZrd9eVUuAi4/s400/mobile-friendly-blog1.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div> </div> </div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;"> </div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;"> Now you can select any template from the gallery, you should select a good one for your blog. Just click the template you like and it will automatically change in that mobile at left side. After selecting a desired template just click the next button in blue color. the next screen will be like below image:</div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSFxahTjgyeErPCyqXIcyk3yIsN-CFXHO8CIIfZ0EDwiVW8hYUnxRsyPXcRXto8TPvH_caW1oV8IsnJ-r-5FIVcZHZ2eXJ0TkVUOyadJ8oW8XDpc7VEwk3AHNOduWDpUsfkF9jEYmSJI/s1600/mobile-friendly-blog2.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="192" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzSFxahTjgyeErPCyqXIcyk3yIsN-CFXHO8CIIfZ0EDwiVW8hYUnxRsyPXcRXto8TPvH_caW1oV8IsnJ-r-5FIVcZHZ2eXJ0TkVUOyadJ8oW8XDpc7VEwk3AHNOduWDpUsfkF9jEYmSJI/s400/mobile-friendly-blog2.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;"> </div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> From here you can customize your blog's design all together.</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <ul style="margin: 0px; padding: 0px 0px 20px;"> <li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;"><b>The # 1 option:</b> is for changing the Header and Logo for your blog's mobile version.</li> <li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;"><b>The # 2 Option:</b> is for changing your blog's home page, I mean, home page color on mobiles, home page text, home page background etc.</li> <li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;"><b>The # 3 Option:</b> is for changing the blog posts, the blog posts means, when a single post is being viewed, so you can change its colors, background, fonts, sizes etc very easily.</li> <li style="background-attachment: initial; background-clip: initial; background-image: url(http://www.bestbloggercafe.com/wp-content/themes/focus/images/brown/icon-right.png); background-origin: initial; background-position: 2px 7px; background-repeat: no-repeat; background-size: initial; list-style-type: none; margin: 0px 0px 5px 20px; padding: 0px 0px 0px 20px;"><b>The # 4 Option:</b> is for changing comments' setting. You can change the background for the comments area, or the comments authors' names etc.</li> </ul> <div> Also, if you notice these are just the basic options, if you observe above these 4 options there are two links one says "<b>Basic</b>" and the another says "<b>Full</b>". If you click Full link then you will see a lot of more features for your mobile blog to customize. You can insert Google Adsense ads to your blog's mobile version by using a feature from the full list. See the picture below where the Adsense ads option is also there.<br /> <div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXNBoagC7afqBPBDtyChTwnI88lgecZ5Lyc2SXdqGekZ_qhwjFbeoQksVDcbb5RJ1Uqmi8XCC8n_JwyREozhE0zFeAzI42YWi_XMIkBZWVDOXpesd-3fzEYp8TeM-mv_rvkGlFKEir5U/s1600/mobile-friendly-blog3.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCXNBoagC7afqBPBDtyChTwnI88lgecZ5Lyc2SXdqGekZ_qhwjFbeoQksVDcbb5RJ1Uqmi8XCC8n_JwyREozhE0zFeAzI42YWi_XMIkBZWVDOXpesd-3fzEYp8TeM-mv_rvkGlFKEir5U/s400/mobile-friendly-blog3.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div> </div> </div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;"> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> In above picture I've clicked the full button, so you can see all features which can be further customized. So if you want to insert Adsense ads inside your blog's mobile version then simply click that option. You will see just two available ad unit sizes there, the one is 300*250 and 468*90. So you can add up to two ad units inside your mobile blog's design. By doing so, you will earn more money through adsense.</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> After customizing your blog and adding each and everything, just click the next button and you will see a screen like below picture:<br /> <div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiShXVc61K0gFp_VGF3c3niqB-emWy4tYtBXe8KUL91BVHToRI76Es41UOZEA5NCOLRnPII0WkAAt2_q1Q9W8LzTeVFTLJ-oKi3tcQ1fUeDC1AQOpM5Pugr97VK6YHJOkcH7gye5o7Tq24/s1600/mobile-friendly-blog4.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="218" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiShXVc61K0gFp_VGF3c3niqB-emWy4tYtBXe8KUL91BVHToRI76Es41UOZEA5NCOLRnPII0WkAAt2_q1Q9W8LzTeVFTLJ-oKi3tcQ1fUeDC1AQOpM5Pugr97VK6YHJOkcH7gye5o7Tq24/s400/mobile-friendly-blog4.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div> </div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;"> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> Now here it says save your site, so just create an account by entering your email and password and your account will be created. Just click the next button. Now you will see the final screen like below image:<br /> <div style="line-height: 1.5625; margin-bottom: 14px; padding: 0px;"> </div> <div class="separator" style="clear: both; text-align: center;"> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr3MR6OQgEhZC3rvveWAu_bXN3oeCg_20xbn5Hcu4WWTLfIbE5ZzkJljPRyhxJE1qTqTY0nqHTSxOEPXzKrXWH0tHpVVHNJKoIAzVP3cVWsFRZKXEAdVAfUGFuC3M8YGAGuCFtisY903s/s1600/mobile-friendly-blog5.jpg" style="color: #349ecb; margin-left: 1em; margin-right: 1em; text-decoration: none;"><img alt="" border="0" height="248" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhr3MR6OQgEhZC3rvveWAu_bXN3oeCg_20xbn5Hcu4WWTLfIbE5ZzkJljPRyhxJE1qTqTY0nqHTSxOEPXzKrXWH0tHpVVHNJKoIAzVP3cVWsFRZKXEAdVAfUGFuC3M8YGAGuCFtisY903s/s400/mobile-friendly-blog5.jpg" style="border: none; height: auto; max-width: 100%;" width="400" /></a></div> </div> <div class="separator" style="clear: both; color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: center;"> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <b>Congratulation</b>! You've just created a beautiful mobile version of your blog. Just click the <b>"Setup My Mobile Website Redirect"</b> link and you will find a piece of JavaScript code, which you will have to insert inside your blog's template, just copy that code.</div> <h4 style="background-attachment: initial; background-clip: initial; background-image: none; background-origin: initial; background-position: initial; background-repeat: initial; background-size: initial; color: #3c3c3c; font-family: 'Yanone Kaffeesatz', sans-serif; font-size: 30px; font-weight: normal; line-height: 1.25; margin: 0px 0px 10px; padding: 0px;"> How to insert the code into Blogger?</h4> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <ol style="margin: 0px; padding: 0px 0px 20px;"> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">First copy the JavaScript code</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Go to Blogger Dashboard</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Template >> Edit HTML</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Find <b><head></b> tag and just after <b><head></b> paste that code which you copied earlier</li> <li style="list-style-type: decimal; margin: 0px 0px 0px 35px; padding: 0px;">Save Your Template and all done...</li> </ol> <div> <b>Conclusion</b></div> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;"> The JavaScript will redirect the mobile user to the customized version of your blog. Because, the default blogger template for mobile versions is very simple and unattractive. So it will do everything for you. Also, the same tips can be used for creating a mobile friendly WordPress site or any other type of website.</div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px; text-align: justify;"> </div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> <b>Have a Nice Day!</b></div> <div style="color: #333333; font-family: Lora, Georgia, 'Times New Roman', Times; font-size: 16px; line-height: 25px;"> I'll particularly publish a new post soon for creating a mobile friendly copy of your WordPress website. So stay tuned for that and do comment if you have questions.</div>

How to Create a Mobile Friendly Version of Your Blogger blog?

We recently shared some tools for testing your website/blog on different mobile devices online. Now after checking your site/blog, you...

Read more »