Edit Or Customize Blogger Mobile Template 2015 Tutorial

If you want to enable mobile template for your blog, here is a good news, you can now customize your mobile site to your own personal taste using CSS definitions. You will able to decide which widget is to be displayed in mobile site and which one shouldn't. You can also configure a widget to appear on both desktop & mobile site.


mobile blogger html template 2015

How To Customize Mobile Template

The default widget that appears on mobile template are as follow:
  • Header
  • Blog
  • Page List
  • Adsense (If applied)
  • Profile
  • Attribution
Three properties can be use to control how widget operates, and the properties include: mobile="no", mobile="yes", and mobile="only".
  • If you want to hide any default widget, simply use the mobile="no" property to hide the widget in mobile website.
Example: The default widget tag/code for attribution widget is:

<b:widget id='Attribution1' locked='true' title='' type='Attribution'/>

Now to hide the attribution widget, simply insert the mobile="no" property as shown below

<b:widget id='Attribution1' locked='true' mobile='no' title='' type='Attribution'/>

  • If you want to show any non-default widget, simply use the mobile="yes" property.
 Example: The default widget code for the archive widget is:

<b:widget id='BlogArchive1' title='Blog Archive' type='BlogArchive'>

Now use the mobile="yes" property as shown below

<b:widget id='BlogArchive1' title='Blog Archive' mobile='yes' type='BlogArchive'>

  • If you want to show a widget only in mobile site, simply use the mobile="only" property.
Example: Let's try to show the archive widget only in mobile site, using the mobile mobile="only" property as shown below.

<b:widget id='BlogArchive1' title='Blog Archive' mobile='only' type='BlogArchive'>


What Next?

You will need to activate custom template for your mobile template, as it may not show any changes if you are the using any of the default template.
Now go to Template, click on the gear icon below the mobile template and set it as shown in the screenshot below.

 Mobile Template Blogger

It is advisable that you Preview the custom template before you finally click on the Save button.


Customize Mobile Template Using CSS

You can set CSS properties for both mobile and desktop view, but make sure your template is having the following code.

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

If you are so good at CSS, you can style your mobile site to your own perfect taste. You can edit some CSS class like:

.mobile .date-header {
  text-decoration:underline;
}


.mobile .main-header {
  margin: 0;
}


.mobile .content-outer{
text-decoration:none;
}

You can control how a widget behave in mobile site by using css class .mobile
Let us know if you have customize your mobile template and we will be happy to make a visit. You can check this blog on mobile and any recommendations or suggestions concerning the improvement of the mobile template is highly welcome.

Tags: how to edit blogger mobile template 2015, how to customize mobile blogger template in blogger 2015, html, css, j query, mobile, web, theme, complete step by step tutorial 2015

Adding Custom Domain in Blogger Step By Step Tutorial

Adding Custom Domain in Blogger Step By Step Tutorial:

custom,domain,blogger


Before starting tutorial i want to tell you something. About this Post: What is a custom domain ? Custom domain is a domain which you buys from domain name providers some of the domain provider websites are given bellow.
1. Godaddy.com
2. EasyDNS
3. 1and1
4. Yahoo! Small Business
5. No-IP
6. ix web hosting.
Visit these sites search your favorite domain name and Buy it. After buying you domain now next step is to use that domain. For that we need to buy hosting. These websites also provides hosting and they costs for it. If you want to get hosting for and not pay for it then don't worry. Here are a lot of ways to use your domain or get hosting for free. From them (free hosting provider site) Most common is Blogger and WordPress.

NOW STARTING THE TUTORIAL:


Step 1: Log in to your go daddy account and Click on the "DNS Zone File" tab next to Settings and choose "Use Classic DNS Manager".
sign,godaddy


Step 2: Now log in to your blogger account.


Step 3: Go to Settings and choose basic.
basic,blogger,domain


Step 4: click on "+ Setup a 3rd party URL for your blog".
thirdparty,domain,blogger



Step 5: Under "Third-party domain settings" next to "http://" type your domain that you just purchased and don't forget to add the "www" prefix to the domain name.



Step 6: Click on view instructions settings and open it in your browser's new tab.
domain,managment,blogger


Step 7: Go back/up to save button and click on it. It will won't be saved. It will show an error that "We have not been able to verify your authority to this domain. Error 32."
error,blogger,domain


Step 8: Under the error, you will see two fields "Name, Label or Host Field" and "Destination, target, or Points To" field. Copy them both rows from these fields.


Step 9: Now, click the "Edit" button to edit your DNS Zone File. Step 10: Now Under the "CNAME (Alias)" menu, click "Quick Add"
quick add godaddy


Step 11: In the Edit box that now appeared there, enter "www" in the first box and " ghs.google.com" in the second.


Step 12: Click "Quick Add" again and enter details from second row of the data we've saved in step 8.
quick add godaddy blogger

Step 13: Now under the "A (Host)" menu, again choose Quick Add.

Step 14: Host will be @ and the "Points to" value should be the one provided by Google IPs, saved in step 11 above. These are the Google IPs that you should get: 216.239.32.21 216.239.34.21 216.239.36.21 216.239.38.21.
verify, domain, godaddy, blogger


Step 15: Now add all 4 of these IPs and delete older. Step 15: Now At the top of the page, click on the "Save Zone File" button to save your setings.
save zone file godady


Step 16: Now go back to Blogger and try to save settings again. The registration process takes 24-48 hours, so don't worry if you get an error again.


Step 17: After your URL starts working, click on the "Edit" link next to domain name on setting page.

Step 18. Check the "Redirect... to..." checkbox below your site address to ensure that even if the visitors will miss out the www part, they will still be able to reach your site.

Step 19: You've successfully saved/added your new domain to blogger. If you're still unable to do this then be patient and try again after 2 days or repeat it again right now.
domain,blogger,godaddy

I think It wasn't difficult to adding your domain to blogger . Hope You've saved your new settings. Blogger is free and easy to use. Stay blessed and keep visiting and loving us. Tags: how to add a custom domain in blogger (.com, .info, .net, .co.in, com.pk, etc), transferring your domain to blogger, use domain in blogger from godaddy.com, add godaddy domain to blogger, step by step instructions, tutorial 2015, tutorial to use a custom domain in Blogger.