Pinned Post

10 Free Simple Blogger Responsive Templates

Download free Blogger Responsive Templates 2017 To make better and simple look of your blog or website with simple Blogger templates t...
Continue Reading



Recent Posts

Install Sublime Text 3 Ubuntu 14.04 or 16.04 Using Terminal

Learn how to install Sublime Text 3 on Ubuntu 14.04 LTS or 16.04 by using Terminal.

Install Sublime Text 3 Ubuntu 14.04 or 16.04 Using Terminal
Sublime Text is a popular cross-platform editor. Recently Sublime Text 2 has been upgraded into Sublime Text 3 version for the all popular Operating System: Windows, Linux, Mac.

The following instructions will work only for Ubuntu and Debian.

Ubuntu Package Manager Repositories:
  1. Open Terminal by Ctrl + Alt + T.
  2. Add GPG by hitting Enter after paste the following command through Terminal.
    wget -qO - https://download.sublimetext.com/sublimehq-pub.gpg | sudo apt-key add -
  3. Stable: Select the channel to use for installation. Run the following command and hit Enter.
    echo "deb https://download.sublimetext.com/ apt/stable/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
  4. Dev: Run the following command.
    echo "deb https://download.sublimetext.com/ apt/dev/" | sudo tee /etc/apt/sources.list.d/sublime-text.list
  5. Now update apt sources: Run the following command.
    sudo apt-get update
  6. Install Sublime Text 3: The final command to install Sublime Text 3.
    sudo apt-get install sublime-text

You have finished installation.

You can also install this software through Software Center. To do that you have to download the debian file from here.

Limitation: The previous version Sublime Text, Sublime Text 2 has offered to access trial version. But the latest version Sublime Text 3 doesn't offer trial. After installation completed you have to put license key on the prompt box.

Where you will get the license key: As like others premium software you have to buy the license key from the author of software. You can buy this software from Sublime Text 3 authors only for $70.

Learn How to Run C/C++ through Sublime Text Editor.

Need Help?

If you face any trouble with any problem about Sublime Text 3, then you can get help from Sublime Forum, Blog or AskUbuntu. You can also share here.

Have got this article helpful or not working? Put your comment below.
Read More »

How to Create Blogger Template from Scratch [Theme Dev Tutorial]

Blogger template has been upgraded to Blogger theme. This comprehensive guideline with separate tutorials will help you to learn how to create a Blogger template from scratch.
You will have been found Blogger template designer software on Google search but those has many limitations for that you don’t like this.

Disadvantages of using Blogger Template Designer Software are:
1. You are compelled to choose the given design example: menu, layout, etc.
2. You won’t learn how to code on a blogger template in future. So you can’t customize your template where it is needed.
3. You won’t learn the basic structure of Blogger template etc.
But this guideline will make you success to create a full responsive, professional and custom Blogger theme or template that will be installed successfully and your visitors will see the changes what you will do now.
Create Your Own Blogger Template Theme Development Tutorial

Thinking about publishing post to own designed and developed blog is just about thrilling, isn’t it?

How to create Blogger Template from Scratch:



Before starting Blogger Theme Development:
Check yourself. Are you skilled in the followings? If you don’t have any skill then you have to be skilled in HTML & CSS (At least). You can learn Web design with HTML & CSS courses from w3schools. It offers another popular courses free. One of them Bootstrap, JavaScript, jQuery.
1. HTML (Required)
2. CSS (Required)
3. JavaScript (Optional)
4. XML (Optional)
5. Responsive Framework (Optional)

The components you need:
1. HTML/CSS Editor. Off-line is recommended. Notepad++, Sublime Text, Dreamweaver, Geany etc. On which you prefer to code.

2. Notebook to save the essential codes, tips etc.

Probably, you had tried to upload your designed HTML template on Blogger manually or copy-paste. But every time you failed to see the changes because many errors are shown on notification bar in Blogger HTML Editor.

Today you won’t be failed to see your designed HTML template through Blogger platform. Not only the outlooking changes of your Template, but also you will make your HTML template dynamic such as Header, Post Title, Post Body, Sidebar, Footer will show generated data. You can custom logo, Blog Title, Sidebar etc through Blogger Dashboard without customizing any HTML code.

Hello World on Blogger

Say, “Hello World" through Blogger

1. From Blogger Dashboard → Theme → Edit HTML and clean up all codes. Select all by Ctrl + A and DELETE or Backspace.

