Now Friends you can use yahoo smileys emotions in blogger comments as well. As you would have been using it in posts but now for blogger you can use them in your comments also and your readers will get happy and excited using them.

Now I will tell you how to install it in Blogger.

But first you should have inline comment form in your blogger (i.e embed comment form below bloggger posts) If you have it then its ok . Continue reading this post otherwise first install it by visiting this post.

Now How To Install It.

LAYOUT > EDIT HTML > EXPAND WIDGETS

Search (ctrl+F) for below codes:-

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<h3><a expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/></a></h3>
</b:if>
</b:if>
</p>
</b:if>

Replace the above codes with below one:-

<p class='comment-footer'>
<b:if cond='data:post.embedCommentForm'>
<div style='-moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; width: 369; text-align: left; border: 1px solid #cccccc; padding: 5px; background: #eeeddf; height:86'>
<b>
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif' width='18'/> :))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif' width='18'/> ;))
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif' width='18'/> ;;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif' width='18'/> :D
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif' width='18'/> ;)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif' width='18'/> :p
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif' width='22'/> :((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif' width='18'/> :)
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif' width='18'/> :(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif' width='18'/> :X
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif' width='18'/> =((
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif' width='18'/> :-o
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif' width='20'/> :-/
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif' width='18'/> :-*
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif' width='18'/> :|
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif' width='24'/> 8-}
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif' width='31'/> :)]
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif' width='44'/> ~x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif' width='30'/> :-t
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif' width='18'/> b-(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif' width='18'/> :-L
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif' width='34'/> x(
<img border='0' height='18' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif' width='30'/> =))
</b>
</div>
<b:include data='post' name='comment-form'/>
<b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</b:if>
</b:if>
</p>
</b:if>

PREVIEW IF NO ERRORS SAVE IT NOW !

Now find the tag </body>

and place this script before it.

<script src='http://bandofgirls.googlepages.com/smiley.js' type='text/javascript'/><noscript><a href="http://www.anshuldudeja.com" target="_blank">Blogger Widgets</a></noscript>

It is how it looks


Now Use the codes you use in yahoo between comments to show them. If forget codes see them from above.. And thx to one of the brazil friend for this hack help.

Expandable Post i.e Display Post Summary hack for blogger as, was only available in wordpress but now is available in blogger also and its very easy to expand post. Dispaly Post summary on main page of your blogger is now can be added very easily.

Lets start with its installation

Go to Layout > Edit HTML in your Blogger dashboard and check the "expand widget templates" box.

Find the closing </head> tag in your blog template, and paste the following section of code immediately before it:

<!-- JavaScript Posts Summaries -->
<script language='javascript' src='http://bandofgirls.googlepages.com/jquery-1.2.3.pack.js' type='text/javascript'/>
<script language='javascript' src='http://bandofgirls.googlepages.com/jquery.extractor.js' type='text/javascript'/>

<script type='text/javascript'>
$(document).ready(function() {

$(&#39;.excerpt&#39;).expander({
slicePoint: 450, // default is 100
expandEffect: &#39;fadeIn&#39;,
expandText: &#39;[...]&#39;, // default is &#39;read more...&#39;
userCollapseText: &#39;[^]&#39; // default is &#39;[collapse expanded text]&#39;
});

});
</script>
<!-- End JavaScript Posts Summaries -->

Now, find this section of code (or similar) in your template:

<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

Replace this section of code in green with the following instead:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Now Preview the template you will see summarized ellipse below your each post like this in image below.

You can Now save Your template.

Now to Add Read More Link below each Post If You not liked this Expand /Collapse hack.

Now in the beggining you added the javascript codes before the </head> tag in your blog template, Find that code i.e written below :-

<script language='javascript' src='http://bandofgirls.googlepages.com/jquery.expander.js' type='text/javascript'/>

And replace it with this instead:

<script language='javascript' src='http://bandofgirls.googlepages.com/jquery.extractor.js' type='text/javascript'/>

I have only edited expander.js to extractor.js

Now, find the code you have added around the <data:post.body/> section, and add the line in bold red, as shown below:

<b:if cond='data:blog.pageType != "item"'>
<div class='excerpt post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
<a expr:href="data:post.url">Read More..</a>
<b:else/>
<div class='post-body entry-content'>
<data:post.body/>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>
</b:if>

Now Preview Your template. Posts will Look like this in image below.

Now you can save your Template.

Some Tips.. About it..

1.You can use both read more.. and expnad collapse hack together also.Just use 1st hack and add an extra line of read more in red also to 1st codes as shown above.

