Adding Facebook Share and Like buttons to your blog is not as difficult as you have often thought. I know you might have seen it on this blog on the right-hand side and wondered how on earth I added. It is so simple to do that. I will briefly teach you how to do that here
All you need to do is open your blog.

    * Then go to Design >> Page Elements
    * Then Click Add Gadgets
    * A new window will open and you will see various gadgets that you can add to your blog
    * Scroll down to find "HTML/Javascript"
    * Select it
    * Copy the code below and paste it in the Content Box

Google +1 button is now available for websites and I recommend you Blogger users to add this new cool button to your blogs because it is another parameter that affects your website’s ranking on search results. So basically you should not ignore the button. It is pretty easy to add Google +1 button to blogspot blogs you don’t have to mess with lots of code snippets. Now go to Google +1 button page and generate your button.
Now, the next step is : Click “Design” tab from Blogger Dashboard and then click “Edit HTML” link. You will see your template codes, in order to see the detailed coding of the template you must click “Expand Widget Templates” link as shown in the screenshot given below.

After you expand the template, find
view plain
print?

     <data:post.body/>

To show your recent post on the sidebar is very easy, you just follow the instruction below then you will see your recent post on your blog sidebar. here’s the steps :

1. Login to Blogger then Chose "Layout"
2. Click on "Add page element" (chose where you want to put it) then chose "HTML/Javascript"
3. Copy the code below and put it in the "content" box.

<script src="http://www.geocities.com/uddin_81/recent-post.js"></script>
<script>var numposts = 10; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rp">
</script>

Now I will show how to create "Search Engine" in your blogger. This Search Engine is use to find articel in your blog, not to find articel at all website in the world. It's very easy, just follow the trick below you will have search engine in your blog. Here's the step:

1. Login to Blogger, Go to "Layout --> Page Elements". Klick "Add a page elements" then chose "HTML/Java Script".
2. Put the code below into "Content" Box

<form action="http://yourblogname.blogspot.com/search" method="get"> <input class="textinput" name="q" size="30" type="text"/> <input value="search" class="buttonsubmit" name="submit" type="submit"/></form>

In this episode I will explain to you "how to make your blog more expressive with smile icon" without copy an image and put to your blog, but with only little code and then it will be smile icon image automatically. For example, if you type this code :) it will atomatically change to this image :) , this code :p will be like this :p and etc. Do you interest? if no, go from my blog :D
here's the trick:

1. Login to blogger then chose "layout --> Edit HTML"
2. Find this code ]]></b:skin>, if you found it then put the code below under it.

<script src='http://kendhin.890m.com/smile/smile.js' type='text/javascript'/>

3. Save your editing.

* Before you type the code you have to press "space" first"

here is the code to show smile icon......

May be you will be angry if your articel shown in other blog unexpectedly, moreover it without inserting the resource. I'll show you how to protect your blog from theif. But this trcik is pointed for small thief because it unusefull for expert thief. With this trick, the thief will unable to select your articel and unable to right click in your blog. But if you don't care about plagiarize, you will don't need this trick. Ok lets begin.

Go to your blog setting then chose "Template --> Edit HTML". Find this code <body> then replace

with this code

<body onmousedown="return false" oncontextmenu="return false" onselectstart="return false">

Now your blog will be disable selecting and righ click, but the thief can still steal your articel by select "views --> page source" menu from their browser or by pressing "Ctrl + u", they can see your source code and can copy the articel from it. To deceive this, put your mouce cursor before this code <head> then press "enter" button many times, may be about 100 times :D the save your editting . Now if they press "Ctrl + u" they will only see a litle codes, he..he.. :D

1. Follow the instructions from the original Tab hack.

2.Add this code to the end of the CSS part, before the ] ] > sign:, change the CSS menu name from menu1 to menux (x varies from 1 to 14 [designs].)

#menu1 li{
margin:0;
padding:0 0 .25em 0;
text-indent:0px;
line-height:1.5em;
}

3. Add the right CSS code next. I include the first one here, you can go...

This form will take you to Blogger where you can choose to install the search widget into your sidebar (or other element of your template). However, if you prefer to install the search widget manually, you should take the following steps:

   1. Go to Template>Layout in your Blogger Dashboard.
   2. Create a new HTML/Javascript element in your sidebar.
   3. Insert the following code into the widget:

          <p align="center"><form id="searchthis" action="/search" style="display:inline;" method="get"> <input id="search-box" name="q" size="25" type="text"/> <input id="search-btn" value="Search" type="submit"/> </form></p>