2. Now paste the raw HTML of basic page on the blank space. Then save the theme. Assume, our selected codes are as below:

<html>
    <head>
        <title>Title of Blog</title>
    </head>
    <body>
        <p>Hello World</p>
    </body>
</html>
If you try to save the theme, you will see a notification as “There should be one and only one skin in the theme, and we found: 0". It shows because we have to put just one skin within <head></head> tag. And that is -
<b:skin><![CDATA[
/****CSS CODE*****/
]]></b:skin>
Please put this code after </title> tag and now save your theme.

Ops ! Again notification ! And this notification is:
We did not find any section in your theme. A theme must have at least one b:section tag."

Blogger Editor shows this because we didn’t add any section in body tag. So just copy-paste the followings code in body tag. You can paste just before <p>Hello World</p>
<b:section id="hello" class="hello"></b:section>
N.B. We will discuss about this after a while.

Now save the theme. Yes ! There is no notification showing now. Just relax and preview. It is showing Hello World, isn’t it? Now go to your blog URL and see what happened.
OMG ! You have said Hello World through Blogger ! You have succeeded to run your HTML code !
Though it isn’t enough to create a Blogger template, but you have almost done.  It is the primary and basic step.
You may ask What is  <b:skin>...</b:skin> tag? This is for containing custom CSS code for decorating your Blog.

Creating A New Post to See How Look It is


Lets create a new post from Blogger Dashboard → Posts → New Post and write some dummy text to see what happened in published Blog.

After publishing new post, we don’t see any post and our text.

You exclaimed, “What !!! Nothing to see ! Where is our post? Why this?"

This is why we didn’t tell Blogger where the post will be shown. We didn’t create and select any section for blog. Not only for blog post if we want to show Header, Sidebar, Footer we have to determine those by creating sections and widgets.

Instantly, copy-paste the followings codes in <body></body> tag.
<b:section class='main' id='main' showaddelement='yes'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog' version='1'/>
</b:section>
And save your theme. If you see the preview  you will see a published post with title and post. That means, you have successfully published your blog. Now visit your blog. Obviously, you will be happy.
Run own created Blogger template

If you reload Blogger Editor, you will see some additional codes has been auto generated.
1. Some code has been generated before <head> tag and
2. Some code has been generated within <b:widget></b:widget>
Generated code before <head> tag defines xml version and others to render this template properly.

If you expand the code within blog widget you will see main, post, comment-form, share-button etc.
This is for default tools that is needed when we publish post.

Understanding Section and Widget in Blogger Template

understanding and learn to create section and widget in Blogger

Though you have been succeeded to publish your blog by following the above instructions, probably you didn’t understand about section and widget. Why this? You should must learn the reasons. Because it will be needed in future to create new section and widget, after all we didn’t see how dynamic sidebar, header works.

Since we want to learn and make a professional Blogger theme, we should work on redesigned but full responsive HTML template that contains Header, Navbar, Main, Sidebar, Footer etc. These features are not available on our current HTML template where we are working.

It will be better decision to use built in full responsive framework like Bootstrap, W3CSS, etc. But I prefer to work with Bootstrap and this blog is also built with it.

You no need to download Bootstrap. Here is the ready-made Bootstrap html empty template and we will work on this template.

Go to Blogger Dashboard → Theme → Edit HTML and clean up all codes from your current theme. You can backup your theme after deleting.

Now paste the following Bootstrap HTML template to editor and save. Now we will work on this template and forget the previous template. :) This is our guinea pig template.
<html lang="en">
  <head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>My First Blogger Theme</title>

    <!-- Bootstrap -->
    <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->

    <b:skin><![CDATA[
    /**PUT YOUR ALL CSS HERE**/
    ]]></b:skin>
  </head>
  <body>
    <div class="header-wrapper">
      <div class="container">
        <div class="brand">
          <!--Put Header Section Here-->
          
        </div> 
      </div>
    </div>
    <div class="content-wrapper">
      <div class="container">
        <div class="row">
          <div class="col-md-9">
            <div class="post-wrapper">
              <!--Put Main Section Here-->
              
            </div>
          </div>
          <div class="col-md-3">
            <div class="sidebar-wrapper">
              <!--Put Sidebar Section Here-->
              
            </div>
          </div>
        </div>  
      </div>
    </div>
    <div class="footer-wrapper">
      <div class="container">
        <p>Powered by <a href="http://www.blogger.com">Blogger</a></p>
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  </body>
</html>
The design of this template is like as:

