How To Create a Customized Mobile Friendly Website For Blogger Blogspot

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

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

Comment With:
OR
Choose Wisely!

40 comments

August 8, 2012 at 1:59 PM

Amazing post.

I will try to add it.

August 8, 2012 at 4:27 PM

I'm also using mobile view option for my wordpress website but it seems it has more customization options for blogspot.

August 8, 2012 at 11:00 PM

Thats Nice..!! Thanks For Explaining Each and Every Step..!! thumbs Up......!!

August 9, 2012 at 5:48 AM

Must say an Execellent post. I am tired of seeing the old blogger mobile template. I will try it ASAP.

August 9, 2012 at 5:53 AM

Informative post out there but I still prefer paying mobstac.com than using dudamobile that doesn't give room for mobile readers to comment at all. More so, my adsense can't show on it when viewed with Opera mini. Sucks**

Mobstac rocks for me, for now**

August 9, 2012 at 5:58 AM

Amazing One -- :)

Editorial Team MOD
August 9, 2012 at 6:13 AM

Brother No one Uses Opera Mini These Days! And Dudamobile is a paid Service. You are Getting All These Features for Free Because This Service is Sponsored By Google. What More you can Expect. Its Totally Awesome. Peace and Blessings

August 9, 2012 at 6:26 AM

Really,i will do it now though i hav mobstac mobile view but does this gomo show adsense on mobile view?
And thats a great post,nice one bro just keep it UUUUUP.
PEACE
http://updatenewsarena.blogspot.com

August 9, 2012 at 6:27 AM

@Jide, the default comment style for mobstac is the fb comment form right? and i dont that can be changed.

August 9, 2012 at 6:30 AM

@Syed, i like your blog comment form, can you write a tutorial on how to replace it with my blog's comment form?

Editorial Team MOD
August 9, 2012 at 6:43 AM

Admed! There is lots of request for this Commenting Design We will soon publish a Tutorial on it Stay Tuned. May be on next weekend you will see the tutorial Live.

Editorial Team MOD
August 9, 2012 at 6:46 AM

Yes it has the capability to show Adsense. Today We Will Write on it How You can Insert Google Adsense in Your Blogger Mobile Website

August 9, 2012 at 9:47 AM

Wow , Great Post . I tried and its working fine. Now my blog Looks Attractive and cool. Thanks for your Post.

SiasTech,
http://siastech.blogspot.com

August 9, 2012 at 10:54 AM

Its Cool Dear :)

August 10, 2012 at 5:08 AM

Very good tutorial.. helped me a lot :)

August 10, 2012 at 1:22 PM

Not too bad. But, blogger custom mobile is more preferable i think. With blogger custom mobile i don't have to throw my visitors to another website.. :)

Take a look also at my post if you'd like. Bloggers Custom Mobile Template

Editorial Team MOD
August 10, 2012 at 2:04 PM

John Ask a Question to your Self! Does Google Custom Mobile Themes Allow you to Place Adsense? Or They Would Give you tons of Apps for your Mobile Website? Moreover you don't have to throw anyone to another website. You can Create a Subdomain like m.mybloggerlab.com and everything would work fine. Peace and Blessings

August 10, 2012 at 5:10 PM

Bro, excuse my bad. Truly i don't wanna say this, but, sure you know that bloggers are now able to modify its mobile view just the way they want, just as they can do with the desktop view. Don't you know that?

And, i just don't know what to answer about adsense, cuz it never granted my request.. And, maybe i'd be realy just thankfull if you'd like to help me get into that adsense.. :)

Editorial Team MOD
August 11, 2012 at 4:01 AM

Dude, if you have noticed this whole service which we have debated here is just because of Google And Blogger. Yes, we know we cannot make our mobile website into a paradise. However, we can make it little better then most of WordPress Mobile Website.

Brother Getting into Adsense is not that much difficult. Just Write quality content don't worry about the quantity. We would love to help just shoot us your detail information at contact.mybloggerlab.com Peace and Blessings

August 11, 2012 at 4:49 AM

thank you syed faizan its realy helpfull , i was searching this for a long time, even tried editing the script but did not work, thank you, eid mubarakh,

Regards:
priyankshah
www.WebDesignInsights.net

August 11, 2012 at 7:47 AM

Well my friend.. My problem with adsense is that it refuses my website for it said my website infringed their guideline, but they never tell me which of their guideline exactly does my Website infringe. They only give a faq page that explains their lots guidelines for clue, how will i find out that way?

Actually i've ever had an adsense account a few times ago, but it got blocked after i put some ads on my website under that account.

Speak english, i'm not a guy that will pay some for an adsense account. That, just tell me if you're creating adsense account for sale. I'll be just fine. However, i may take your offer to contact you if you're not.

By the way, nice to meet you. You're such a nice friend. God bless kind guys.. :)

Editorial Team MOD
August 11, 2012 at 2:18 PM

I Guess we are not here to Sell Fake AdSense Account We are Here to Help you by giving some Tips so you can get your own Genuine Adsense Account.

And as far as Getting an Adsense is Concern you site need to have good reputed content otherwise you will never get an approval. And if you follow the guideline we have mentioned then i am pretty sure that you can easily get one without any problems

Check this Article where we have chatted How we can get a Genuine Adsense account >> http://www.mybloggerlab.com/2012/04/best-method-to-create-genuine-adsense.html Hope your confusion is removed.

Thanks Pal we appreciates you liked our services. Peace and Blessings

August 11, 2012 at 9:09 PM

Mind blowing. Thanks.

August 12, 2012 at 4:03 AM

Great.. I like it. Hope my business with adsense getting done soon. Let's check it out. :)

September 14, 2012 at 8:23 PM

Hi
Plz tell me how to show adsense ads in mobile theme?

September 14, 2012 at 8:24 PM

Hi
Plz tell me how to show adsense ads in mobile theme?

October 23, 2012 at 9:16 AM
This comment has been removed by the author.
December 1, 2012 at 3:12 AM

hey
syed i have made that website but it is not getting live can you please help what wold be the issue.

Rahul
www.guidemumbai.com

Editorial Team MOD
December 1, 2012 at 3:21 AM

What Kind of problem you are facing.

January 11, 2013 at 2:50 AM

Well that’s Nice article! this blog is good. I enjoyed all the way down. Thanks for the post.



mobile website development

January 11, 2013 at 2:50 AM

Well that’s Nice article! this blog is good. I enjoyed all the way down. Thanks for the post.



mobile website development

January 11, 2013 at 2:50 AM
This comment has been removed by the author.
January 23, 2013 at 10:09 PM

I have bookmarked this link as it is very educational, my kids will be following this post too.
web design in karachi

java web applications

responsive themes

March 4, 2013 at 3:27 PM

Adsense had refuse me. But let me check out your guidelines

July 11, 2013 at 1:23 AM

is it site removed ?

September 26, 2013 at 6:03 AM

Hey, The website is not working Help!!

June 20, 2014 at 2:15 AM

why you are not using this on your own blog?

May 27, 2015 at 11:09 AM

Is this free only for one year or lifetime for blogspot

July 18, 2016 at 11:59 PM

Undoubtedly brilliant post. Well I've never tried it before, but I will try once. What if it doesn't work should I take a help of developer?

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.