2015 January 29 Archive - EXEIdeas – Let's Your Mind Rock

There is some Good news from the Blogger Team on the Blogger Code Blog. If you have enabled the Mobile Templates, you will be able to customize the Blogger Mobile Template by using CSS definitions. You will also be able to control which widgets are to be shown and which shouldn’t. You can also configure the widgets to show an alternate content in the mobile view. Though this looks so promising, I was not able to test all of these features.Enable Mobile Template: How To Open Blog Mobile Template For Blogspot/Blogger?Customize Widget/Gadgets Of Template For Mobile/Desktop: How To Add/Remove Gadget/Widget To Your Mobile Blogspot Template?If I use this tag, the attribution gadget will disappear from my desktop view, and will appear only on the mobile view. This code change will make the attribution widget disappear from your Mobile View.Preparation To Customizing Blogger Template For Mobile:So if you want to enable your different codes on mobile blogger template and different code on your desktop blogger template then first you have to check your section that is this code available there or not… If available then its ok and if not then add it there. Now you can fully customize the looks of your mobile template but to write different CSS for mobile and desktop template, you have to check the element of the mobile template too. Make sure that your template tag is like below… If it is like above then good and if not then make it like that now.Now Add Different Code For Mobile And Different For Desktop:Once you switch to the Custom Mobile Template, you might find that the template is too huge to fit into a Mobile Browser. If you want, then you can provide alternate content inside a widget. For a brief DEMO, just see the below code… Powered By Blogger This will show a Powered by Blogger Text link on the Mobile View, and a Powered by Blogger image on the normal desktop view.The condition can be used to check if the viewer is viewing your blog in a mobile browser or not. You can use this conditional check creatively and give a totally different look to the mobile version of the blog. To know more about Blogger conditional tags, you can view our previous post at How To Display Codes On Your Desired Page/Post In Blogger?.Now Add Different CSS For Mobile And Different CSS For Desktop:Then, you can define different CSS properties for desktop and mobile view./* For Desktop Template */ .your_class_id {color:#FF0000;}/* For Mobile Template */ .mobile .your_class_id {color:#0000FF;}Mean if you want to add different CSS of a same HTML attr in desktop then add CSS to that attr normally but if you want to add different CSS for mobile on that attr then add .mobile just before your CSS attr as shared in above code.Last Words:This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share a whole guide step by step about Google Blogger/Blogspot and make it easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.