- Constantly Updating Article -
What I was looking forI just wanted a Blogger Template with following features
- Based on Bootstrap 3 Framework (Fully Responsive)
- Font Awesome
- Using Google Fonts
- Using latest jQuery (3.1.1)
- Easy to modify via SCSS
- Modern (for Blogger 2017)
- Elegant ultra-fast social sharing buttons
- Elegant social links
- Built-in search form
- Simple, nice and clean design
What have I found?
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 templateGo to your blogger administration panel click "Template" and then "Edit HTML".
Paste in the following code
Some CSSThis 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
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 buttonsMost 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 tipsBlogger 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!