How To Add Reply Option to Blogger Comments

This tutorials will show you how to add reply option to your blogger comments like wordpress.Usually we can see reply option in non blogger blogs.But in blogger blogs there is no option to reply comments.But after you add this trick to your blogger template,you can see a reply option in blogger comments.

Before add this feature to your blogger blog you must find your blog ID.



To find your blog id follow the step given below.

Login to your dashboard and click on "Settings" link of your blog.



Now look at address bar of your browser.You can see your blog ID on the address bar.It will be a number like 2183677992760077155.Now note your blog ID.



Now let see how to add reply option to blogger comments.

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see this:

4.Copy below code and paste it just after above code.

[Reply]

NOTE : Remember to replace YOUR-BLOG-ID with your real blog ID.

Look at the example given below:

[Reply]

5.Now save your template and you are done.

How To Hidden Deleted Comments in Blogger

When you delete the comments in blogger, still you'll see an message like the picture below.This messages add a ugly appearance to your blogspot site.But doing this little trick,you can hidden deleted comments easily.If you like to hidden deleted comments in your blogspot blog,then simply follow the steps below.



1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below code:

4.Copy below code and paste it just after .

5.Copy below code and paste it just before .

6.Save your template and you are done.

Now your deleted comments will not appear.

How To Remove Commentators Profiles/Sites URLs in Blogger

When someone leave a comment,your site is linked automatically into his website or profile url.If you don't like this you can stop it doing this very simple trick.Simply follow the steps below to do it:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see below code:

4.Now replace above code with below code:

5.Save your template and you are done.

Now your site will not linked to commentators sites/profiles.

How To Remove Post Count From Blog Archive

When you add a blog archive to your blogger blog it shows the number of post for time periods.But if you don't like it, you can remove this post count feature from your blog archive easily.To do it,follow the steps below:



1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Scroll down to where you see your blog archive code:

Note : Your blog archive code will look like this:

 ()








 ()









()














▼ 





◄ 

► 

4.Now Remove below code from your blog archive code:

()

Note : You can find it 3 times.

5.Now save your template and you are done.Look at the picture below:

How To Show Post Title Only on HomePage in Blogger

Do you like to show only your blogger post title on your home page?Then follow the steps below:

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see tag .

3.Copy below code and paste it just before the tag .

4.Now Save your template.

5.Go to Layout-->Page Elements.Click on "Edit" link of Blog Posts Section.

6.Enter the value for "Number of posts on main page:" as your choice and click on save.



You are done.

How To Change "Post a Comment" Text of Blogger Blog

You can see "Post a Comment" text above your comment form in blogger.If you like to replace this "Post a Comment" text with your own creative text follow the steps below.

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates".

3.Scroll down to where you see this:

Note : You can find above code in 2 places.

4.Now replace above codes with your own text.For example I replace it with "Give Your's Feedbacks".



5.Now save your template and you are done.Refresh your site to see result.It will look like above image.

How To Add Show/Hide NavBar Link to Blogger

If you want to let your visitors to show and hide your blogger navbar,then foolow the easy steps below.



1.Log in to your dashboard--> layout- ->Page Elements

2.Click on 'Add a Gadget'.

3.Select 'HTML/Javascript' and add the code given below and click save.

Show/Hide Blogger NavBar

You are done.Look at the demo.

Demo

How To Enable Avatars in Blogger Comments

If you use this hack,you can show Show Blogger Profile Images In Comments As Avatars.For your safety,first backup your blogger template.To Enable avatars in blogger/blogspot comments follow the steps below.If first method doesn't work for you,then follow the second method.



Method 1

1.Login to your blogger dashboard--> Settings- -> Comments.

2.Enable Show profile images on comments.



3.Now Click on "Save Settings" and you are done.


Method 2

1.Login to your blogger dashboard--> Settings- -> Comments.

2.Enable Show profile images on comments.



3.Now Click on "Save Settings".

4.Go to Layout- -> Edit HTML.

5.Click on "Expand Widget Templates".



6.Now search below code in your template.

NOTE: If you can find above code no problem.But if you can't find it then search:

or

in your template.

Now Replace it with:

7.Now find below code:

Note:You can see above code one or more time.

8.Now Replace every above code () with below code:

9.Now find ]]> tag in your template.

10.Copy below code and paste it just before ]]> tag.

/* Avatar */
.avatar-image-container img {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVaxy_40KgeaX0oW0ZXrsbZDhTGhv7CFl7vLJmiWNyjbbDJe-RdEoDvxSMrVQ7IFgwqmBNK6jdusUxYAiB9z9I9zV4fu9uwkxQfsHxTzV0BAR2uRZIXLV84MkIv2OvH3JyXLfnLNB4T5Gm/+avatar.png);
width:35px;
height:35px;
}

11.Save your template and you are done.

How To Replace Read More Text With Image

1.Log in to your dashboard--> layout- -> Edit HTML

2.Click on "Expand Widget Templates"

3.Now find "Read More" text in your template.

Note:It can be different from "Read More" according to your template.(Eg:more,full story,....)



4.Now replace it with below code:

