Threaded Comments for Blogger With Awesome Style

A month ago, Blogger released threaded comment system which is greatest feature so far. It allow users to reply to certain comment and make thread like structure of comment. But Threaded Commenting feature came up with some certain bugs like users directly landing up to the comment section after once complete load of a page.

Some people might have noticed that the 'Reply' button of threaded comment is not working. For that, revert widgets temples to default and re follow the given instructions in this post.

Playing with CSS and making your blog cool is hard task to do. Considering this, I have created CSS specially designed for threaded comment system of Blogger. You can watch the demo yourself in this blog (in the comment section). If you like that comment section style the follow the following instructions to use it in your Blogger blog.

Threaded Comment with Cool Layout Style
First you need to enabled threaded comment system. (If you already enabled, then please ignore this step).

Go to Edit HTML page and find the following line of code:

Replace the above code with the following:

Please note: If you found 2 codes lines of given spinet, then you have to replace both.

Now search for ]]> and just above that paste the following CSS codes:

.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;

border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0099FF', endColorstr='#009999');

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#009999', endColorstr='#0099FF');
}

.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0066FF', endColorstr='#0099CC');
}

.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}

.comments .comments-content .user a {
  color: #444;
}

.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}

.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}

.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}

.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}

Now save the template and your are done!

Go to one of your page which have comment and see if it works. Enjoy using cool threaded comment system.

Please let me know if you got any problem.

View This Article / Download>>

6 Best Free Blogger Templates With jQuery Content Slider

This is a guest post contributed by Ammar Ali



 One of the popular features of Blogger Blogspot Templates is the Featured Post Slider or Slideshow Carousal. Today I was searching on internet and best free blogger templates. SO I get and idea of presenting some of them with best jquery content slider and much more features. Here are 5 Best Free Blogger Templates With jQuery Content Slider All the Sliders are created with jQuery which allows some cool features such as the transitions (The effect between each slide).

I had placed all link to download and live demo in image. Click On The Screenshot Of Each Template For The Demo and Download Details.

Glow - Free Premium Blogger Template

Glow has a beautifully constructed Featured Slider Slideshow.The slides are visible as thumbnails on the left of the full size slider.The template also has a glowing two column magazine design with right sidebar.

Oracle - Advanced Magazine Blogger Template

Oracle has a beautifully fitted Featured Slider, Image Slideshow with the sides fading away.The slides auto scroll with a manual scroll option.The template also has a two column magazine design with a left sidebar.

Nyke - Magazine Blogger Template

The Featured Slider, Image Slideshow has a very unique rounded bottom and a number of coll transitions between images.The template has a two column layout with right sidebar.

MoonLight - Clean Magazine Blogger Template

MoonLight - Clean Magazine Blogger TemplateThe Featured Slider, Picture Slideshow on Moonlight has a more simple design but fits neatly above the posts with auto scroll and manual scroll options.The template has a minimalist design with two columns and a right sidebar.

 Calenotis - Photographers Magazine Blogger Template

Calenotis has a beautiful full width Featured Slider Slideshow that has a 3D design.The slides are on auto scroll with a number of different transitions.The template also has a professional magazine design with a two column right sidebar layout.

Flash News Blogger Template

Flash news was my last choice (but not least). I found it is very professional blogger template but HackTutors readers haven't covered too much interest on it. Its stylish header may attract your visitor.

That's all.Hope you like my collections. Also check out more blogger templates by Hacktutors.

View This Article / Download>>

Easy Favicon Implementation in Blogger

Blogger has released another new great feature. This time, the feature allows us to add custom favicon in our blogs. However, we've already got the custom codes in which we can add favicons to Blogger blog adding some lines of code in the template. We're quite little bit fast than Blogger.

Its simple easy to use Blogger's Favicon feature. Just follow the following steps:

Step 1

Login to Blogger > Design > Page Element. In the middle of the screen you'll see new 'Favcion' text. Just click 'Edit' button next to it.

Step 2

Now you have to upload your favcion. If you don't have favcion already then you have to create it first. Just use Photoshop or search any suitable icons on the web. I recommend 16x16px size favicon.

Step 3

Once you got it, use click Upload button and choose your favcion file. Once you you, click Save button.

Step 4

Finally, refresh your blog and you'll see new little favicon in your address bar or tab of the browser.

Please note that you'll not have to change the format of favcion. Blogging will automatically do that for you. This is even great feature. From now, if you wanted to change favcion you'll not have to touch any codes.

Enjoy using Blogger!

View This Article / Download>>

Blogger will Introduce Awesome Interfaces in 2011 Year!

As a regular Blogger users, we know Blogger released many awesome features in the year 2010. According to blogger buzz, 2010 was a greatest year where they've done many development works for Blogger.

Now, in 2011 Blogger will introduce more awesome interfaces unlike other features. Check out the follow video to get quick view of new Blogger interfaces

Here are some new interfaces which Blogger will introduce:

Post Editor

New post editor seems very attractive and its just like a Microsoft word.

New Dashboard

New blogger dashboard looks like WordPress dashboard.

Content Discovery

Content Discovery feature works as a related content widget.