Demo of Blogger Theme
We have said to show the post we created, it needs a section. Creating a section on Blogger theme is very easy.

What is section in Blogger?

A blogger section is a allocated space on Blogger theme to contain widgets.

Rules of creating section in Blogger:

1. Each section has the starting tag and ending tag. Starting tag is <b:section> and ending tag is </b:section>. After publishing post if you inspect section from browser with Inspect element, you will see a div class instead of section. But in Blogger HTML Editor the sections are not changed to div class.
2. Each section must have an unique class and id. Naming the class and id  of one section to another section is illegal. Since section is converted into div, the class and id of section are remain in div as attributes. So we can customize the design of section by this class and id.
3.You are not allowed to nested of section. Under a section, creating another section is not valid. 
4. You can insert only the given attributes.
5. It would be better to create section under a div.

Attributes of section tag:

The given char will show why, how you will use attributes within section tags.


Attributes Values Required/Optional Refers to
id Unique name. Only letters and numbers are allowed. Example: header, navbar, sidebar, footer etc. Required Determining and customizing section with id.
class Same as id. Optional Determining and customizing section with class.
maxwidgets In numbers. Example: 1, 2, 3, 10 etc. Optional How much widgets we want to keep within this section.
showaddelement Values of this are in Boolean. Yes and No. Optional If yes then the section will allow to add gadgets as widget, otherwise none.
growth horizontal and vertical. Optional If vertical then section will be arranged side-by-side. Othewise stacked.

What is widget in Blogger?

We can call it Blogger plug-in. If we want to insert or install external gadgets then widget can create the scope to plug-in Blogger section. By default Popular posts, Search Bar, Email Subscription, Link List, Images, Text, Labels, HTML/CSS/JavaScript Code etc. are available on Blogger as gadgets.

Rules of widget:

1. You can use starting and ending tag in declaring widget. Starting tag is <b:widget> and ending tag is </b:widget>. Or you can use only single closing tag as <b:widget/> . After publishing post if you inspect widget from browser with Inspect element, you will see a div class instead of widget. But in Blogger HTML Editor the widget are not changed to div class.
2. Each widget must have an unique id and a type attributes. Naming the class and id  of one section to another section is illegal. Since widget is converted into div, the id of widget are remain in div as attributes. So we can customize the design of widget by this id.
3. You are not allowed to nested of widget. Under a widget, creating another widget is not valid.
4. You can insert only the given attributes.
5. You must have to create widget within create section.
6. You are not allowed to insert HTML within widget. 

Attributes of widget tag:


Attributes Values Required/Optional Refers to
id Unique name. Only letters and numbers are allowed. Example: header, navbar, sidebar, footer etc. Required Determining and customizing section with id.
type Header, Blog, Profile, PageList, AdSense, Attribution, HTML Required Define the type of widget.
locked yes, no Optional If yes then you can't delete or move this widget.
title Put any title name. Example: Tools, Advertisement, Lists etc. Optional Show the title of this widget.
pageType all, archive, main, item, static, all Optional Define the page type of widget.
mobile yes, no, default Optional If yes, then the widget will be shown on mobile device.

Differences between Section and Widget in Blogger


SectionWidget
Section is independent area.Dependent Page Elements that depends on Section.
Each Section can hold single or multiple widgets.Widget can't hold section.
Section can't be added dynamically.Widget can be added from Page Elements Tab (Add a Gadget)
Section has no attribute to control displaying or hiding on mobile devices.Widget has an attribute to control displaying or hiding on mobile devices.
Section has no title attribute to display or hide any title.Widget has title attribute to display or hide the name of title.
Section allows to add inner HTML directly.Widget doesn't allow to add inner HTML directly.

Similarity between Section and Widget in Blogger


SectionWidget
Section can't hold another section.Widget also can't another widget.
In published blog Section tag is replaced with a new div.Widget is also replaced with a new div.
Each Section has unique id.Each Widget has unique id.
Section has no attribute to control displaying or hiding on mobile devices.Widget has an attribute to control displaying or hiding on mobile devices.
Section has no title attribute to display or hide any title.Widget has title attribute to display or hide the name of title.
Section allows to add inner HTML directly.Widget doesn't allow to add inner HTML directly.
Advantages of naming the class of section:
1. Though it is optional to name the class of section, we should add it because, the naming will help Blogger to determine how to transfer blog content when changing theme.
2. The native name of classes are ‘navbar’ for navigation menu, ‘header’ for header section, ‘main’ for post section, ‘sidebar’ for sidebar section where we put popular post, recent post, labels etc. and ‘footer’ for footer section of blog.
Now create new sections and widgets, where you want to put this. Without header & blog widget, I do recommend, create all section but it would be better to no create widgets in editor, since you can add widgets from Dashboard → Layout.