2.It works in firefox but sometimes can create working problem in IE.

3.In the javascript codes you added at top there is a line like this slicePoint: 280.Now you can change that slice point from 100-1000 i.e upto from which % it should put your expand/collapse link or Read More.. link . Enjoy...This HAck
Source :- Blogger Buster

Top Menu links for Blogger or Menu Bar at Top or Menu Navigation or Menu Butttons.

Show others pages links in blogger at top to make them easier for visitors to surf and show your important pages like CONTACT , HOME and SUBSCRIBE.

Now to add these links at the top of your blog, you have to add no of links to your blogger html/javascrip section you want to show. Check this image with 4 red links for Demo.

For this to show at top the page below header , there is small hack you have do with your blogger template Html.

Go to LAYOUT > EDIT HTML > PRESS ctrl + F > Search below codes

<div id='crosscol-wrapper' style='text-align:center'>
<b:section class='crosscol' id='crosscol' showaddelement='no'>
<b:widget id='HTML1' locked='false' title='' type='HTML'/>
</b:section>
</div>

Change the showaddelement='no' code to showaddelement='yes' And Save The Template.

Now Go to LAYOUT > Page elements

A new Add a Gadget Element will Appear Below Your Blogger Header.

Click on Add a gadget > Add HTML/javascript Add these link below, And Save It.

<a href="http://www.about.com/" class="navigation">About</a>
<a href="http://www.photos.com/" class="navigation">Photos</a>
<a href="http://www.amazon.com/ class="navigation">Amazon</a>
<a href="http://www.contact.com/" class="navigation">Contact</a>

Preview your blog now. Now these Link will appear at top of your page below your header.

As you can see i have added a class=navigation to your links that i will define now to show of your Buttons Looks with colors and hover effect.

Go to LAYOUT > EDIT HTML > PRESS ctrl + F > Search </b:skin>

Add below css codes before </b:skin> and SAVE it.

a.navigation {
background: #ff0000;
color: #ffffff;
margin: 1px;
padding: 2px;
border-width: 0;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
}
a.navigation:hover {
background: #404040;
color: #ffffff;
text-decoration: none;
}

You can edit the codes in red to change the colors of buttons and its hover effect also.

Change the green codes to adjust margins between the buttons and there size.

Note:-This hack will work in uncustomized blogger template for sure but for customized template it can or couldn't.

I hope You woul'd Enjoy this Hack.If you liked It subscribe to my blog.

Embed Search Box In Blogger Header that makes it look beautiful.You can also Embed Google Search Box In Blogger Header, to add to your earnings Or custom search engine to your blog. This is very important trick to increase your earnings of Adsense if you add google search as you will be got paid to get searched from your google search from your blog.


Now How to add this link unit to your Blogger Header?

1.Login to your blogger
2.Go to LAYOUT tab
3.Then EDIT HTML tab
4.Click On EXPAND WIDGETS to expand html
5. Search the below code in red

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>

Now Add the seach code after these lines.

If you want to add your google search then add the google search code from adsense.

It will look like this:-


If you want search unit to be placed above the description and below title then place the search code above these red lines.

Note:-Make the adsense code eco-friendly by putting it here before adding.

How to Place or Put an Adsense link unit in your Blogger header below your description in your header. You can also add it above description in your header below your title. This is very important trick to increase your CTR of Adsense. As it brings more Click on link unit from your Site.

Now How to add this link unit to your Blogger Header?

1.Login to your blogger
2.Go to LAYOUT tab
3.Then EDIT HTML tab
4.Click On EXPAND WIDGETS to expand html
5. Search the below code in red

<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>


Now Add the adsense code after these lines.

It will Look Like this:-



If you want adsense unit to be placed above the description and below header then place the adsense code above these red lines.

Note:-Make the adsense code eco-friendly by putting it here before adding.

Change post title in blogger,this is the best hack then previous as only post title is the title for seo and will be searched. As blog title will not be indexed in it as previous.It all depend on you to use which hack as if you feel you blog title to be indexed as well with every title then you can use previous post else follow my this new change post title hackin blogger.

Go to Layout then EditHtml

Search for this tag <title><data:blog.pagetitle/></title>

Replace this tag with Following tag-

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

I hope you will like this swap title hack as this is very good for search engine optimization.

Change title tags for your blogger posts i.e swap title hack.Swap the title or change the title for the posts of the blog in place of title of blog makes the seo for blogger. Title tags hack makes blogger search engine optimized. When you click the post in blogger the post title always appear after the blog title. and your blog is restricted to only blog title.
But now your title will come first on clicking your post which ill make it seo i.e the blogger title is swapped.