You can expect these features very soon! What do you think, what must be added more in Blogger?

View This Article / Download>>

Blogger Added New languages

In default, we use English language for our blog as it is most used international language. Recently, blogger had upgrade with 9 basic languages: Amharic, Arabic, Bengali, Greek, Persian, Gujarati, Kannada, Hindi, Malayalam, Marathi, Nepali, Punjabi, Russian, Sanskrit, Serbian, Tamil, Telugu, Tigrinya, and Urdu.

How to Change the Language of your blog?
To change the language, just go to Settings > Basic. Scroll down util you see Enable transliteration? option and select your desired language. See below:

Click Save Settings button.

I'm quite happy as it has added Nepali language although I'm not using it as primary language in Hack Tutors.

View This Article / Download>>

Blogger Buzz Released New Comments System

The official Blogger Blog has announced new comments system on blogspot blogs. Blogger has made two new improvements on comments system: Now, you can view your all comments at one place and you can easily filter the spam comments.

To prevent get free of spam comment Blogger integrated Google’s spam filtering technologies into the Blogger comment system. To view spam filtering feature, Go to Blogger Draft and the new Comment tab that blogger have recently added. You can see the Spam the sub-tab that show all the spam comment that it suspect to be spam.


The comments on the Spam box are not visible to your readers. You can permanently delete Spam suspected comments by selecting then and click Delete button. If you found the comments having to spam, you can select them and click Not Spam button. When you choose not spam comments, that comments will automatically publish on your blog.

This amazing new spam detecting feature work as strong spam comment detector.

Another new Comment system is Comment Inbox

Blogger has created the new comment inbox where you can see all of your blog published comments on one page. The Comments | Published provides a similar views as you email inbox. It is easy to view all new and old comments at any time.

In that page you can manage your all of the published comments of your blog. When you select one or more comments and click Spam, it automatically delete selected comments from your blog. You can also Delete comments for editorial reasons or just Remove Content to leave a record of the comment. By doing this, you previous comment record will remain appears on your blog.

The Comment Moderation tab also moved in the Comments main tab. Now, it will be very easy to delete spam comments of your blog where blogger automatically detects all spam comment and you can delete it by one click! Also you can view all the existing comments of your blog at one page.

Blogger is improving its personality and bringing the new interfaces among us.

See more Blogger Feature:

• Blogger Launched 'Share Button' Feature Officially
• Get your Complete Blog Stats in your Blogger Dashboard
• Blogger Posting Preview now in Main Page and Blogger New Video Player
• Blogger post preview before posting, now available!
• Blogger launched new Template Designer feature

We already like this blogger new comment interface, what about you?

View This Article / Download>>

Blogger Launched 'Share Button' Feature Officially

Day by day Blogger is announcing the new feature that we have lately discussed about it. However, Google Blogger is improving its features and working continuously for more great services to make Blogger more professional and make large number of registered members. We are satisfied with all the new feature of Blogger.

To make Blogger blog more socialize, Official Blogger has announced new 'Share Button' feature which was not available in Blogger's main page. This new feature have bookmarking buttons that we can share our content to all socializer. The 3 main social networking sites i.e. Facebook, Twitter and Google Buzz has taken part to share all blog content of blogger blog. There is also the link for Gmail and Blogger to share it.


How to embed this feature to your blogger blog


To embed this feature for your blog, Log on to your Blogger account > Go to Design > Click edit link of your blog post layout.

Check the option 'Show Share Button'.

Now, you can see this bookmarking feature to all of the existing posts of your blog.

Blogger is calling for your help for more development works. Don't miss this chance to send positive feedback. However, Blogger already announced many amazing features as you say.

See the new features of blogger which is lately announced:

• Blogger Posting Preview now in Main Page and Blogger New Video Player
• Get your Complete Blog Stats in your Blogger Dashboard
• Blogger launched new Template Designer feature
• Avatar in each Comments of Blogger Blog

Enjoy with Blogger! :) Feel free to share your opinion about this feature.

View This Article / Download>>

Get your Complete Blog Stats in your Blogger Dashboard

Blogger in Draft has just annouced another new amazing feature. The new Blogger Stats feature supports for the blog tracking system where you can track the daily, weekly and monthly stats of your blog. The new Blogger Stats and analyzes your visitor traffic in near-real-time. Now, you can check your blog statistics in details and every informatics views.

From now, you don't have to use Google Analytic or any tracking system to analyze your blog stats because this feature works better than other trackers. You can track the stats of each and every individual post of your blog which are getting most page views. Also, you can track your back links, how many click is it getting and referred to your blog. You can view your traffic source where your mostly visitors comes from.


You can track every popular and most searched keyword of your blog and how many pageviews generated through that keywords. Also, you can check your blog stats in short graph in the Overview page.

This new feature also support for the detail information of your blog visitor what kind of browser are they using and which windows they are using. Not only that, You can view the map from Audience page to get the information from which country your visitor mostly coming from.

Currently, this feature is only available in Blogger draft. To access this feature to your Blogger draft, Log on to  draft.blogger.com You can see the new Stats link on the right.

And start observing your blog stats and Enjoy! Share your voice via comment.

View This Article / Download>>