Note: Replace "LINK-OF-YOUR-IMAGE" with your image link.

You are done.

How To Add Syntax Highlighter to Blogger

1.Login to your blogger dashboard--> layout- -> Edit HTML

2.Scroll down to where you see ]]> tag .

4.Copy below code and paste it just before the ]]> tag .

.dp-highlighter
{
font-family: "Consolas", "Monaco", "Courier New", Courier, monospace;
font-size: 12px;
background-color: #E7E5DC;
width: 99%;
overflow: auto;
margin: 18px 0 18px 0 !important;
padding-top: 1px; /* adds a little border on top when controls are hidden */
}

/* clear styles */
.dp-highlighter ol,
.dp-highlighter ol li,
.dp-highlighter ol li span
{
margin: 0;
padding: 0;
border: none;
}

.dp-highlighter a,
.dp-highlighter a:hover
{
background: none;
border: none;
padding: 0;
margin: 0;
}

.dp-highlighter .bar
{
padding-left: 45px;
}

.dp-highlighter.collapsed .bar,
.dp-highlighter.nogutter .bar
{
padding-left: 0px;
}

.dp-highlighter ol
{
list-style: decimal; /* for ie */
background-color: #fff;
margin: 0px 0px 1px 45px !important; /* 1px bottom margin seems to fix occasional Firefox scrolling */
padding: 0px;
color: #5C5C5C;
}

.dp-highlighter.nogutter ol,
.dp-highlighter.nogutter ol li
{
list-style: none !important;
margin-left: 0px !important;
}

.dp-highlighter ol li,
.dp-highlighter .columns div
{
list-style: decimal-leading-zero; /* better look for others, override cascade from OL */
list-style-position: outside !important;
border-left: 3px solid #6CE26C;
background-color: #F8F8F8;
color: #5C5C5C;
padding: 0 3px 0 10px !important;
margin: 0 !important;
line-height: 14px;
}

.dp-highlighter.nogutter ol li,
.dp-highlighter.nogutter .columns div
{
border: 0;
}

.dp-highlighter .columns
{
background-color: #F8F8F8;
color: gray;
overflow: hidden;
width: 100%;
}

.dp-highlighter .columns div
{
padding-bottom: 5px;
}

.dp-highlighter ol li.alt
{
background-color: #FFF;
color: inherit;
}

.dp-highlighter ol li span
{
color: black;
background-color: inherit;
}

/* Adjust some properties when collapsed */

.dp-highlighter.collapsed ol
{
margin: 0px;
}

.dp-highlighter.collapsed ol li
{
display: none;
}

/* Additional modifications when in print-view */

.dp-highlighter.printing
{
border: none;
}

.dp-highlighter.printing .tools
{
display: none !important;
}

.dp-highlighter.printing li
{
display: list-item !important;
}

/* Styles for the tools */

.dp-highlighter .tools
{
padding: 3px 8px 3px 10px;
font: 9px Verdana, Geneva, Arial, Helvetica, sans-serif;
color: silver;
background-color: #f8f8f8;
padding-bottom: 10px;
border-left: 3px solid #6CE26C;
}

.dp-highlighter.nogutter .tools
{
border-left: 0;
}

.dp-highlighter.collapsed .tools
{
border-bottom: 0;
}

.dp-highlighter .tools a
{
font-size: 9px;
color: #a0a0a0;
background-color: inherit;
text-decoration: none;
margin-right: 10px;
}

.dp-highlighter .tools a:hover
{
color: red;
background-color: inherit;
text-decoration: underline;
}

/* About dialog styles */

.dp-about { background-color: #fff; color: #333; margin: 0px; padding: 0px; }
.dp-about table { width: 100%; height: 100%; font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; }
.dp-about td { padding: 10px; vertical-align: top; }
.dp-about .copy { border-bottom: 1px solid #ACA899; height: 95%; }
.dp-about .title { color: red; background-color: inherit; font-weight: bold; }
.dp-about .para { margin: 0 0 4px 0; }
.dp-about .footer { background-color: #ECEADB; color: #333; border-top: 1px solid #fff; text-align: right; }
.dp-about .close { font-size: 11px; font-family: Tahoma, Verdana, Arial, sans-serif !important; background-color: #ECEADB; color: #333; width: 60px; height: 22px; }

/* Language specific styles */

.dp-highlighter .comment, .dp-highlighter .comments { color: #008200; background-color: inherit; }
.dp-highlighter .string { color: blue; background-color: inherit; }
.dp-highlighter .keyword { color: #069; font-weight: bold; background-color: inherit; }
.dp-highlighter .preprocessor { color: gray; background-color: inherit; }

Note-Link of the above code:
http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css

5.Now Scroll down to where you see tag .

6.Copy below code and paste it just before the tag.

7.Now again Scroll down to where you see tag .

8.Copy below code and paste it just before the tag .

9.Now Click on "Save Templates".

10.Whenever you have to write some codes in your posts, click on "Edit Html" tab of your post editor and write the codes between the following tags :

...Your html-escaped code goes here...

When you publish your post, your codes will look like this :