How to Make Blogger Mobile Responsive Menu

You can make top bar responsive navigation menu for Blogger theme as you have done on raw HTML template. Using static Navigation menu in Blogger is the best way to avoid many problems. Though you can use ‘Pages’, ‘Link list’ gadget to insert link dynamically into your menu, it will be difficult for drop down menu.

So you don’t need to dynamic data as you did and will do for others layout on Blogger. If you use Bootstrap Framework, then you can use navebar from here Or you can check the actionable article about responsive menu from w3schools.

Put the codes into your XML theme, where you want to show navigation menu bar. After creating Mobile responsive menu just paste the targeting URLs into anchor tags. Example:
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Contact</a></li>
</ul>
But you can dynamic homepage URL into <li></li> tag as <li><a expr:href='data:blog.homepageUrl >Homepage</a></li>

Making Dynamic Blogger


Since the basic structure of Blogger Theme are:
1. Header
2. Blog
3. Sidebar
4. Footer
we should make this dynamic so that we don’t need code again.
1. Making a Dynamic Header:
Put the following code in header div.
<b:section class='header' id='header' maxwidgets='1' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='' type='Header'/>
</b:section>
2. Making Dynamic Blog Post:
Put the following code in post div.
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog' version='1'/>
</b:section>
3. Making Dynamic Sidebar:
Put the following code in sidebar div.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
</b:section>
4. Making a Dynamic Footer:
Put the following code in footer div.
<b:section class='sidebar' id='sidebar' preferred='yes' showaddelement='yes'>
</b:section>

Uses of Dynamic Default Data in Blogger

Blogger offers some default data tags by which we can call specific data to show. Example: If we want to the name of author of published post in every post, then we can use <data:post.author/> .
Use this after the following tags.
<div class='post-footer-line post-footer-line-1'>
Similarly, there are many Blogger data tags to show specific data in published Blog. This Blogger Data Tags will work only in Blog widget.

Blogger Data Tags What Show
<data:post.dateHeader/>The post's date as header.
<data:title/>The blog's title.
<data:description/>The blog's description.
<data:olderPageTitle/>Title of the older page of posts.
<data:newerPageTitle/>Title of the newer page of posts.
<data:commentLabel/>Number of Comments.
<data:authorLabel/>It will show "posted by".
<data:post.title />The post's title.
<data:post.body/>The post's content.
<data:post.author/>The post's author name.
<data:post.url/>The post' url link.
<data:post.timestamp/>The post's date and time.
<data:label.name/>The post's label.
You can get more Blogger Data Tags from Blogger Support.

What is dynamic anchor tag in Blogger?

Dynamic Anchor In Blogger is converted to general anchor text with URL. Example: If the URL of homepage be http://www.compromath.com then the following tag will be converted <a expr:href='data:blog.homepageUrl >Homepage</a> to
<a href="http://www.compromath.com">Homepage</a>

Some dynamic anchor tags for Blogger Theme
 
Dynamic Anchor URLWhat Show
<a expr:href='data:blog.homepageUrl >Homepage</a>A text with homepage’s URL
<a expr:href='data:post.url'>Read More</a>Read More Text with Post’s URL
<a expr:href='data:label.url' property='v:title' rel='v:url'><data:label.name/></a>Label Name with Label’s URL
<a expr:href='data:post.newerLinkUrl'><data:post.newerLinkText/></a>Newer Post Text with Newer Post URL
<a expr:href='data:post.olderLinkUrl'><data:post.newerLinkText/></a>Older Post Text with Older Post URL
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>Author’s name with URL
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>Comment Text to comment with URL

Advanced More Dynamic Operation: Show/Hide, Custom Design, Landing page depending on page type and URL


If we want to hide sidebar in Homepage but want to show in post, page we have published or if we want to show separate and new design of body when the URL of blog is http:www.compromath.com/p/contact.html, then it has access to do it with using conditional tags. Using conditional tags, we can use additional HTML, CSS, JavaScript as we want and this make Blogger more dynamic.

Hide Sidebar and make Squeeze page for homepage but post, page.


