Make Your Blogger Template Responsive

Wednesday, June 29, 2016

You have made a blank blogger template in the previous lesson, and our subject today is how to put some element of blank template then make to become a responsive template or Mobile Friendly.

The easy way to make your blogger template become responsive are using the bootstrap. So we will integrate bootstrap to our template.

Ok let's start
1. Go to the http://www.w3schools.com/
2. Go to the Bootstrap Themes section
3. Choose BS Template and select one of the samples then push the "Try it Yourself".
4. Then select code below

"<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>"

5. Pay attention on the first and the second line of the code above, before you put into your template you have to close the code by adding this "/". So the result would be like this

<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

6. Copy the code above and paste it above the <title> code on your blank blogger template.
and the result would be like this

7. Save your template and it becomes responsive.

Create Blogger Template From Scratch-Blank Template : next lesson :

Tuesday, June 28, 2016

Our lesson today it is how to make a blank template on blogger.
Before we continued the topic I suggest you create one dummy blog on blogger for exercise.

Login to your Gmail and Go to the Blogger Dashboard and then create a new blog .
Select Template to edit the template, there are two layers "Live on Blog" and "Mobile"

Blogger Dashboard

Select the button below the "Mobile" and disable Show mobile template on mobile devices by select radio button "No. Show mobile template on mobile devices" then save it.

Disable Mobile View

Now you can take the option "edit HTML"
Select "Jump to widget" button and choose the "Blog1"

copy all post widget start
"<b:section class='main' id='main' name='Main' showaddelement='no'>"
until you get the blog main section close
"</b:section>"
The easy way to copy that section, you must minimize first that section by clicking the beginning line of the section so the result will be like this.
"<b:section class='main' id='main' name='Main' showaddelement='no'>...</b:section>"

Blog1 Section

Copy that line and save it into the text editor.

Now, erase all the code on your default template and change it to this code below

If there is no error message that is mean your Blank Template Work Properly.

Create Blogger Template From Scratch - Tools

Ok, the next lesson today is about tools that we need to create your own blogger template.

Notepad
Notepad is a generic text editor included with all versions of Microsoft Windows that allows you to open and read plain text files. If the file contains special formatting or is not a plaintext file, it will not be able to be read in Microsoft Notepad.
To run notepad on your computer that using Microsoft operating system it is very simple.
Click Start
In the Run box or on the Windows Start Screen type "notepad" and press Enter.
or
Click Start
Click Programs and then Accessories
Click the "Notepad" icon.

Notepad++

Notepad++

Notepad++ is a versatile and powerful source code editor that also serves as an excellent replacement for the default Notepad text editor in Windows.

Notepad++ is a free source code editor and Notepad replacement that runs in the Microsoft Windows environment. It was designed as a very lightweight application that loads quickly.

You download it here

Sublime Text

Sublime Text logo

This tool is same a text editor above , I recommend three tools text editor because this is a tool that helps me to create a template.

You download it here.

Photoshop
To create and edit the picture that you want to use for your template

Faststone Capture

Faststone Capture Logo

This is really powerful tool for capture the object on your screen.

You download it here.

Ok, let's start with the next lesson

Create Blogger Template From Scratch - Intro

Today, many people want to create their own website, but the don't know how to start it. Because the have less skill of HTML, CSS, and Javascript as the foundation of the website. But today it doesn't matter now because the technology has grown up every day and make some task of people become easy.

Now, as the beginner that who want to create a website it is not the big deal because we can find out a lot of tutorials on the internet who can help you to create your own website.

Many platforms that we can use to create a free website such as Wordpress or blogger. Both of that platforms very famously because it is simple and easy to use, and today we will using one of them that is Blogger.

Why Blogger ?

Free. Yes, it is free, Anyone can use blogger. Everything is provided by Google free of charge from the platform, templates, hosting, storage memory. You just create a Gmail and then go to Blogger.com.

Template Modification

Yes, this is one of the advantages of the blogger. You can change the template as you like. Actually, blogger already has a default template, and many developers provide free templates which you can download. But people often want to create their own template.

Plugins

Blogger also has many plugins available to be paired in the blog. Plugin program can be obtained free of charge.

Safe From Hacking

According to professional bloggers and Wikipedia only has one slot for the hacker to hack it is through username password from your Gmail Account . As long as we can secure our account security blogger guaranteed us safe from hackers.

Google Index

Blogger is the property of the Google search engine, which is the best search engine today, and it will be quickly indexed in their database.

Directly integrated into all Google Account

If we have an email from google then our blog will automatically be integrated with all the google account, such as Goole +, Gmail, youtube, webmaster, google analytics and other google accounts.

After knowing some of the facts above, it 's time to start making your website using the Blogger platform.

Next : create-blogger-template-from-scratch - tools