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:
  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 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 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 

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.

Read more in this series: How to Start a Blogger Blog in 10 minutes, Why I Started Blogging, Blogging Essentials, Tips For Setting Up a Self-Hosted Blog, The 50 Million Dollar Question, How Do I Get Traffic To My Blog, Beyond the Basics, A Brief Note Before You Start Blogging

Hit me with a comment