You can put the code before </head> tag or after <body> tag.
<b:if cond='data:blog.pageType == "index"'>
<style>
.sidebar{display:none;}
.post-wrapper{width:100%}
</style>
</b:if>
<b:if cond='data:blog.pageType == "item"'>
<b:if cond='data:blog.pageType == "static"'>
<style>
.sidebar{display:block;}
</style>
</b:if>
</b:if>
Learn more dynamic conditional tags for Blogger. By this conditional tags you can target specific URL, Page etc.

#Making Dynamic Title Tag

Now let’s go to make dynamic your Blog title tag. It is combinational of Blogger Data Tags and Conditional Tags.

Replace your <title></title> tag with the following codes.
<b:if cond='data:blog.pageType == "index"'>
<title>Blogger, Code and Ubuntu Platform - <data:blog.pageTitle/></title>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<title><data:blog.pageName/> - <data:blog.title/></title>
</b:if></b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<title>Page Not Found - <data:blog.title/></title>
</b:if>
Replace  Blogger, Code and Ubuntu Platform with your desired title name for your blog.
#Custom Design Blogger Templates with CSS

We have already finished 80% of Blogger Theme Development. The rest 20% is about custom designing with CSS.
Before editing the design you should learn how to edit Blogger template.

Finding all class & id of div, section, nav etc is so difficult, bored, time-wasting by manually. But I will tell you the tricks to collect all class and id with default CSS within few seconds.

1. Copy all the free CSS code for Blogger from the link.

2. Paste on to beatify or formatting.

3. After formatted copy the all CSS and paste on any HTML/CSS editor.

4. Modify CSS class and id if any have bad formatted.

5. Paste on your Blogger Theme within <b:skin> [[ /******CSS ******/ ]]></b:skin>.
6. Save your theme.
7. Next customize your CSS with inspector tools from browser.

Tips for Bootstrap: You can insert CSS class into specific HTML element. Suppose if you want to insert Bootstrap label into <data:post.author/>, then wrap this elements with span and insert label class as below:
<span class='label label-success'><data:post.author/></span> 
Tips for Font-Awesome: You can insert Font Awesome icon as below.
<span class='label label-success'><i class='fa fa-user'/><data:post.author/></span> 

More Blogger Theme Customization


#How to arrange Author, Labels, Date up and down from post body?


1. First go to Blogger Dashboard → Layout → Blog Posts → Edit and you will see an pop window.
2. From ‘Post Page Options’ check the button what you want to show and uncheck the option you want to hide.
3. After scrolling down you will get ‘Arrange Items’. Drag your selected item up and down to set.
4. Save.

If it doesn’t work then move related code from Blogger Editor by manually.

#How to add jump break in Blogger posts: 

#How to customize date header Blogger:

Add the following CSS to Blogger Theme as according to your customization.
.date-header{}

#How to show/hide labels on Blogger:


Add the following CSS to Blogger Theme
.post-labels{display:none;visibility:hidden} to hide and
.post-labels{display:block;} to show.

#How to remove date and time from Blogger post:

Put the CSS Into your Blogger Theme.
.post-timestamp{display:none;visibility:hidden}

#How to add date and time in Blogger:

Go to Blogger Dashboard → Layout → Blog Posts → Edit → Post Page Options
Check the date option you want to show.

Or

Use the following code in your Blogger theme after <div class='post-footer-line post-footer-line-1'>
<span class='post-timestamp'>
 <b:if cond='data:top.showTimestamp'>
   <data:top.timestampLabel/>
   <b:if cond='data:post.url'>
     <meta expr:content='data:post.url.canonical' itemprop='url'/>
     <a class='timestamp-link' expr:href='data:post.url' rel='bookmark' title='permanent link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a>
   </b:if>
 </b:if>
</span>

#How to change author name in Blogger:

Find for <data:post.author/> from your Blogger HTML editor and replace with your desired name with p tag. Example: <p>Elliyas</p>

#How to remove author name from Blogger posts:

Put the CSS Into your Blogger Theme.

.post-author vcard {display:none;visibility:hidden}

#How to add breadcrumb on Blogger: 

See this article about how to add breadcrumb on Blogger.

#How to customize Dashboard Layout on Blogger: 

#How to customize featured post on Blogger: 

#How to remove errors of Schema Markup on Blogger: 

#How to use font awesome on Blogger: 

See this article about how to use Font Awesome on Blogger.

#How to use Google font on Blogger: 

