How To Create a Customized Mobile Friendly Website For Blogger Blogspot

Socialize It →

Tweet

38

Advertisements

Blogger BlogSpot blogs are becoming extremely old-fashioned in terms of designing and optimizing although Blogger does allow you to enhance freely in your main website template, but it doesn’t have that many features in their Mobile Templates. These days everyone prefers to use Smartphones, so it’s getting extremely essential to optimize your website for mobile users. If the ratio of your mobile users is superior to your desktop users, then you have to develop a Mobile responsive template for your Blogger Blog this will not only increase your reliability, but your main mobile audience could take breath effortlessly with your Friendly mobile template. Do you still think it is impossible to optimize Blogger BlogSpot Blogs for Mobile users? Then all these clutching questions would be answered when we will create a Customized Mobile template for our Blogger BlogSpot Blogs.

Analyzing OLD Blogger Mobile Theme Functions:

Before we get on with our tutorial let us look at our existing Mobile template for our Blogger Blog, in the subsequent screenshot, you can easily determine that the excellence is not up to the mark and the designing is not according to the expectation. Moreover, it looks dull and lacks the inspiration which is extremely crucial to engage mobile visitors. Blogger has 7 built in mobile templates but unluckily they are identical to each other, which make it quite useless.

How to Build a Customized Responsive Mobile Website on BlogSpot Blog:

This whole tutorial is extremely straightforward, and would hardly take 20 minutes to design a perfect mobile responsive template for your BlogSpot blog. Moreover, you don’t need to learn HTML, CSS or JavaScript coding to design a Mobile-friendly template for your blog because we can handle each and everything with the help of a platform called GOMO an initiative of Google.

GoMo by Google Get Ready To GO MO:

GoMo and DudaMobile have come together to make your desktop blog more powerful and mobile-friendly. Do you know almost 70% mobile users abandon a mobile site only because of its designing and less responsiveness? Do you own a blog and want to create a friendly mobile responsive theme then you have come to the right place to get started.

Step#1 Getting Started:

First go to a website http://www.howtogomo.com now once it gets load scroll down and you will be able to see a picture which says “CREATE YOUR MOBILE SITE NOW” just select it and move to the next step.

Step#2 Claim your Website:

Then you have to enter your website/blog URL so system can easily detect the data which is currently hosted at your blog. After entering your complete URL along with http:// press the green button which says “MAKE MY SITE MOBILE”.

Step#3 Selecting the Type of your Site:

Now the system will automatically detect whether you are running a website or a Blog, though you can change it anytime you like. Go ahead, and according to your interest select either Blog Templates, or Website templates (We personally think you should select Blog Templates because it gives you wide range of mobile responsive themes for your blog). 

Step#4 Choosing a Flawless Mobile Theme:

If you have chosen Blog Templates as your mobile theme category then you will witness an enormous list of themes, now you can select any theme that has the potentials to amuse your mobile readers. Additionally, with the help of interactive preview you can apply a theme and can examine how it will appear to your mobile users.  

To select a theme for your mobile-friendly website just double click on any template and it will be applied to your interactive live preview. The interactive preview allows you to test your mobile theme directly from your desktop. You can navigate through different pages and can test out each and every feature from top to bottom.

Now after testing out your theme on live preview it’s time to customize the color scheme of your mobile theme, so it looks identical to your Desktop version website Press next and move ahead. 

Step#5: Customizing and Stylizing Your Mobile-Friendly Theme:

Now you will be to witness an entire new interface from where you can customize your theme from header to footer without any hesitancy whatsoever. Just Press the “Full” tab present at the top and you will be able to see a list of thing which you can do with your mobile theme i.e. Edit Header & Logo, Edit Blog Homepage, Edit Blog Posts Style, Edit Blog Comment Style, Edit Footer and Much more.

 

• Edit Header & Logo: When you will select “Header & Logo” tool a new widow will pop out from where you can customize your header or logo. You can either use Image Logo or can use Text based logo according to your needs.

• Blog Homepage: If you want to change your background color or you want your customized background image then you can use this tool and can make your mobile theme more powerful in designing.

• Blog Post: Using this tool you can change font size, background color, the color of your main post heading and much more.

• Blog Comments: If you don’t have an interactive commenting system your visitors will never leave a comment so this tool will allow you to customize your comment style. You can change color, add avatar and much more.

• Footer: As we all know Footer is the place where we give credits to the developer of the website so you can use it for that purpose. However, you can also use it to increase your width and height and much more.

Now After customizing your theme according to your needs go ahead and press Next button and you are almost done!

Step#6: Register Your Free Account:

Now enter your email address along with your password to register your Free account and Press Save My Site button to move to the next step.

Step#7: Redirecting Your OLD Mobile Site To New Mobile Friendly Site:

Now you will be provided with the link where you can preview your mobile site with different mobile operating system i.e. Android, iPhone, Windows Mobile and Blackberry. Now Scroll down and you will see a button which says “SETUP MY MOBILE WEBSITE REDIRECT” just press it and move to the next step.

• Then Go to Blogger.com >> Template >> Edit HTML >> Proceed
• Now Search For <head> and just below it paste the code which you copied earlier and then save your Template.

That’s it your Customized mobile template is implemented to your Blogger BlogSpot blog. Now Go and enjoy playing with your mobile website on your Smartphones. 

Now if you want to edit your Mobile Theme you can customize or do any changes any time you like by signing into your account at http://gomo.dudamobile.com

From the Editors Desk:

By implementing same method, you can also create a Mobile Friendly Website for your WordPress blog. By applying this tutorial, your Mobile visitors will surly take a breather because they now they can enjoy splendid mobilized website. Give your suggestions till then peace, blessings and happy mobilizing. 

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).