Add Signature to your Blogger Post

If you want to see your signature after each posts of your blog then follow the process:

  • Create a signature, signature should be an image. You can make an image signature with GIMP

  • upload it in a server. Here you can upload it ripway or photobucket
  • Go to Dashboard > > Settings > > Formatting > > Post Template
  • Write this code in Post Template box: <p> <image class="centered"alt="post signature" src="SIGNATURE URL" /> </p>
  • Change "SIGNATURE URL" with your signature URL



Add a Headline Animator

Why you will add a headline animator? If you are a blogger then you will find that after a time you have posted a lot of article. If you add a lebel from add a gadget then it show your article's lebel, Not the real head line. If your head line and lebel are same then you can all your posts in lebel gadget. If you you recent posts gadget then your user will sea a fixed number of posts or headline. But if you use a Headline Animator then your user can see all the Headline. It is animated and it looks good. I'm using a Headline Animator below my Template. You can also use TOC (Table Of Contents). Here your user will get all the contents headline within a Table. (I think TOC is better than Headline Animator).

Here is the Process of Adding Headline Animator:

  • Go to FeedBurner and sign in

  • Insert your blog url

  • Clock publicize

  • Click Headline Animator

  • Cutomize your Headline animator and click activate

  • Select Blogger blog from the dropdown menu and click next

  • Here you will get a new window showing Add Headline Animator To blogger. Click Add To Blogger.

  • Then a new window or tab will open. Click ADD WIDGET

  • Go to your Dashboard or sign in

  • Then go to page element

  • You can see your Headline Animator here. If you want to see your headline animator in another place of your template then click Edit

  • Copy the code and paste where you want it

You have finished. Enjoy with your Headline Animator.



Add All Posts Widget or Table Of Content Widget

If you are a blogger and you are blogging for a long time then you will find that your site is carrying a lot of pages with a lot of title. The lebel gadget or recent posts are not displaying all the articles name. It will be better for your user if they can see your all posts. You can sort the TOC by Post Title by clicking the column header. Click it again, and it is sorted in reversed order. The same way if you want to sort the posts by date: newest first, or oldest first. And by clicking on one of the labels in the TOC filters all posts with that label. Click the column header to return to the full TOC. I think it is good for SEO and it will increase your traffic because it will make your site user friendly.

Here is how to install it to your Blog.

  • Back Up your Template.

  • Add a HTML Page Element

  • Edit your template in HTML-mode, and look for the <b:section> with id=main. This is the section that holds the Blog posts.

    Change that line as follows:

    <b:section class='main' id='main' maxwidgets='2' showaddelement='yes'>

    Save the template and switch to the Page Elements Tab.

  • Go to Layout < < Add a gadget and then Add a HTML page element above your Blog Posts element.
    Leave the title blank. Add the following html:

  • <div id="toc"></div>

  • Save your template.

  • Add a Sidebar HTML-element

  • Now add a HTML-element to the sidebar. Set the title to "TOC".
    For the contents, enter:

    <div id="toclink"><a href="javascript:showToc();">Show TOC</a><br/><br/></div><script style="text/javascript" src="http://home.planet.nl/~hansoosting/downloads/blogtoc.js"></script><script src="http://YOURBLOG.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=999&callback=loadtoc"></script>

    Replace YOURBLOG with the name of Your Site's URL...... exactly.
    Oh yes, and save.

  • Add custom styles to the skin of your template.

  • New id's and classes are:
    #toc : the div-wrapper that contains the TOC
    .toc-header-col1 : header of column 1
    .toc-header-col2 : header of column 2
    .toc-header-col3 : header of column 3
    .toc-entry-col1 : cell in column 1
    .toc-entry-col2 : cell in column 2
    .toc-entry-col3 : cell in column 3

  • For your convenience: Beautiful Beta uses the following styling:

  • <style type="text/css">#toc { border: 0px solid #000000; background: #ffffff; padding: 5px; width:500px; margin-top:10px;}.toc-header-col1, .toc-header-col2, .toc-header-col3 { background: #ffd595; color: #000000; padding-left: 5px; width:250px;}.toc-header-col2 { width:75px;}.toc-header-col3 { width:125px;}.toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited { font-size:80%; text-decoration:none;}.toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover { font-size:80%; text-decoration:underline;}.toc-entry-col1, .toc-entry-col2, .toc-entry-col3 { padding-left: 5px; font-size:70%;}</style>

You can add this code to the <b:skin>-part of the template, or insert it in the sidebar widget.


