Friday, December 23, 2016

100% Free, Fully Responsive, 2017 Blogger Template.

- Constantly Updating Article -

What I was looking for

I just wanted a Blogger Template with following features

  1. Based on Bootstrap 3 Framework (Fully Responsive)
  2. Font Awesome
  3. Using Google Fonts
  4. Using latest jQuery (3.1.1)
  5. Easy to modify via SCSS
  6. Lightweight
  7. Modern (for Blogger 2017)
  8. Elegant ultra-fast social sharing buttons
  9. Elegant social links
  10. Built-in search form
  11. Simple, nice and clean design

What have I found?

Not much.

Blogger is a mess. We all know it. Google has no template with these features ready to use. So I decided to create one. 

A template that anyone can easily install and use. A template anyone could use to create his own modern, responsive template.

OK. Let's Start!

The final Template is the one your are seeing in front of your eyes.

In order to make a decent website using Google Blogger platform you should avoid using anything built-in from Google!

Basic code for your new template

Go to your blogger administration panel click "Template" and then "Edit HTML".

Delete anything in there!

Paste in the following code

Some CSS

This template was developed using SCSS. This is the source

Of course you can change your Title or Body font. Don't forget to load your Google Fonts (Alter my code) in your header.

Paste the minified code where "Put your CSS HERE!" is written. Remove comment tags of course.

My minified code is the following

Some JS

I am using jQuery to alter any native Blogger Junk-Code,

You are ready to go!

Just go to layout now and add some widget to "Sidebar", "box-one", "box-two", "box-three".

Change your webiste name, page links, social profiles directly in the source code (Edit HTML). Do not use any Blogger tool for that.

How about some sharing buttons

Most ready to go social sharing solutions are slow loading tons of code and JS. My solution is clean, simple and without any use of JS.

Go to your code again. Search for "<data:post.body/>". Search for the second one! There are two of them!

Just after it paste the following code

Some tips

Blogger does not provide something like a Featured Image like Wordpress. So am using the first image. Try using a 800x400px picture and select "Original Size". This template will make it responsive and scale it right. Set align to Center.

When my template reaches perfection I will upload my JS, CSS to a CDN in order to install this with a single click. Stay tuned.

Am also considering uploading a tutorial Youtube Video.

Currently am fixing some cosmetic bugs.

Have fun and share if you like my template!