See this article about how to use Google Fonts on Blogger.

#How to insert SEO Friendly Meta Tags on Blogger:


Creating professional Blogger theme depends on how do you know code, how do you inspect element, stylesheet, how is your concept, idea to design. Though this tutorial provides the guideline to create Blogger theme professionally, your attempt & patient will define how much skilled you will be next.

Happy Coding ! 

Have got this article helpful or not working? Put your comment below.
Read More »

10 Free Simple Blogger Responsive Templates

Download free Blogger Responsive Templates 2017

To make better and simple look of your blog or website with simple Blogger templates that hosted at Blogger (for custom domain or subdomain with blogspot) by Google, install this responsive  design. Templates are now known as themes in Blogger.
10 Free Simple Blogger Responsive Templates
Why you should choose simple but responsive Blogger themes:
  • Recommend by Google Adsense and others.
  • To focus the contents or ads of your Blog or Website.
  • Easy to navigate and find the required contents.
  • Reduce page loading times.
  • Reduce bounce rate.
  • Better effect on Search Engine Optimization.
  • Works on multiple devices.
  • Increase audiences.

How to install downloaded Blogger themes?

After downloading Blogger themes you can see a file with .xml extension such as minmal.xml . If you download zip or other compressed file then extract it and you will get a Blogger theme XML file. Next follow the below steps.

1. Go to Blogger Dashboard → Theme → Backup/Restore option (from the top-right corner).
2. ‘Browse’ option and choose your Blogger XML file and ‘Upload’ to install.
3. Wait until installing properly.

Here is the free 10 Blogger Simple and Responsive Themes.

I would choose this themes if I couldn’t design and develop Blogger theme. You can install this themes manually but must keep credit of its owners or designers. Because I know what is difficult and values of designing themes. If it is possible to buy premium themes then purchase it from the author of themes. Because there has many limitation to use free themes.

1. Addiction Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Custom Profile Widget
  4. Full Width Thumb
  5. Custom Footer with 3 Layout
  6. Right Sidebar
  7. CSS Dropdown Menu

 

2. Eighties Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Single Layout
  4. Full Width Thumb
  5. Custom Footer with 3 Layout
  6. No Sidebar
  7. Side Navigation Menu

 

3. Funk Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Two Layouts
  4. Custom Thumb
  5. Custom Footer with  two section and 3 Layouts.
  6. Right Sidebar
  7. Two Menu
  8. Social Menu at Footer

 

4. Minimal Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Two Layouts
  4. Custom Thumb
  5. Custom Footer with 3 Layouts.
  6. Right Sidebar
  7. One Simple Menu
  8. Custom About Widget
  9. Video Thumb

 

5. New Minima Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Two Layouts
  4. Custom Thumb
  5. Custom Footer
  6. Right Sidebar
  7. Two Menus
  8. 3 Tabs with Popular Posts, Comments, Recent Posts
  9. Email Subscription

 

6. Phantom Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. 3 Layouts
  4. Custom Thumb
  5. Custom Footer with 3 Layouts
  6. Right and Left Sidebar
  7. Two Menus
  8. 3 Tabs with Popular Posts, Comments, Recent Posts

 

7. Practico Light Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Two Layouts
  4. Full Width Thumb
  5. Simple Footer
  6. Right Sidebar
  7. Single Menus
  8. Custom Popular Posts
  9. Menus with Icon Widget

 

8. Trendy Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Two Layouts
  4. Full Width Thumb
  5. Custom Footer With 4 Layouts
  6. Right Sidebar
  7. Three Menus: Top, Main, Social
  8. Custom Popular Posts
  9. Custom Profile Widget

 

9. Vienna Lite Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Two Layouts
  4. Full Width Thumb
  5. Custom Footer with 3 Layouts and 2 Rows
  6. Right Sidebar
  7. Three Menus: Top, Main, Social
  8. Dropdown Menu3 Tabs: Weekly, Archive, Comments
  9. Custom Popular Tags
  10. Custom Popular Posts
  11. Comments Widget With Scroll

 

10. Vienna Lite 2 Blogger Template

Features:
  1. Responsive Web Design
  2. Custom Social Share Button
  3. Two Layouts
  4. Custom Thumb
  5. Simple Footer
  6. Right Sidebar
  7. Three Menus: Top, Main, Social
  8. Custom Popular Posts
  9. Ads Ready
  10. Comments Widget With Scroll

How to edit Blogger templates?