How To Change The Width And Height Of Comment form in blogger.As you would have seen some using wide comment form and some using small comment from.As there are no much options in blogger to make changes in the blogger comments form but still there are some alterations like we can make,to alter its width and height.As blogger comment system is not one of the best comment system and blogger team need great modifications to be done in it to make it better and useful for readers.

How to Become a smart user??? You have to backup image and script to your own hosting. How to? Here's how to for image back up.

   1. Open Edit HTML
   2. Search all background image url, usually have .jpg, .gif, .png extension
   3. Copy URL, go to address, and save image
   4. Upload image on your own hosting such as photobucket.com
   5. Copy URL image, replace all image URL on your template through Edit HTML, to your own URL image

Here's how to for script back up.

   1. Open Edit HTML
   2. Search all script url, usually have .js , .txt , .css extension....

How to align any widget to Left,right or centre Of Blogger?What you have to do for it,its very simple question with very simple answer for those who just have little knowledge about html or xml or you must have learnt while writing your post also if you dont had any previous knowledge,so you waiting for just simple answer to this simple question.

Ok just see the codes below:-

We can put Twitter icon as floating image with fixed position, so it will attract your visitor to click it.How to? Follow this step below
1. Go to Layout > Edit HTML
2. Copy these code

    #floatingimage {
    bottom:10px;
    right:0px;
    position:fixed;
    _position:absolute;
    clip:inherit;
    _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight);
    _right:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);
    }
    #floatingimage a img {border:0}

3. Paste before...

This is a fairly simple task. I'm working from the Minima template, so your template terminology may be slightly different. You will be looking for the sidebar area in your CSS style sheet.

Look for this in your template.

    .sidebar .widget, .main .widget {
    border-bottom:1px dotted $bordercolor;
    margin:0 0 1.5em;
    padding:0 0 1.5em;
    }

    .main .Blog {
    border-bottom-width: 0;
    }

Then you will replace it with this code:

This can be done using Javascript code. Hence if the viewer has disabled Javascript on his blog this may not work. Also many viewers have pop-up blockers in place which may also prevent the display of this mesage.

To add it in your blog follow these steps :

1. Login at Blogger.com.

2. On the Blogger Dashboard which opens for a successful login click the 'Layout' link.

3. The Page Elements subtab of Template tab will open.

4. Click the Edit Html subtab of Template tab.

5. On the Edit Html subtab scroll down in the Template Code box....

What is favicon? While using IE Firefox or Opera you will see an icon on the tab when u visit a page.This is called favicon.By default blogspot blogs have a favicon which looks ugly.See it here at the top of the post.So how to remove it? Goto Blogger Template>Edit Html There find the title tag which looks like...

                <title><data:blog.pageTital/><title>

and immediately after that add the following code after proper editing....

I don't like the blogger bar across the top of my Web site because it didn’t really go with my template and I already had a Google search bar integrated. So I went on a mission to remove it and de-bloggerify my blog. I searched far and wide and for some reason kept hitting a dead end. It turns out that the code used to change the old blogger templates no longer works! So after tracking down the CSS changes here is how I did it:

Goto Blogger Template>Edit Html ....

Put the following code as the picture below...

To add a moving text (also called marquee) effect use :

    <marquee>Add your text here....</marquee>


This will show as this :

Add your text here....

You can change the direction of the text by using this tag in the beginning :

    <marquee direction="right">

Instead of 'right' put 'up' or 'down' or 'left' as per your...

To get the width of the blog Header, sidebars, main column, sign into Dashboard. In the section for the relevant blog, click LAYOUT, then click EDIT TEMPLATE. This will open the template editor window. Search through the templates for the following:
            
       #header-wrapper {

    width:750px;
    margin:0 auto 10px;
    border:1px solid $bordercolor;
    }

       #main-wrapper {

    width: 400px;
    margin-left: 20px;
    float: left;
    word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
    }

Log in to your dashboard--> layout- -> Edit HTML, scroll to where you see this:-

    #main-wrapper {


If you want to set post color to #d3ffcc , replace above code with this.

    #main-wrapper {
    background-color:#d3ffcc;