2016/07/03

How to Make Your Blogger Blog Look Like a Website




Is your Blogger blog too much like a blog?   I'm going to show you how to unblogger your blog.

See my tips below for customising your blog and making it look and act more like a website:

If you've just created a new blog and not sure where to take it or what to include on your blog I'm going to show you some basics widgets and pages your blog will need to start you on your blogging journey.

How to Submit a Sitemap on Google Webmaster Tools

I'm going to show you how to simply add a sitemap to Google Webmaster Tools and show you why it's an important part of blogging.

What is Google Search Console?

It's a free tool offered by Google to help you display your blog in Google's search results.  It will help you improve the crawling rate of your blog.

A sitemap can be an XML or HTML file containing all of the URLs of the pages inside your blog. Visitor's to your blog are helped by an HTML sitemap, the same can be said of an XML sitemap.

When you submit your XML website sitemap to Google Webmasters, Google crawlers will start to index all of your blog posts and pages and add them to their database.

Depending on the size of your website and number of  URLs in your sitemap, the crawling rate will differ.

Now that you understand what a sitemap is lets get started verifying and submitting your sitemap.

Submit Sitemap to Google Search Console
  • Sign into Google Webmaster Account.
  • Select the blog you want to submit the sitemap for.
  • On the left hand side of the page, click on Crawl and then Sitemap.


  • Add this code:
atom.xml?redirect=false&start-index=1&max-results=500

  • Press "Submit Add/Test Sitemap" button.
  • Refresh page.
Note: The above sitemap will work for 500 blog posts only.  If your blog contains more than 500 published posts then you need to add the code below.

atom.xml?redirect=false&start-index=501&max-results=1000

How to Install Google Analytics to Your Blog

If you're just starting your blogging journey and everything is pretty new.  You may have heard about Google Analytics.

It's an important tool to help you keep an eye on the progress of your blog.

If you're using Blogger you will have noticed the stats section on your Blogger dashboard.  it's useful but doesn't give you the in-depth information you can get from Google Analytics.

What is Google Analytics?

Used by thousands of bloggers everywhere, and one of the most popular programs for checking stats.  It has many features that will give you an accurate breakdown of your blog traffic.
  • Sign in or sign up for a Google account for Google Analytics.  If you use Blogger, Gmail or YouTube then you already have one.
  • Log in to your Google Analytics account and you'll see a screen explaining Google Analytics.  Click Sign up.

  • Fill in the form.  Don't worry about the industry category.  This doesn't affect tracking and data collection, it just helps Google to adapt the service to you.

  • Click, get your Tracking ID, accept Terms and Conditions.  You'll find your Tracking ID in

Admin
Tracking Info
Tracking Code




  • If you're using Blogger you can add your Tracking ID number (UA-00000000-0).  Go to Settings > Other and enter your Tracking ID number to the last section called Analytics Web Property ID and save settings.  It will take 24 hours for your data to show on your blog stats.

Adding Google Analytics to WordPress

If you're self-hosting WordPress, you can use a plugin to add your Tracking ID or add the Tracking Code directly to your themes header.php file.

Add Share Buttons to Your Blog Using AddtoAny 

These days just writing and posting a blog post aren't enough, your content needs to be shareable.  Add "share buttons"  and let your readers share your content across social media.

You can do this with ease using Add to Any

Follow the simple guide below to add your share buttons:

  • Go to your blog layout and click on add HTML.


  • Go to Add to Any dashboard.



  • Click on Customisation.



  • Click on Floating Share Buttons.



  • You have a choice between "vertical" and "horizontal" buttons.
  • Highlight the code most suited to your blog.




Add Terms and Conditions on Your Blog

For any newbie, starting a blog can feel like crossing a mine field.  With so many things and improvements to be done.  If you're main goal is to make money from your blog, then adding a Terms and Condition page should be top priority in building your website.

Probably the least read pages of all blogs and websites.  Most websites have a Terms Conditions page, even though it's not actually a legal requirement.

Note:  You are required by law to have a Privacy Policy if you're gathering user's personal data or if you have advertising on your website.