You can easily edit your Blogger template for customizing your blog with custom design if you have the basic concept of HTML, CSS. The article for beginners to edit Blogger Template Step-by-Step with Images. Have got this article helpful or not working? Put your comment below.
Read More »

Edit Blogger Template [For Beginners with Images]

To change the design of Bloggers (blogspot) look, needs to edit its theme or template for including additional or customized HTML, CSS, JavaScript codes.  Before editing HTML or XML you should be conscious about the backup of your current installed XML Theme or Template. Otherwise you may lose previous design or codes to reuse, since there has limitation steps to go previous (undo) format by Ctrl + Z or forward/redo by Ctrl + Y
Edit Blogger Template
This article is for beginners and has mainly three parts:

First, we will see how to backup Blogger/Blogspot theme.

1. Backup Blogger XML

Your current installed theme is the most important and valuable property of your blog or website. The negligence to backup may bring out big harms such as losing valuable data or codes. If you backup Blogger XML to your Computer directory, you can upload anytime when you need to restore your previous theme.

STEP-1: Go to Blogger Dashboard, Choose Theme option and you will see like below.
Backup Blogger XML Theme to Restore

Choose ‘Backup/Restore’ option according to the figure. You will see a pop-up window.
Download Blogger Theme to Restore
STEP-2: Click on Download option from the pop-up window. Then another Pop-up will be landed over the previous window as below.
Save Theme as XML document to Computer Directory
Check on Save File button and OK.
STEP-3: Next you will be redirected to your Computer directory. Choose your directory to save your Backup Blogger Theme. You can rename this theme.
Download XML Blogger Theme to Computer
 After renaming save the downloaded theme with XML extension.

2. Install/Upload Blogger XML Theme

To change or restore any Blogger XML Theme, we need to upload the selected theme to install. We can select our previous backup theme or free or premium Blogger Theme as we want.

How to Install Blogger Template:

For installing any Blogger Theme you must follow the below steps.
STEP-1: Go to Blogger Dashboard, Choose Theme option. Choose ‘Backup/Restore’ option according to the figure. You will see a pop-up window. 
STEP-2: Click on ‘Browse’ option to upload Blogger XML File as following the figure.
Browse Blogger Theme to Install
STEP-3: Next you will be redirected to your Computer directory. Find the directory where you have  saved or download Blogger Theme to install. After getting select the Blogger XML file and ‘Open’ .
Upload XML Theme From Your Computer Directory
If you open properly you will see the name of your Blogger Theme beside ‘Browse’ option.
uploaded theme and upload backup Blogger Theme to install

STEP-4: After opening you are enable to upload your selected theme to your Blog or Website. Click on ‘Upload’ option and wait a few time to upload successfully.

3. Edit Blogger HTML & XML

Editing Blogger or Blogspot Theme or Template is advanced level for a Blogger (Who blogs). Before starting you must have the basic concept of HTML, CSS, JavaScript, Inspect Element from Browser.
If you want to
  1. Add or remove codes,
  2. Minify or beautify,
  3. Design etc.
you have to edit Blogger HTML & XML.

You can edit on Blogger HTML Editor or on your Desktop HTML editor like Dreamwaver, Sublime Text, Notepad++, Gedit etc. Before editing on Desktop HTML editor you have to copy the whole code of your Blogger theme and paste and save as XML file with name.

But editing on Blogger Editor provides your more advantages. 

Example:
  • You can see preview your changes on your Blogger but it wouldn’t available on Desktop Editor because of XML file.
  • You can jump to widget easily what is impossible at Desktop Editor.
  • After any changes, you can save your theme instantly, what is bored for Desktop Editor.
So in this article, you will be learned how to edit Blogger HTML template at Blogger Editor.
Customize or change the design Blog or Website from Browser

STEP-1: Browse your Blog or Website and choose the page you want to customize. I have selected Homepage.

STEP-2: Select the elements (Font, Div, Table, Form, Button etc.) of your Blog and choose Firebug/Inspect Element/Other tools to inspect elements from Right Button Click.
inspect element from browser and customize design blogger live
You will see related HTML and CSS code for selected elements.
HTML and CSS To Customize by Inspect Element Firebug

I have selected font and want to change font size. To change the font size, click on the value of font-size and change as you want.

Edit CSS Live Blogger

You will see the changes live. Similarly you can change color, background, width etc. You can also add more CSS after it.

