How to print your blogger blogspot post?

Want to add a print before the comment form in the blogger post? Here is tutorial to make it possible to blogspot blog. Follow step below :
1. Login to http://www.blogger.com/home

2. Click Layout >> Edit HTML >> Expand widget templates >> and find </head>

3. Add code below before </head> code

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>

4. So it will be look like this

<style media='print' type='text/css'>
#header-wrapper, #header, .header, #sidebar-wrapper, .sidebar, #footer-wrapper, #footer, .date-header, .post-meta-data, .comment-link, .comment-footer, #blog-pager, #backlinks-container, #navbar-section, .subscribe_notice, .noprint {display: none;}
#main-wrapper {width: 95%}
</style>
</head>

5. Now find this code

<p><data:post.body/></p>

6. Add this line after that code

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<a href='javascript:window.print()'>Print this post</a>
</b:if>

7. Don't forget to save it.

Done. If you need a help you can comment below.

How To Add Emoticon above Comment Form In Blogspot?

If you want to add some interesting style to your blogspot blog and of course for your reader, you may consider to add emoticons above your comment form. Then, how do i do that? Here is i'll show you the way. I find this interesting trick in trick-tips blog.
Step By Step How To Add Emoticon above Comment Form In Blogspot :

1. Login to your blogger and click layout then edit HTML and expand widget template.
2. Put the code below before </body>.
For Yahoo Emoticons :
<script src='http://kendhin.890m.com/emoticon/smile1.js' type='text/javascript'/>
For Cats Emoticons :
<script src='http://kendhin.890m.com/emoticon/smile2.js' type='text/javascript'/>

3. Now Find This 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>

4. Now Put the code below after <p class='comment-footer'>

For Yahoo Emoticons :

<b><img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/21.gif'/>
:))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/100.gif'/>
:)]
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/71.gif'/>
;))
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/5.gif'/>
;;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/4.gif'/>
:D
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/3.gif'/>
;)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/10.gif'/>
:p
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/20.gif'/>
:((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/1.gif'/>
:)
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/2.gif'/>
:(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/8.gif'/>
:X
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/12.gif'/>
=((
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/13.gif'/>
:-o
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/7.gif'/>
:-/
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/11.gif'/>
:-*
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/22.gif'/>
:|
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/35.gif'/>
8-}
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/102.gif'/>
~x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/104.gif'/>
:-t
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/66.gif'/>
b-(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/62.gif'/>
:-L
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/14.gif'/>
x(
<img border='0' src='http://us.i1.yimg.com/us.yimg.com/i/mesg/emoticons7/24.gif'/>
=))
</b>

For Cats Emoticons :

<b><img border='0' src='http://kendhin.890m.com/emoticon/capek.gif'/>
:f
<img border='0' src='http://kendhin.890m.com/emoticon/bigsmile.gif'/>
:D
<img border='0' src='http://kendhin.890m.com/emoticon/hi.gif'/>
:)
<img border='0' src='http://kendhin.890m.com/emoticon/kagum.gif'/>
;;)
<img border='0' src='http://kendhin.890m.com/emoticon/love.gif'/>
:x
<img border='0' src='http://kendhin.890m.com/emoticon/malu.gif'/>
:$
<img border='0' src='http://kendhin.890m.com/emoticon/marah.gif'/>
x(
<img border='0' src='http://kendhin.890m.com/emoticon/bingung.gif'/>
:?
</b>
<br/>
<b>
<img border='0' src='http://kendhin.890m.com/emoticon/mumet.gif'/>
:@
<img border='0' src='http://kendhin.890m.com/emoticon/muntah.gif'/>
:~
<img border='0' src='http://kendhin.890m.com/emoticon/mentok.gif'/>
:|
<img border='0' src='http://kendhin.890m.com/emoticon/ngakak.gif'/>
:))
<img border='0' src='http://kendhin.890m.com/emoticon/sedih.gif'/>
:(
<img border='0' src='http://kendhin.890m.com/emoticon/senang.gif'/>
:s
<img border='0' src='http://kendhin.890m.com/emoticon/tolong.gif'/>
:((
<img border='0' src='http://kendhin.890m.com/emoticon/wow.gif'/>
:o </b>

5. Save your template and see your new style. XD

Note : Some time the template has the different code. So you can experience with that. But if you need a help, then you can drop me a line.

How To Auto Hide Blogger Navbar

The Auto hide tutorials works when visitors mouse over to the top of the original navbar then the navbar will appear and if visitor move the mouse down (not in the navbar area) then automatically navbar will disappear.
On the Edit HTML page, look for the code body {
then put code below above this body { code

body {

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100, FinishedOpacity=100)}

How to Make Drop Down Menu In Blogger

What's it drop down menu? You probably know it a long time ago. Drop down menu is something look like below. What's the advantage using this trick to blogger? This trick maybe useful for blogger who don't have enough space in the template to add more links. So here is the step to add drop down menu to blogger.

Step 1. Go To Dashboard >> Layout >> Add HTML/Javascript Widget
Step 2. Copy the entire code below in HTML/Javascript widget.

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"size=1 name=menu>

<option>- TITLE_HERE -</option>
<!-- change the links with your own -->
<option value="YOUR_LINK_HERE">TITLE_HERE</option>
<option value="YOUR_LINK_HERE">TITLE_HERE</option>
<option value="YOUR_LINK_HERE">TITLE_HERE</option>
<option value="YOUR_LINK_HERE">TITLE_HERE</option>
</select></form>

Step 3. Change the red text to your own.
YOUR_LINK_HERE and TITLE_HERE

Step 4. Save it and preview your blog. It's done.

- Blogger Template -Template Blogger Templates Exchange Links Tutorial

Tips : you can add as many links as you want. Just repeat this code as many as you want.

<option value="YOUR_LINK_HERE">TITLE_HERE</option>

That's all. Keep blogging.

How to Make Post Date In Blogger Disappear

How to make post date in blogspot to disapper or just want to hide it? I'll show you the way. First go to Edit HTML page and search h2.date-header, then add visibility: hidden; inside the code. see example code below:

h2.date-header {
margin:.3em 0 0;
padding:0;
font-size:80%;
color:#777;
height: 0px;
visibility: hidden;
}