Should you be taken to court, these pages can limit your liability and protect your rights to the content included in your website.

Key Components of Terms and Conditions

The content of your Terms and Conditions will be unique to your particular website.  You will find common themes throughout, despite your chosen category.

Copyright

This is a page you should look into especially if you're making money from your website.

Limit Liability

This is a disclaimer removing your liability from errors in web content.

If you allow visitor's to post content on your website you need language that limits your liability from any offensive postings.  A disclaimers that you don't endorse users and aren't responsible for the statements made by third parties.

Privacy Policy

If you're adding any kind of advertising to your blog (including affiliate advertising) or you're collecting information from a subscription box, you need a Privacy Policy.  This will tell the user how the information will be used or not used.

Quick Tips to Creating Terms and Conditions

Terms and Conditions Generators

See some options below:
Ask an Attorney

A lawyer can create or review your Terms and Conditions, making sure they cover your specific needs.

Buy a Custom Domain Name

If you want a more professional looking blog, buy a domain name. You can go from blogspot to dot com with ease.

Here are some tips on starting your dot com journey:
Find your two CNAME's in Blogger

See below for what to look for in Blogger:

Then you need to find a company to rent your domain name from. I recommend Hostgator. I've always had great customer service from Hostgator and find they're always on hand when I'm in a bit of a pickle. You can see other well know companies below:
You can read more about self-hosting your blog below:
  1. To Self-Host or Not to Self-Host, that is the Question?
  2. Best Blogging Platform What are the Options?
  3. Beginners Guide to Blogging: 7 Awesome Reasons Why You Should Use Bluehost
  4. A Genuine Review of Hostgator
Customise Your Blogger Layout

There are numerous options on Blogger to customise your blogs layout. They're just as good as Wordpress templates, (especially the premium template) and they're all customisable. You can start by: 
  • Going to layout 
  • Click the template designer 
  • Click on a template 
You can also:

Add a custom header: Find it on your layout page. Click on the header box and add your own image.
Add a custom background: Find template. click on customise and choose your template.
Add custom details: Find template, click on customise and change the elements of your blog.




Blogger Template Dashboard

Add Page tabs

With Blogger you can add up to 20 standalone pages. These pages will show up under your blog header as tabs. Go to the pages section to add and create your pages.

Go to layout to drag the pages box under header. This will make the pages show up as tabs under your header.



Pages on dashboard

Most common pages to have are: 
  • About 
  • Books 
  • Posts 
  • blog tips 
  • contact 
  • Resources 
Add a Favicon

The favicon is the little icon which appears alongside your website address.

You can create your own quite easily by going to favicon. All you need is an image to start.

I also find Picmonkey most helpful in creating and changing images to my own specification.

Use a picture gadget to add a link to other websites

An example



Add a Contact Form

To create a simple contact follow the instructions below:
Add a contact form in your layout. 

Find the blog ID at the top of the page as shown below.




  • Go to pages 
  • Create new page 
  • Add code below with highlighted ID number to your blog contact form page 
Remember to switch to HTML mode to do this.

script>

var blogId = '8694494030520005341';//this number should be mandatorily edited.
//The below message 5 Strings can also be edited
var contactFormMessageSendingMsg ='Sending...';
var contactFormMessageSentMsg = 'Your message has been sent.';
var contactFormMessageNotSentMsg = 'Message could not be sent. Please try again later.';
var contactFormEmptyMessageMsg ='Message field cannot be empty.';
var contactFormInvalidEmailMsg = 'A valid email is required.'
var widgetLoaded=false;
function sendEmailMsg() {
if(widgetLoaded== false) {
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'sidebar', null,
document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg':
contactFormMessageSendingMsg ,
'contactFormMessageSentMsg': contactFormMessageSentMsg , 'contactFormMessageNotSentMsg': contactFormMessageNotSentMsg ,
'contactFormInvalidEmailMsg': contactFormInvalidEmailMsg , 'contactFormEmptyMessageMsg': contactFormEmptyMessageMsg ,
'title': 'Contact Form', 'blogId': blogId, 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email',
'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'},
'displayModeFull'));
widgetLoaded=true;
document.getElementById('ContactForm1_contact-form-submit').click();

