☰ v5Tutorial Complete Blogger Tutorials



THE COMPLETE BLOGGER TUTORIAL

BUILT WITH V5TUTORIAL

Development


Development

Your Site Your Code

Blogger Tag Understanding

Create Own Interactivity

Quick JavaScript Guide

Design


Design

Start from Sketch

Make Responsive Design

Alive with Animations

Font Awesome & SVG Icons

Templates


Template

Post Widgets

Pure Blank Templates

Lightweight SEO Friendly

Responsive with Devices

Featured Blogger Tutorial

Start Blogger
Create your FREE Blog in Blogger Today
Page Loading Animations
Page loading animation for smooth browsing experience
Font Awesome
Design blogger with vector icon
CSS Animations
Make your blogger alive with pure CSS
Code Highlighting
Highlight code for batter understanding your tutorial
Popular Post Widget
Make a popular post widget template for blogger
Related Post Widget
Show related post widget for your blogger blog
W3CSS
The easiest way to design blogger quickly

Blogger Tutorial



With Blogger you can create your own Web site.
This tutorial teaches you everything about Blogger.
Blogger is easy to learn - You will enjoy it.

What is Blogger?

Blogger is a blog-publishing service which is completely free.
  • Blogger is Google’s FREE tool for creating blogs.
  • You will get a Domain like yourname.blogspot.com
  • Blogger is offering Unlimited Bandwidth.
  • Unlimited Hostng for image.

How to Create a Blog in Blogger?