STEP-3: After customizing we have to change on Blogger HTML Codes. Otherwise it won’t work if we reload this page. So we have to copy the customized or changed CSS to our theme. To do that we have to mainly two works:
  1. Find the name of ID/Class of customized CSS from Blogger HTML what we have done on Blog.
  2. Copy the changed CSS and paste to the selected ID/Class on Blogger HTML .
STEP-4: Copy the name of class or id of CSS. To copy click on the class or id  as below then copy.

Copy class or ID of customize CSS

STEP-5: Open new tab from your browser and go to Blogger → Theme → Edit HTML .
Edit Blogger Template Edit HTML
And click on codes once to enable edit.
search box in blogger editor
STEP-6: Press Ctrl + F from keyboard and Ctrl + V. Next hit ENTER. You will find the required CSS to change.
Search for copied class and ID from Blogger HTML

STEP-7: Now go to the previous tab but don’t close the current tab and copy the whole CSS under the name or ID as below.
Copy the customize CSS to paste Blogger HTML
STEP-8: Again go to Blogger tab and select the CSS with your mouse cursor and paste by Ctrl + V on.
Paste the copied CSS to Selected CSS into Blogger
STEP-9: Now save your theme and you can see the preview of changes as below images.

Save Blogger THeme and Preview
If you click on Preview Theme option, you will preview of your Blog here. But be patient to see.
Preview of Live Blogger Theme after Customize

4. Format Blogger HTML & XML

Formatting codes provides good look with proper indention and helps to understand, navigate codes easily. You can format codes within Blogger XML Theme on Blogger HTML Editor now. To do that just follow the below steps.
Before formate theme
STEP-1: Go to Blogger Dashboard → Theme → Edit HTML
STEP-2: Click on ‘Format Theme’ to format. If you want redo formatting, then ‘Revert Changes’.
After format theme blogger
I hope you have learned how to edit Blogger template.
Now I recommend you to see the basic and advanced changes, custom design for your Blogger template.
I can confidently say now you will make any change on your Blog or website. 

Have got this article helpful or not working? Put your comment below.
Read More »

Display Animated Spinner Page Loader on Blogger [Less Code]

Showing actionable and animated page loader with image or CSS until the web page loads completely on any website included Blogger keep patient visitors or users with little entertainment. But searching on Google, you can see a lot of articles are available with large number of code what will bad impact on your website. For better search engine optimization it is harmful.

Disadvantage: Blogger Layout option may not appear properly.

This article will help you about how to show animated and spinner page loader on your Blog or website STEP-BY-STEP with LESS CODE.

Though it is based on Blogger platform, you can apply this method on different platform manually.

STEP-1: Add HTML and JavaScript
Go to Blogger Dashboard and Theme option. Then Edit HTML to enable in edit mode. Now search for (Ctrl + F) <body and replace with the following code.
<body onload='myFunctionLoader()' style='margin:0'><div id='blogger-loader'/>
<div style='display:none' id='HiddenPage' class='animate-bottom'> <script>
window.onload = function showPage() {
document.getElementById('blogger-loader').style.display = 'none';
document.getElementById('HiddenPage').style.display = 'block'; }
</script>
If you don’t want to loss the necessary attributes within <body> tag, put only onload='myFunctionLoader()' style='margin:0' as attributes.
If you save your HTML under theme it will show error that ending </div> not found before </body> tag.
Error parsing XML, line 3602, column 3: The element type "div" must be terminated by the matching end-tag "</div>".
Yes. You have to add </div> tag just before </body tag. You will get this <body> tag after scrolling down at the end of your HTML.
STEP-2: Add CSS
Put the following CSS on your Blogger HTML. To find available CSS space search for ]]></b:skin> and paste the copied CSS before it.
#blogger-loader { position: absolute; left: 50%; top: 50%; z-index: 1; width: 150px; height: 150px; margin: -75px 0 0 -75px; border: 16px solid #191919; border-radius: 50%; border-top: 16px solid #c33737; width: 120px; height: 120px; animation: spin 2s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }< .animate-bottom { position: relative; animation-name: animatebottom; animation-duration: 1s }
@keyframes animatebottom { from{ bottom:-100px; opacity:0 } to{ bottom:0; opacity:1 } }
#HiddenPage { display: none; }
STEP-3: Save your Blogger template and reload your blog. You can see the change you wanted to show visitors. This page loading preview will be shown on every loads, not only homepage loading.

Have got this article helpful or not working? Put your comment below.
Read More »

#Get Offer and Recommended Post