I'm going to show you some simple changes to make your Blogger blog look more like a website.and gain more visitors.

Add Adsense Advertising 

Join Google Adsense 

Connect Blogger to Google Adsense account 

Below is a guide to where the best place is to put your Adsense advertising on your blog:



Go to layout; Click on add gadget; Select Adsense.



You have a choice as to which format, colour you want. I recommend blend or matching your Blogger template.



Once you have chosen your Ad format click and save

Add a Subscription Box

On my blog I have two ways of attracting subscription's for my readers.

Link to Feedburner 


Email subscription box

How to add a subscription box widget below post in Blogger
  • Login to Blogger dashboard 
  • Go to template 
  • Find the code below on Blogger template: 
]]></b:skin>

1. Add this CSS before the code ]]></b:skin>

#emailsub{clear:both;background:#3C3C33;color:#fff;display:block;position:relative;text-align:center;line-height:1.47}#emailsub
h4{font-size:24px;border-bottom:1px solid #746E6E;padding:10px;letter-spacing:2px}#emailsub input[type=&quot;email&quot;],.sl_in_mail{margin-right:-6px;padding:16px
0 16px 40px;width:50%;border:none}#emailsub
form{text-align:center;padding:20px
90px}#emailsub input[type=submit]{border-radius:0;box-shadow:none;padding:18px
24px 16px;letter-spacing:2px;border:none;background:#E06;cursor:pointer;color:#FFF}#emailsub
.counter{margin:0
0 25px}#emailsub.efooter{background:none}#emailsub.efooter
form{text-align:left;padding:0}#emailsub.efooter input[type=&quot;submit&quot;],#emailsub.efooter input[type=&quot;email&quot;],.wg_in_mail{padding:10px;letter-spacing:0px}#emailsub.efooter.sidebar{background:#3C3C33;padding:20px}#emailsub.efooter.sidebar
form{text-align:center}

You've added the style of the gadget
 
2. Next step is to add the position of the widget. Best place is below your blog post 

Find the code below using Ctrl + F 

<div class='post-footer-line post-footer-line-3'> 

Immediately after the code add the code below:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='emailsub'><form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=1976write&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'><h4>Email Newsletter</h4><div class='counter'><b>Join with 549 Subscribers ! </b> Get Our Latest Articles Delivered to Your email Inbox and <b>Get Giveaways, Tips to Become a GEEK!</b></div><input class='sl_in_mail' name='email' placeholder='Enter Your Email Address' type='email'/><input name='uri' type='hidden' value='1976write'/><input name='loc' type='hidden' value='en_US'/><input type='submit' value='SUBSCRIBE'/><p/><p/><p><small>When signing up you will initially receive a confirmation email requiring your approval to complete the Subscription.</small></p></form></div></b:if>

Change the green text (1976write) to your Feedburner name

3. How to Change the "No Comments" to just "Comments"

The "No Comments" on Blogger isn't the best caption. It leaves people thinking the author of the blog doesn't want any comments left.

It's a common question in the Blogger Help Forum

So how do you replace "No Comments" to just "Comments"?

You need to find: <data:post.commentLabelFull/&gt;:
Replace it with your chosen caption. In my case "Comments"
Below is the code you need to find:

<b:if cond='data:post.commentSource == 1'>
<span class='cmt_count_iframe_holder' expr:data-count='data:post.numComments' expr:data-
onclick='data:post.addCommentOnclick' expr:data-post-url='data:post.url' expr:data-url='data:post.canonicalUrl'>
</span>
<b:else/>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:post.commentLabelFull/>:
</a>
</b:if>
<data:post.commentLabelFull/>:

The above code is what you need to replace with your comment caption
Look closely, some templates may have this in more than once

Also don't forget to backup your template before you make any changes.

Read more about Blogging: How to Effectively Monetize Your Blog[Blogging for Beginners] To Host or Not to Self Host?How to Start a Blogger Blog and Make Money

This post contains affiliate links.  This means if you purchase through these links you are supporting 1976write and we thank you for that.

Comment