To create your own blog follow the steps below.
  1. Go to Blogger.com
  2. Sign in with your google account if required.
  3. From top left click New Blog buttom.
  4. In the popup give a title and address (URL) of you blog.
  5. Choose a template & click Create blog!

    Use the Blogger Dashboard

    Control everything for your blog.
    • Create Post: Make a new post by click New Post.
    • Post List: To see your post list, click Posts.
    • Create Page: Add & view pages by click Pages.
    • Add Gadget: To add or remove gadget, go to Layout > Add a Gadget.
    • Change Template: Go to Template. Select one and click Apply to Blog.
    • Customize Template: To edit template go to Template > Cuztomize.
    • View Blog: See how your blog looks by click View blog.
    Recent Post Widget
    Recent Post widget template for blogger
    Popular Post Widget
    Make a popular post widget template for blogger
    Featured Post Widget
    Featured some post with this template for blogger
    Related Post Widget
    Show related post widget for your blogger blog
    W3CSS
    The easiest way to design blogger quickly
    Font Awesome
    Design blogger with vector icon
    SVG Image
    Use vector image for blogger posts
    Remove from Blogger Template
    Customize template for own unice design blogger
    Make template Full width
    Design blogger template fluid width for morden looks
    Make template Responsive
    Feel the real responsive experience in your default blogger template
    CSS Animations
    Make your blogger alive with pure CSS
    Code Highlighting
    Highlight code for batter understanding your tutorial
    Page Loading Animations
    Page loading animation for smooth browsing experience
    Start Blogger
    Create your FREE Blog in Blogger Today
    <b:section>
    The main blogger code for create layout
    <b:widget>
    Blogger code for add custom widgets
    <b:includable>
    Use one blogger code several times
    <data:name/>
    Show data like widget or page title blogger code
    <b:loop>
    Repeat blogger code multiple times for saves lot of work
    <b:if>
    Logically display or hide blogger content
    <b:switch>
    Logicaly switch between different blogger code
    <b:expr>
    Data tag conjuction for inserting values

    Related Post Widget

    To add Featured Post Widget in your blog:
    1. From Blogger Dashboard Go to Layout > Add a Gadget.
    2. From pop-up window select HTML/JavaScript.
    3. Past the widget template & Save it.

    Related Post Simple

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MUUFDMlMwcTJLY1E"></script>
    Customize »

    Related Post Round

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6Mc1JWRmc1LWhnV2s"></script>
    Customize »

    Related Post Card

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MVXJnd0RpVU43czQ"></script>
    Customize »

    Related Post Box

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MNkdFcDNPa29RbGs"></script>
    Customize »

    Related Post Gallery

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MSHNHVzVtbFhNUVk"></script>
    Customize »

    Related Post Revanue

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MLWRiQnhhQTczdGs"></script>
    Customize »

    Featured Post Widget

    To add Featured Post Widget in your blog:
    1. From Blogger Dashboard Go to Posts.
    2. Set your posts label as featured you want to show up.
    3. Go to Layout > Add a Gadget.
    4. From pop-up window select HTML/JavaScript.
    5. Past the widget template & Save it.

    Featured Post Only Title

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MOGZNRXJWc3hTbVE"></script><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
    Customize »

    Featured Post With Snippets

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MWW53OVpmTm1GM0k"></script><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
    Customize »

    Featured Post With Thumbnails

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MYWJpeGUyRVJJbms"></script><script src='/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
    Customize »

    Featured Post Colorized

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6Mb1l4MzJHUkVuRU0"></script><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Featured Post Classic

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MWHM0aEdJSGFjUmc"></script><div class="recentpoststyle"><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showlatestposts"></script></div>
    Customize »

    Featured Post Classical

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MYkgwaTZpSlAxRUE"></script><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Featured Post Space

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MUk5xekhRbERVQmM"></script><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Featured Post Handwriting

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MeUlPTjVuTFhCWDQ"></script><script src="/feeds/posts/default/-/featured?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Featured Post Gallery

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MeW1LWndiUDRlUnM"></script><script src="/feeds/posts/default/-/featured?max-results=9&alt=json-in-script&callback=arlinagrid"></script>
    Customize »

    Featured Post Horizontal

    <div id='bp_recent'></div><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MNk9iVF93WU5pOUU"></script><script src='/feeds/posts/default/-/featured?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
    Customize »

    Featured Post Grid

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MVDd4Z3h6M3EwUEE"></script><script src="/feeds/posts/default/-/featured?alt=json-in-script&max-results=500&callback=swtRecentBlogPosts"></script>
    Customize »

    Featured Post Stylish

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MdWJ6cldNemdtWjg"></script><script type="text/javascript" src="/feeds/posts/default/-/featured?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
    Customize »

    Popular Post Widget

    To add Popular Post Widget in your blog:
    1. From Blogger Dashboard go to Layout > Add a Gadget.
    2. From pop-up window select Popular Posts & Save it.
    3. Again Add a Gadget >  HTML/JavaScript.
    4. Past the widget template & Save it.

    Popular Post Round

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MajVKUFdLai1wNjQ' rel='stylesheet' />
    Customize »

    Popular Post Square

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MU0E3aEV6YWdiYXc' rel='stylesheet' />
    Customize »

    Popular Post Count

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MaFo4aDA1VG9oZWc' rel='stylesheet' />
    Customize »

    Popular Post Circle

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MSXVncVBmS0p2VEU' rel='stylesheet' />
    Customize »

    Popular Post 3D

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MeGc1VFRRd21pZFU' rel='stylesheet' />
    Customize »

    Popular Post Box

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MWDBndTdvUFoxU2c' rel='stylesheet' />
    Customize »

    Popular Post Note

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MR2NacUROM1BKZUE' rel='stylesheet' />
    Customize »

    Popular Post Grid

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MWFBFQXd4UE5wcVk' rel='stylesheet' />
    Customize »

    Popular Post Colorful

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MUUxmcC1JWnhadFk' rel='stylesheet' />
    Customize »

    Popular Post Flat

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6McENRYzV3RkUzaUE' rel='stylesheet' />
    Customize »

    Popular Post Colorize

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MdzN1UEgtSWR5Unc' rel='stylesheet' />
    Customize »

    Popular Post White

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MZVBTX05aMl8wamc' rel='stylesheet' />
    Customize »

    Popular Post Orange

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MaEhmYjV2cWhVTFU' rel='stylesheet' />
    Customize »

    Popular Post Oval

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MamR4Vnc1dFc5NWs' rel='stylesheet' />
    Customize »

    Popular Post Multi

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MbEZackp5QTRZSHM' rel='stylesheet' />
    Customize »

    Popular Post Gray

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MQlZHLTJhZEsxcms' rel='stylesheet' />
    Customize »

    Popular Post List

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MRHVKeVNDcFJ2Z2s' rel='stylesheet' />
    Customize »

    Popular Post Elegent

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MLVJEYlcxbm11ZUU' rel='stylesheet' />
    Customize »

    Popular Post Griddy

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MVHZ5TlBqRTZ1N3M' rel='stylesheet' />
    Customize »

    Popular Post Listy

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MVEdzb1Z3d2diMnM' rel='stylesheet' />
    Customize »

    Popular Post Mordan

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MbWtOcWtGM1JtZFk' rel='stylesheet' />
    Customize »

    Popular Post Qubic

    <link href='https://drive.google.com/uc?export=download&amp;id=0ByRQqYLl1l6MMU9XQldVbEZzYzA' rel='stylesheet' />
    Customize »

    Recent Post Widget

    To add Recent Post Widget in your blog:
    1. From Blogger Dashboard open your blog.
    2. Go to Layout > Add a Gadget.
    3. From pop-up window select HTML/JavaScript.
    4. Past the widget template & Save it.

    Recent Post Only Title

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MOGZNRXJWc3hTbVE"></script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
    Customize »

    Recent Post With Snippets

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MWW53OVpmTm1GM0k"></script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>
    Customize »

    Recent Post With Thumbnails

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MYWJpeGUyRVJJbms"></script><script src='/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs'></script>
    Customize »

    Recent Post Colorized

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6Mb1l4MzJHUkVuRU0"></script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Recent Post Classic

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MWHM0aEdJSGFjUmc"></script><div class="recentpoststyle"><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts"></script></div>
    Customize »

    Recent Post Classical

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MYkgwaTZpSlAxRUE"></script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Recent Post Space

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MUk5xekhRbERVQmM"></script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Recent Post Handwriting

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MeUlPTjVuTFhCWDQ"></script><script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
    Customize »

    Recent Post Navigation

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MWVM5Wm43TkEzT0k"></script><div class="terbaru-container"><div id="terbaru"></div><div id="cg-navigasifeed"></div></div>
    Customize »

    Recent Post Gallery

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MeW1LWndiUDRlUnM"></script><script src="/feeds/posts/summary?max-results=9&alt=json-in-script&callback=arlinagrid"></script>
    Customize »

    Recent Post Horizontal

    <div id='bp_recent'></div><script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MNk9iVF93WU5pOUU"></script><script src='/feeds/posts/default?max-results=5&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails'></script>
    Customize »

    Recent Post Grid

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MVDd4Z3h6M3EwUEE"></script><script src="/feeds/posts/default?alt=json-in-script&max-results=500&callback=swtRecentBlogPosts"></script>
    Customize »

    Recent Post Stylish

    <script src="https://drive.google.com/uc?export=download&id=0ByRQqYLl1l6MdWJ6cldNemdtWjg"></script><script type="text/javascript" src="/feeds/posts/default?orderby=updated&alt=json-in-script&callback=labelthumbs"></script>
    Customize »

    Related Post

    Java Scripts