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:

❋ 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:
❋ 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:
  1. Going to layout
  2. Click the template designer
  3. 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:
  1. About
  2. Books
  3. Posts
  4. blog tips
  5. contact
  6. Resources
❋ Add Social Media Icon Buttons

These days customizing your blog is usually the better option especially when you don't find what you require, in this case on Blogger.

Follow the instructions below to insert the HTML into your Blogger template:

I used addtoany to add my follow and share media icon buttons.

With addtoany you can copy and paste the HTML code into your blog.

❋ 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 blogID 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.
  1. Link to Feedburner
  2. Subscription Box
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>
  • 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
  • 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.

You can read more in the Beginners Guides here for basic tips on setting your blog up on the internet.

Hit me with a comment