Adding a Email Me button

If you want to , you can add a "Email me" link or a Image button below your every post. You can also add this code as a HTML\Java script gadget . But if you use that method , there will be a space left between your post and the button. How ever the advanced & best way is adding the codes in to the template.For that

1. Edit your Template
2. Now find out post-footer-line post-footer-line-3 ( press 'Ctrl' + F to open your browser's search box)


In some template , you will find out a code line as

<div class='post-footer-line post-footer-line-3'>

and in most of templates , you will find out a code line as

<p class='post-footer-line post-footer-line-3'/>



Now change these code lines by giving your information


<a href="mailto:Type Your Email Address here"><img src="Image URL of your Image" alt="Email me" /></a>

* mailto: is essential

Ex:-

<a href="mailto:Dilshanzmail@gmail.com"><img src="http://sites.google.com/site/dragonzstore/_/rsrc/1242179856980/Home/email%20me%201.PNG" alt="Email me" /></a>


Now paste it below the code line <p class='post-footer-line post-footer-line-3'/>


Now you will see a image link like this

If you don't want a image, then add this code <a href="mailto:Type Your Email Address here">Email me </a>

* mailto: is essential


Now follow the Safety Saving Steps.

And

Highlighting Author Comments

If you want to , you can highlight your ( i mean , author's ) comments. I have used that trick in my blog too. How ever you can't do this by just clicking some buttons. you have to edit the template of your blog.

All right now lets see how to do this.First of all



1. Edit your Template
2. Find out </head> ( press 'Ctrl' + F to open your browser's search box)


Now paste following cod lines just above </head>

<style>
.comment-body-author {
background: #FAC090;
color: #000000;

border-top:1px solid #971915;border-bottom:1px solid #971915 ;border-left:1px solid #971915;border-right:1px solid #971915;

line-height: 2.4em;
margin:0;
padding:0 0 0 20px;
}
</style>



Now search for this code line

<data:commentPostedByMsg/>

Now paste these code lines just below the above line

<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<b:else/>


Just after you paste the above code , scroll down. Now you will see some code lines similar to these

<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>

Now paste this little peace of code below the end of above lines

</b:if>


Now follow the Safety Saving Steps.

And




Here are some explanations about the author comment changes...


1. background: #FAC090; stands for background color of your comment box
2. color: #000000; font color
3. border-top:1px , border-bottom:1px solid ..... Thickness of border around the comment box
4. border-top:1px solid #971915 border color

Embreding a comment box below post body

I found this trick on Amanda's blog. Really i came very handy to me too. By using this trick you will be able to show your comment box , just below your post body. This is very essential if you want to encourage your readers to comment because many of them feel lazy to do it.

How here is what to do. First go to draft.blogger.com and select your blog.


Now to go the Setting tab
Now you will see a option as Comment Form Placement
In there , select Embedded Below Post

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and search for comment-footer


Now you will find out some code lines similar to


<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 below codes with the above


<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>


Now follow the Safety Saving Steps.

And




If this trick didn't work out for you , here are some options to do.

Option 1

Search for <b:include data='post' name='comments' />
change it with this code <b:include data='post' name='comment-form'/>


Option 2

Check out whether you haven't un check comments option in layout > Configure Blog Posts

Option 3

check whether you have changed these things using draft.blogger.com

Change Email Icon

In many blogs , you may have seen a tiny email button. ( I don't like it . so i removed it ) . If you like to keep a email link button , you may also like to change it to some other image as your wish , so here is how to do it.

First create a image or use a existing image.
Upload it to a image hosting service. ( www.imageshack.us )

now place your image's URL with with code


<img alt='Email Post' src='Paste you image's URL here' style='border-width:0px;'/>

Now,

1. Edit your template ( How to edit your template )
2. Press Ctrl+F and find email-post-icon

now you may find out line as

<span class='email-post-icon'>& #160; </span>


Now replace our special designed code with the above one.


Now follow the Safety Saving Steps.

And



I tried this trick with some of my other blogs and found out some thing. In a one of my blog there isn't a code like above.So I searched under some image formats like .gif , .png and suddenly i saw a image as ' icon18_email.gif '. That was the email image. So as i explained , you may not find above code line. Then , use your brain.

Adding a sentence or Image near the Comment Box

I wanted to add a text in my comment box to encourage readers to comment on my lessons. After some code pastes , i found the right place to paste my sentence. Now I am going to teach you how to do this.


1. Edit your template ( How to edit your template )
2. Press 'Ctrl' key and 'F' and Find out <p class='comment-footer'>


now just place your sentence. or you can place a image too. ( As I have done )

to paste a image , just upload your image to a image hosting service ( www.imageshack.us )
copy it's image URL.
paste it with this code.

<img src='Your image's URL'/>

My code <img src='http://smileys.smileycentral.com/cat/36/36_1_21.gif'/> ( if you like it , use it ! )


As i have seen , the place to paste this code varies from template to template. so if you want to post your image or sentence on the comment box or below the comment box , paste your code A line below to the code that i gave you to , that means if these are your code lines...


<p class='comment-footer'>

code line 1
code line 2
code line 3
code line 4


First paste your code above code line 1 , then preview your template , now paste your code below code line 1 and above code line 2 and preview your template. Do this until you meet <data:postCommentMsg/> or <div id='backlinks-container'> .

This may depend on your template and your ability to understand.

Footer Editing

At your New template's Footer ( Bottom ) , you will find out your Template designer's Name , Team , Web address and so on.I don't think you love to keep other's names , links at your blog. Aren't you. But As I think you should even keep a link you your template creater's web because he is a one who create that beautiful blogger template and given out it totally free.


How even , it's up to you.

Ex:-




It says ' Test Blog by DragonD -CopyRight @ 2008 Designed by Gaganpreet Singh' and there is a link to his blog.

Now lets find out this part in our Templates codes

1. Edit your Template
2. Copy the Text you want to find out and Find it ( 'Ctrl' + F ) ex:- Gaganpreet Singh

It may be at few locations , but the code that we have to change is at the bottom , under Footer section.

Here it is , under div id= footer

These text ( ex;- Test Blog by DragonD -CopyRight @ 2008 Designed by Gaganpreet Singh ) are always inside the <p> and </p>

Now if you know some thing about HTML , you can edit it and Insert what ever links , names as you want.

If you don't know any thing about HTML just find out <p> and </p> . ( <p> and </p> which are inside <div id='footer'> and </div> ) Now Type a Sentence. Some thing like 'This blog is created by [yourname] '.........


Now Follow the Safety Saving Steps

Click