This title tag hack is also done in two ways:-
One if you want blog title to appear after your post title separated by | sign.
Or
Only post title will appear after clicking post.

First Change title tags for your blogger posts with blogger title-

Go to Layout then EditHtml

Search for this tag <title><data:blog.pagetitle/></title>

Replace this tag with Following tag-

<b:if cond='data:blog.pageType == &quot;item&quot;'> <title> <data:blog.pageName/> | <data:blog.title/> </title> <b:else/> <b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if> </b:if>

Now For the Only Post Tilte Will appear read My next Post

Now you can embed the comment form below the blogger post.Means you can embed i.e insert the form to comment below the posts in blogger.Embeddded Comment form gives very much professional look and its easy for readers to comment.As it was only available in wordpress now its made available by blogger too for test.

How to embedd the comment form below post?

First:- Login to you blogger account from draft.blogger.com instead of blogger.com.

Now Go to settings in draft.blogger.and then comments.

There you will find this option in picture below-


Set the Comment Form Placement to embedd below post and save it.

If you are using template by google without making editing then embed comment form below post in blogger will work.If you are using customized template then follow step below:-

Got to Layout then Edit HTML and then click on Expand Widgets-

Now search for below code in your html section-

<p class='comment-footer'> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </p>

Now replace the above code with this following code

<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:include data='post' name='comment-form'/> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p>

Its Done Now. Save It and Check Your Blog.The comment form below post is ebbedded making your blog look beautiful.

If still Comment form below post is not embedded Follow this:-

search for <b:include data='post' name='comments' /> and add the following code immediately below it <b:include data='post' name='comment-form'/> .

Thats it now done now you will see the comment form is inserted in your blogger below each post.

Remove Subscribe To Post Atoms from blogger layout that appears at end of page and also after each post viewed individually.Atom feeds work in a very similar way to RSS, and there is very little difference for either publishers or those who choose to subscribe.

On the main pages, this will link to the main site feed, whereas on post pages, this will link to the comments feed for a particular post.




Here is how this can be achieved:

1. Go to dashboard/ template/ edit HTML
2. Click the 'Expand Widgets Templates' box
3. Find:

<b:include name='feedLinks'/>

And delete it!

To be sure this has worked, you can preview your blog template before saving it: the “Subscribe to: Posts (Atom)” link should now be removed from your layout, on post pages as well as the main page.

Redirecting blogger to another blog or website or url
How to redirect from old URL to new URL?

This is the way to do it for the New Blogger. First thing to do always before you make any changes to the template is to backup the template PLUS the Page Elements. Some or all of your old Page Elements will be deleted or become empty when you upload a new or backup template.

First, sign into your Blogger Dashboard, click LAYOUT, then click the EDIT HTML sub-tab. This will open the template editor window. Add this block of codes into your template just below the <head> tab which should be very near the top of the template:

<meta http-equiv="refresh" content="0;url=http://newurl.com"/>

It should Look Like This

<head>
<meta http-equiv="refresh" content="0;url=http://newurl.com"/>
</head>

Replace http://newurl.com with the domain you want to redirect to the olb blog.

That's it! Now, all your old blog traffic will be redirected to your new address.
If you have any questions,ask here.

Have you tried using scripts in blogger posts.If not you can check by posting it as they are not visible in posts.
But now you can post these scripts with css codes in to the blogger posts.

For these scripts to display :

Just Follow These steps to add this " Post Styling Hack " to your Blog .

Step 1 :

Login to your Blogger account and navigate to Layout section . Then go to Edit Html Tab.

Step 2 : Add This CSS code above this ]]></b:skin>

.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}

Step 3 :

Whenever you create new posts just include the speical Script ( CSS code , Scripts , etc ) within this div section .

<div class="codeview">

Insert the Special code here

</div>

Thx Mohamad rias for this hack.

You can edit these red lines in code to change the layout of this code review box.

*Note:-Before Posting the script in posts just make it friendly
by putting it here and then publish it between the posts.

To hide the Blogger Banner :

- Log in to blogger

- On your Dashboard, select Layout. This will take you to the Template tab. Click Edit HTML. Under the Edit Template section you will see you blog's HTML.

Find the tag body {

- paste the below code after the body { tag in the Html Section:

#navbar-iframe {
height:0px;
visibility:hidden;
display:none;
}

Or Use

div.navbar {
opacity:0.0;
display:none;
}

Or You can Place If both not works

#navbar-iframe { display: none !important; }

If you have any problem you can post on comments.