Add Label Cloud

To add a lebel cloud flow this process:

  • Go to your Dashboard

  • Select Layout

  • G to Edit HTML

  • Find out this code:

    And Place Below Code In place of ]]></b:skin>(By Removing ]]></b:skin>)

    /* Label Cloud Styles
    ----------------------------------------------- */
    #labelCloud {text-align:center;font-family:arial,sans-serif;}
    #labelCloud .label-cloud li{display:inline;background-image:none !important;padding:0 5px;margin:0;vertical-align:baseline !important;border:0 !important;}
    #labelCloud ul{list-style-type:none;margin:0 auto;padding:0;}
    #labelCloud a img{border:0;display:inline;margin:0 0 0 3px;padding:0}
    #labelCloud a{text-decoration:none}
    #labelCloud a:hover{text-decoration:underline}
    #labelCloud li a{}
    #labelCloud .label-cloud {}
    #labelCloud .label-count {padding-left:0.2em;font-size:9px;color:#000}
    #labelCloud .label-cloud li:before{content:"" !important}

    <script type='text/javascript'>
    // Label Cloud User Variables
    var cloudMin = 1;
    var maxFontSize = 20;
    var maxColor = [0,0,255];
    var minFontSize = 10;
    var minColor = [0,0,0];
    var lcShowCount = false;

  • Save your template

  • Go to Edit HTML and Find these code:

  • <b:widget id=’Label1′ locked=’false’ title=’Labels’ type=’Label’/>

    (if you don't find it then go to page element and add a Lebel Gadget from add a gadget)
  • Atlast replace the above mention Label1 widget code with below code:

  • <b:widget id='Label1' locked='false' title='Label Cloud' type='Label'>
    <b:includable id='main'>
    <b:if cond='data:title'>

    <div class='widget-content'>
    <div id='labelCloud'/>
    <script type='text/javascript'>

    // Don't change anything past this point -----------------
    // Cloud function s() ripped from del.icio.us
    function s(a,b,i,x){
    var m=(a-b)/Math.log(x),v=a-Math.floor(Math.log(i)*m)
    var m=(b-a)/Math.log(x),v=Math.floor(Math.log(i)*m+a)
    return v

    var c=[];
    var labelCount = new Array();
    var ts = new Object;
    <b:loop values='data:labels' var='label'>
    var theName = "<data:label.name/>";
    ts[theName] = <data:label.count/>

    for (t in ts){
    if (!labelCount[ts[t]]){
    labelCount[ts[t]] = new Array(ts[t])
    var ta=cloudMin-1;
    tz = labelCount.length - cloudMin;
    lc2 = document.getElementById('labelCloud');
    ul = document.createElement('ul');
    ul.className = 'label-cloud';
    for(var t in ts){
    if(ts[t] < cloudMin){
    for (var i=0;3 > i;i++) {
    var fs = s(minFontSize,maxFontSize,ts[t]-ta,tz);
    li = document.createElement('li');
    li.style.fontSize = fs+'px';
    li.style.lineHeight = '1';
    a = document.createElement('a');
    a.title = ts[t]+' Posts in '+t;
    a.style.color = 'rgb('+c[0]+','+c[1]+','+c[2]+')';
    a.href = '/search/label/'+encodeURIComponent(t);
    if (lcShowCount){
    span = document.createElement('span');
    span.innerHTML = '('+ts[t]+') ';
    span.className = 'label-count';
    else {
    abnk = document.createTextNode(' ');

    <b:loop values='data:labels' var='label'>
    <b:if cond='data:blog.url == data:label.url'>
    <a expr:href='data:label.url'><data:label.name/></a>
    <b:include name='quickedit'/>


You have finished


Change Title of Your Each Post

Be ready to change your title accordingly to your posts.It means you can now have a unique title for each and every post now.This will really help your blogs ranking and it will help you for your blogs Search Engine Optimization. You should be creative so that you will get best result out of it.


  1. Goto Blogger Dashboard>>Layout>>Edit Html

  2. Backup your template

  3. Follow the instructions

  4. Find these codein your XML template{in header part}:

Replace the Code With these Codes:

<!-- Start Widget-based: Changing the Blogger Title Tag -->
<b:if cond='data:blog.pageType == "item"'>
<b:section id='titleTag'>
<b:widget id='Blog2' locked='false' title='Blog Posts' type='Blog'>
<b:includable id='comments' var='post'/>
<b:includable id='postQuickEdit' var='post'/>
<b:includable id='main' var='top'><title><b:loop values='data:posts' var='post'><b:include data='post' name='post'/></b:loop> ~ <data:blog.title/></title></b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'/>
<b:includable id='feedLinksBody' var='links'/>
<b:includable id='backlinks' var='post'/>
<b:includable id='status-message'/>
<b:includable id='feedLinks'/>
<b:includable id='nextprev'/>
<b:includable id='commentDeleteIcon' var='comment'/>
<b:includable id='post' var='post'><data:post.title/></b:includable>
<!-- End Widget-based: Changing the Blogger Title Tag -->

You can also add a very good keyword in homepage's title by just adding Keyword + Blog Title by finding this line in the above code(3rd last)-


and adding keyword here

<title> <data:blog.pageTitle/>Keyword</title>

Ok....You have now done this


Add Recent Posts Widget

Create Recent Posts Widget. It will help your reader. They will able to know the recent posts. Follow the process to Get the Recent Posts widget.

  • Sign in your site ant go to layout>>Page Elements>>Add a Gadget.

  • Select HTML/Javascript

  • Copy and paste these codes:

    <script style="text/javascript" src="http://scraptoall.googlepages.com/recentposts.js"></script><script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script><script src="http://shortmemory-shorttime.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script>

  • Change the url ("http://shortmemory-shorttime.blogspot.com/) and write your site's URL

  • Save the gadget.


SEO Tips-Great Tips for Bloggers

What is SEO?


What is SEO?

According to wikipaedia

Search engine optimization (SEO) is the process of improving the volume and quality of traffic to a web site from search engines via "natural" ("organic" or "algorithmic") search results. Usually, the earlier a site is presented in the search results, or the higher it "ranks," the more searchers will visit that site. SEO can also target different kinds of search, including image search, local search, and industry-specific vertical search engines.

SEO Tips

Here are some great SEO tips:

  1. Find The Best Keywords:

    Keywords are those that a user use to search a topic. Use the best keywords otherwise
    it would be a waste of your time to optimize your website. To find out the best keywords you should spend some time. There are many SEO tools available on the Internet to help you find the best keywords. You can use these two popular Software from here.

  2. Make Title With Keywords:

    Insert keywords that is used in your meta tag within the title tag so that search engine robots will know what your page is about. The title tag is located right at the top of your document within the head tags. If you are a blogger then you will see it while you are writing your article. Inserting a keyword or key phrase will greatly improve your chances of bringing targeted traffic to your site. It is a good practice for bloggers.

    SEO tips

  3. Link With Your Keywords:

    If your site contains a lot of pages then use the same keywords as anchor text to link to the page from other pages on your site.The more linked keywords the more better.

  4. Use Title Text Within The Body:

    You should use the title text within the body of the page. It will let your users to know that they are in the right page. It is good for bloggers to make the keywords bold. A good blogging site should not contain more than 5 same keywords within the same topics.

  5. Make Different Title for Different Page:

    Do not use the exact same title tag on every page on your website. You should know that search engine robots are crawling your site continuesly and it might determine that all your pages are the same. As a result your pages might not get indexed.

  6. Create meta Tags

    meta tags are hidden code. It is written within the <head>....</head> tags. search engine read the meta tags. It is very much important for webmasters to increase their site rank.

    See how to add META TAG

  7. Create a Site Map:

    PageRank is relative and shared throughout a website by a unique voting system created by Google. I could spend two days trying to explain how PageRank works, but what it comes down to is having efficient navigation throughout your site. That where a site map page comes in. Since every page on the website will be linked to the sitemap, it allows webcrawlers (and users) to quickly and easily find content. This SEO tip is one of my favorite of top 10 SEO tips.

    See how to create a SITEMAP

  8. Use alt tag for Image:

    Use alt tag for your site's images. This will help search engines that index images to find your pages and will also help readers who use text only web browsers. You should keep in mind that not everyone is searching text, a lot of people are seeing images. alt tag will help you to let them find your images.

  9. Submit Your Site in Different Search Engine:

    Submit your site in different search engines by yourself. Do not use a submission service or submission software. Doing so could get your site penalized or even banned.

    Submit your site in:

    1. Google Search Engine

    2. Yahoo Search Engine

    3. Altavista

    4. Excite

    5. HotBot

    6. Infoseek

    7. Lycos

    8. Snap

  10. Submit your Site in Different Directories:

    Through submitting your site in different directories you can get traffic and it is a good SEO trics. Here are a list of directories. You can more through searching the internet.

    Some Web Directories:

    Some Blog Directories:



Create a Blog

What is Blog?

Process of Creating a Blog

Types of Blog

What Can You do With a Blog?

What is Blog?

According to wikipedia

A blog (a contraction of the term "Web log") is a Web site, usually maintained by an individual with regular entries of commentary, descriptions of events, or other material such as graphics or video. Entries are commonly displayed in reverse-chronological order. "Blog" can also be used as a verb, meaning to maintain or add content to a blog.

Process of Creating a Blog

If you want to create a blog then the 1st thing is that where you want to create it. There are a lot of free blog site where you can start blogging.Blogger and WordPress are two popular Blog site. Here I will describe how to start Blogging with Blogger Site. The process is going here:
  • Create an email account if you have not one. Click gmail to create a account. (gmail is best for Blogger's Blog)

  • Go to http://www.blogger.com

  • Put your email account under username textfield (1), password under password textfield (2) and then click SIGN IN (3)

  • Enter your Blog title in Blog title textfield (1), then enter blog address (your sites URL) and Check Availability (2). Then enter the words that is provided by the sites (3) and click CONTINUE (4).

  • Choose a template (1) and click CONTINUE (2)

  • Click START BLOGGING to start your blog. You have done it.

Types of Blog

According to wikipedia

There are many different types of blogs, differing not only in the type of content, but also in the way that content is delivered or written.

Personal Blogs:

The personal blog, an ongoing diary or commentary by an individual, is the traditional, most common blog. Personal bloggers usually take pride in their blog posts, even if their blog is never read by anyone but them. Blogs often become more than a way to just communicate; they become a way to reflect on life or works of art. Blogging can have a sentimental quality. Few personal blogs rise to fame and the mainstream, but some personal blogs quickly garner an extensive following. A type of personal blog is referred to as "microblogging," which is extremely detailed blogging as it seeks to capture a moment in time. Sites, such as Twitter, allow bloggers to share thoughts and feelings instantaneously with friends and family and is much faster than e-mailing or writing. This form of social media lends to an online generation already too busy to keep in touch.

Corporate Blogs:

A blog can be private, as in most cases, or it can be for business purposes. Blogs, either used internally to enhance the communication and culture in a corporation or externally for marketing, branding or public relations purposes are called corporate blogs.

Question Blogging:

Question Blogging is a type of blog that answers questions. Questions can be submitted in the form of a submittal form, or through email or other means such as telephone or VOIP. Qlogs can be used to display shownotes from podcasts or the means of conveying information through the internet. Many question logs use syndication such as RSS as a means of conveying answers to questions.

By Media Type:

A blog comprising videos is called a vlog, one comprising links is called a linklog, a site containing a portfolio of sketches is called a sketchblog or one comprising photos is called a photoblog. Blogs with shorter posts and mixed media types are called tumblelogs.
A rare type of blog hosted on the Gopher Protocol is known as a Phlog.

By Device:

Blogs can also be defined by which type of device is used to compose it. A blog written by a mobile device like a mobile phone or PDA could be called a moblog. One early blog was Wearable Wireless Webcam, an online shared diary of a person's personal life combining text, video, and pictures transmitted live from a wearable computer and EyeTap device to a web site. This practice of semi-automated blogging with live video together with text was referred to as sousveillance. Such journals have been used as evidence in legal matters.

By Genre:

Some blogs focus on a particular subject, such as political blogs, travel blogs, house blogs, fashion blogs, project blogs, education blogs, niche blogs, classical music blogs, quizzing blogs and legal blogs (often referred to as a blawgs) or dreamlogs. While not a legitimate type of blog, one used for the sole purpose of spamming is known as a Splog.

What Can You do With a Blog?

We can do a lot of things through our blog. It depends on who is blogging. We can express our thoughts, our opinion. We can use it for our company's publishing activity. We can also earn from our blog. In a word we can do what a website can do with a blog.



Add your URL to Yahoo

Yahoo is one of the most popular search engine. You should Add your site's URL here. It will help you to increase your traffic as well as your SEO rank. To add your site's URL, follow this process:

  • Go to http://search.yahoo.com/info/submit.html

    You will see here alot of services that yahoo provides. Click Submit Your Site for Free:

  • Click Submit a Website or Webpage

  • Then write your site's URL in the text field (1) and click Submit URL button(2)

You will get a Thank you confirmation after successfully adding your site's URL and that will look like this:


Add your URL to Google

Add your site's URL to Google search engine. It will help you to increase your traffic. To add your site just follow the process below:

  • Go to http://www.google.com/addurl/?continue=/addurl

  • Write your URL in URL text field (1)

    Please enter your full URL, including the http:// prefix. For example: http://blogging-for-bloggers.blogspot.com/

  • Write comments in Comments text field (2)

    Add your comments or keywords that describe the content of your page. These are used only for Google's information and do not affect how your page is indexed or used by Google.

  • Enter the squiggly letters those are shown in the page. It will help Google to identify in which way your site is added (automatically entered by software robots or submitted by individuals).(3)

  • Then click Add URL button (4)

Please note: Only the top-level page from a host is necessary; you do not need to submit each individual page. Our crawler, Googlebot, will be able to find the rest. Google updates its index on a regular basis, so updated or outdated link submissions are not necessary. Dead links will 'fade out' of our index on our next crawl when we update our entire index.

After your site submission you will get a thank you confirmation like this:



Add Navigation Button in Your Blog

Why You Need Button?

Button Code

Process Of Adding Button

Why You Need Button?

You should create button if you have a site that contains a lot of data on various topics.
It will help your user to navigate your site easily. But most of the bloggers face problems while they use template
from other source. Some templates contain navigation button but most good looking templates do not contain it.
So I was trying to make it possible for bloggers and atlast I found it. It is so easy. You can change the codes and
make it as you like. Here no background image is used. If you want button with background image then wait a few days and
I will deliver you the process.

Button Code

Style code used for Button:

a.navigation {
background: #000000;
color: #ffffff;
margin: 1px;
padding: 5px 35px 5px 5px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
a.navigation:hover {
background: #5d5d54;
text-decoration: none;

Button link codes:

<a class="navigation" href="http://your-link-url.blogspot.com">HOME</a>
<a class="navigation" href="http://your-link-url.blogspot.com">PICTURE</a>
<a class="navigation" href="http://your-link-url.blogspot.com">ABOUT ME</a>

Process Of Adding Button

Here is the detail process:

    Process of Adding Style code used for Button

    • Go to your Dashboard
      Go to Layout and then Edit HTML

    • Find <b:skin> and </b:skin> tags in your template. You will find it in your Templates Style section or just use Ctrl+F to find out it.

    • <b:skin>


    • Then copy and paste these codes within these <b:skin> and </b:skin> (1) tags and save template (2):

      a.navigation {
      background: #000000;
      color: #ffffff;
      margin: 1px;
      padding: 5px 35px 5px 5px;
      border-width: 0;
      text-transform: uppercase;
      text-decoration: none;
      font-weight: bold;
      a.navigation:hover {
      background: #5d5d54;
      text-decoration: none;

You will see that there are two statements in this styling: the first statement defines (a.navigation) what the buttons will look
like as they appear in your blog and the second (a.navigation:hover) statement defines the background color of
the button when you place your cursor over the button (the "mouseover" effect).
If you you want to change button style then you can change the color code of the backgrounds to colors which you
prefer for your blog. You can easily find and see 350+ color codes from here.

    Process of Adding Button link codes:

    Create your links in an HTML/Javascript widget

    • After saving your template Go to Page Elements >Add a Gadget

    • Select HTML/JavaScript

    • Copy and paste these code (1) and then click save (2):

      <a class="navigation" href="http://your-link-url.blogspot.com">HOME</a>
      <a class="navigation" href="http://your-link-url.blogspot.com">PICTURE</a>
      <a class="navigation" href="http://your-link-url.blogspot.com">ABOUT ME</a>

Make sure to replace "http://your-link-url.blogspot.com"
with the URL of the post page (or link) and replace the link text (eg: HOME) with the text you would like to display.

It will look like:



Add Search Box in your Site

Search Box Code

Process of Adding Site Search

Search Box Code

It is very much necessary to let your users search your site when your site carries a lot of pages. Use this code and make the search box. You can change the code to look it different. The code goes here:

<form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

Process of Adding Site Search

Here is the process of adding site search in your blog:
  • Go to your Dashboard or sign in your site

  • Click Layout and then Page Elements

  • Click Add Gadget

  • Select HTML/Javascript

  • Copy this code and paste it within Page Elements

  • <form id="searchThis" action="/search" style="display:inline;" method="get"><input id="searchBox" name="q" type="text"/> <input id="searchButton" value="Go" type="submit"/></form>

    Paste the codes in shown place:

  • Then Click Save

  • It looks Like:



keep connection

  © 2008 by Webmaster Rashed: ® All Rights Reserve to webmaster

Back to TOP