How To Make Mobile Section For Gadgets In Layout In Blogger

As predicted by Google that from now people will read blogs and sites more from phones rather than from desktop that's why everyone should make their mobile site and maintain it to get maximum traffic not from only desktop but also from mobile. It is also good to get mobile traffic because it can increase your earnings from both Adsense and Appnext. Specially mobile traffic is best for Appnext.

Making mobile site is not easy in a platform like blogger because everyone is not able to do it as its not easy to code and also most methods don't work in blogger. So I frequently write about making mobile site for blogger blogs to make it easier for other bloggers to make their own mobile site.

So in this post I am going to teach you how to make sections for mobile gadgets in blogger layout. So follow below steps to make sections for your mobile gadgets.

Step 1: Go to blogger > login to your account and navigate to Theme.

Step 2: Click on Edit Html to begin editing your blog theme to make sections for mobile gadgets.

Step 3: Search for below code by using CTRL+F:

<b:section class='header' id='header'

You will find this code:

<b:section class='header' id='header' maxwidgets='1' name='Header' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Horizontal scroll menu (Header)' type='Header'>....</b:widget>
</b:section>

Step 4: Now just after above code paste below code and save your template.

<b:section id='mobile-section-1'>
</b:section>

Step 5: Go to layout to see your mobile gadget section.

You will find your gadget section below header section in layout but if you want you can make another one in the footer by the above method, all you need to do is to paste below code above </html> in your template.

<b:section id='mobile-footer-section'>
</b:section>

Important Note: Although you can make unlimited sections for your blog's mobile site but you will need to enable each gadget you add in these sections for mobile only. So after adding a gadget in mobile section of your blog go to your template and add mobile='yes' after locked='false' in your gadget code as shown in below image. For details about how to enable a gadget for mobile device only read How To Show A Widget In Mobile View In Blogger

Don't for get to give us feedback about this post, if you have any questions ask me in comments. Share this post with other bloggers. Thanks for visiting 101Helper.

Search Keywords: how to show gadget in blogger mobile site, how to make separate section for mobile gadgets in blogger, how to edit layout in blogger, make header and footer section for mobile site in blogger

How To Hide Ads And Gadgets On Error Pages In Blogger

Before explaining about hiding things on error pages, i am going to tell you why do you need to do so? Its because Ad networks like Good Adsense and Adhitz both prohibit showing ads on pages which are empty or on error pages and reason for not showing gadgets in error pages is that nobody needs them and these gadgets makeerror pages look ugly and error pages also load slowly so visitors are unable to leave page until the page is loaded completely so it's necessary to hide gadgets and ads on error pages.

In this post i will show you how to hide any ad or gadget on error page.

SIMILAR POST: How to hide  or show gadgets in specific pages in blogger ?

Step 1: Go to Blogger Dashboard and open template / theme.

Step 2: Edit Html.

Step 3: Now find the gadget in which you have added your ad code or if you have added your code directly to your template e.g below </head> or above </body>.

Step 4: After finding your ad code gadget or ad code, copy below code.

<b:if cond='data:blog.pageType != &quot;error_page&quot;'>

Step 5: Paste this code above your ad code if you have added code directly to your template and in case of gadget paste the copied code below this line:

<b:includable id='main'>

As shown in below image:

Step 6: Add below piece of code at the end of your code and above </b:includable> in case of gadget as shown in above image.

</b:if>

Step 7: Save your theme / template and you are done.

To check if your code is working fine, open any url of your post and add any wrong characters to it and view it, your gadgets or ads which you have hidden will not show on error pages.

What else can you do with above code?

A special thing about this code is that you can hide unwanted gadgets on error pages and also you can use it reversely by making a small change in it. Then it will start showing content on error pages only like if you want to show an error message or a search box to your visitors who accidentally reach an error page to let them search your site and find what they are looking for. So here is the reverse effect code:

<b:if cond='data:blog.pageType = = &quot;error_page&quot;'>

Also don't forget to close it with the same ending code: </b:if>

Your final code should be like this in both cases:

<b:if cond='data:blog.pageType = = &quot;error_page&quot;'>
My Content / Ad Code
</b:if>

If you have any confusion or problem ask me in comments or contact.

Thanks for visiting 101Helper.

Search Keywords: how to hide gadgets and ads on error pages in blogger,how to hide gadgets in 404 error pages blogger, how to hide google adsense ads in blogger error pages,how to show error message on 404 error pages in blogger,101helper blogger tricks