Fancy Blogger Threaded Comments

Blogger rib comments square measure everyplace currently and its time you design the fashion and format of your comments. an honest journal commenting system facilitates to create a powerful audience and help readers to interact a lot of into discussion. 


blogger threaded comments

















Customize Your Comments Format!


Here we are going to override your default comment designs with our custom CSS code. we are going to customise nearly everything from profile avatar pictures to reply and delete links. All i need from you is careful implementation of the simple steps below:

  1. Go To Blogger > guide
  2. Backup your guide - you want to keep a backup of your copy if encase you needed to undo steps
  3. Search for this piece of code:


<b:includable id='threaded_comment_css'>
   Click the highlighted region to expand its code. You will now need to replace all the CSS code inside <style>   and </style>   with the following styles:
   
/* Fancy Blogger Threaded Comments by TheTechWar-Z(thetechwarz.blogspot.com)

 starts */                
.comment-thread ol { 
                counter-reset: twz-comments;
 
}
 
            .comment-thread li:before {
 
            content: &quot;\25C4&quot;counter(twz-comments) &quot;\25BA&quot;;
 
            counter-increment: twz-comments;
 
            font-size: 16px;
 
            position: relative;
 
            top: 100px;
 
            font-weight: bold;
 
            font-family: arial, georgia;
 
            color: rgb(199, 199, 199);
 
            left: -110px;
 
            padding: 4px 8px;
} 
            .comment-thread ol ol {
 
            counter-reset: twz-comments-sub;
 
              padding-top: 20px!important;
 
              margin-bottom: 25px;
 
}
 
            .comment-thread li li:before {
 
            content: counter(twz-comments) &quot;.&quot; counter(twz-comments-sub);
 
            counter-increment: twz-comments-sub;
 
            font-size: 14px;
 
            position: relative;
 
            top: 100px;
 
                left: -80px;
 
}
 
                 
 
          .comments .comments-content .comment-thread ol ol {
 
                padding: 0px 10px 40px 40px;
 
                border: 1px solid #ddd;
 
                box-shadow: 3px 4px 9px rgb(218, 218, 218);
 
                margin-top: 10px;
 
                  }
 
                .comments .comments-content .comment-thread ol ol li {
 
                    margin-bottom: -40px;
 
}
 
                 
 
                  .comments {
 
                    clear: both;
 
                    margin-top: 10px;
 
                    margin-bottom: 0px;
 
                    line-height: 1em; border:0px !important;
 
                  }
 
                  .comments .comments-content {
 
                    font-size: 12px;
 
                    margin-bottom: 16px;
 
                    font-family: Verdana;
 
                    font-weight: normal;
 
                    text-align:left;
 
                    line-height: 1.4em;
 
                    width:88%; margin-left:70px;
 
                  }
                    .comment-form { 
                    max-width: 100%;
 
                    clear: both;
 
}
 
                 
 
                  .comments .comments-content .comment-thread ol li {
 
                    margin-top: -30px;
 
}
 
                 
 
                 
 
                  .comments .comment .comment-actions a {
 
                 
 
                    cursor: pointer;
 
                    color: rgb(46, 46, 46);
 
                    padding: 2px 3px 2px 30px;
 
                    Position: RElative;
 
                    -moz-border-radius: 6px;
 
                    -webkit-border-radius: 6px;
 
                    border-radius: 6px;
 
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
 
                    font-size: 12px;
 
                    font-weight: 700;
 
                    margin-right: 15px;
 
                    background: url(
http://3.bp.blogspot.com/-IRuG_QnOUaM/UakmzAR_JRI/AAAAAAAAJxA/cfgolzZifRE/s1600/reply.png) no-repeat 9px 0px; 
                    float:right;
 
                  }
 
                 
 
                
 
               
 
                 
 
                  .comments .comment .comment-actions a:hover {
 
                    text-decoration: underline;
 
                   
 
                  }
 
                  .comments .comments-content .comment-thread ol {
 
                    list-style-type: none;
 
                    padding: 0;
 
                    text-align: none;
 
                  }
 
                 
 
                  .comments .comments-content .comment-thread ol li {
 
                  border-bottom: 0px dashed rgb(196, 196, 196);
 
                    margin-bottom:25px
 
                  }
 
                 
 
                  .comments .comments-content .inline-thread {
 
                    padding: 0.5em 1em;
 
                  }
 
                  .comments .comments-content .comment-thread {
 
                    margin: 8px 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 {
 
                    margin-bottom:16px;
 
                    padding-bottom:8px;
 
                  }
 
                  .comments .comments-content .comment:first-child {
 
                    padding-top:16px;
 
                  }
 
                  .comments .comments-content .comment:last-child {
 
                    border:0px;
 
                    padding-bottom:0;
 
                  }
 
                  .comments .comments-content .comment-body {
 
                    position:relative;
 
                  }
 
                  .comments .comments-content .user {
 
                   
 
                    font-weight: 700;
 
                     font-size: 14px;
 
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
 
                    color: #333!important;
 
                  }
 
               
 
                 
 
                  .comments .comments-content .icon.blog-author{
 
                    position: absolute;
 
                    top: 52px;
 
                    right: -36px;
 
                    margin: 5px 0px 0px 0px !important;
 
                    background: url(&quot;
http://4.bp.blogspot.com/-9PqmPwn5OTc/UakmGeTAJ1I/AAAAAAAAJw4/fv8iqn6sVOo/s320/aDMIN.png&quot;) no-repeat scroll 0% 0% transparent; 
                    width: 90px !important;
 
                    height: 90px !important; }
 
                 
 
                 
 
                  .comments .comments-content .datetime, .comments .comments-content .datetime a {
 
                    margin:0px;
 
                    display: block;
 
                    line-height: 30px!important;
 
                    font: italic 11px georgia;
 
                    width:180px;
 
                  }
 
                 
 
                  .comments .comments-content .datetime a {
 
                    text-decoration:none;
 
                  }
 
                  .comments .comments-content .comment-header
 
                  {
 
                    margin:0 0 15px 10px;
 
                  }
 
                 
 
                  .comments .comments-content .comment-content {
 
                    margin: 0 0 10px -50px;
 
                    }
 
                 
 
                  .comment-header a {
 
                    color:#333;
 
                  }
 
                 
 
                  .comment-header a:hover {
 
                    color:#666;
 
                  }
 
                 
 
                 
 
                  .comments .comments-content .comment-content {
 
                    text-align:justify;
 
                    text-align: justify;
 
                    font-family: &#39;Open Sans Condensed&#39;, sans-serif;
 
                    font-size: 13px;
 
                    border: 1px solid #ddd;
 
                    padding: 20px;
 
                  }
 
                  .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 .continue {
 
                    cursor: pointer;
 
                  }
 
                  .comments .continue a {
 
                    display: none;
 
                    padding: 0.5em;
 
                    font-weight: bold;
 
                  }
 
                  .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(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
 
                  }
 
                  .comments .thread-collapsed .thread-arrow {
 
                    background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
 
                  }
 
                  .comments .avatar-image-container {
 
                    float: left;
 
                    width: 36px;
 
                    max-height: 36px;
 
                    margin-top: 15px;
 
                    overflow: hidden;
 
                  }
 
                  .comments .avatar-image-container img {
 
                    width: 36px;
 
                     box-shadow: 2px 2px 0px rgba(0,0,0,0.13)
 
                  }
 
                  .comments .comment-block {
 
                    margin-left: 48px;
 
                    position: relative;
 
                  }
 
                 
 
                  .comments .comments-content .comment-replies {
 
                        margin-top: 3em;
 
                        margin-left: 40px;
 
                        font-size: 12px;
 
                            }
 
                 
 
                  .comments .comments-content .comment-replies a {
 
                    color: #333;
 
                        }
/* For Animating Comment Header*/
.trigger { 
margin-top: 3px;
 
font-weight: bold;
 
color: #A1A1A1;
 
cursor: pointer;
 
float: right;
 
font-size: 12px;
 
margin-right: 10px;
 
}
 
.triggeractive {
 
color:rgb(255, 5, 5);
 
}
 
.toggle_container {
 
overflow: hidden;
 
clear: both;
 
font-size: 12px;
 
font-weight: normal;
 
line-height: 20px;
 
margin-top: 10px;
 
}

                  
 
                  
 
                  /* Responsive styles. */
 
                  @media screen and (max-device-width: 480px) {
 
                    .comments .comments-content .comment-replies {
 
                      margin-left: 0;
 
                    }
 
                  }
/* Fancy Blogger Threaded Comments by TheTechWar-Z(thetechwarz.blogspot.com)

  ENDS*/



Make these Customizations:

  • To be honest you may got to use browser inspector to extra service all the missing gaps in alignment and styling. Since each guide is coded otherwise thus there'll be slight distinction in however this style seems on your journal. therefore use Chrome and its examine part to good things.
  • The yellow highlighted components represent the hex code for the 2 arrows that surround the Comment Counter range. you'll modification this if you recognize a way to edit the content property else leave it default.
  • The brown highlighted code represents the icon next to reply and delete link. you'll replace it along with your own custom image link if you want.
  • The inexperienced highlighted code represents the Admin Ribbon. you'll modification it conjointly if you want
  • Leave all alternative designs default as a result of they're going to mix a light-weight background terribly nicely unless your journal includes a black background.


4. Next rummage around for this #comments h4   and replace this CSS ID fully with this one:

#comments h4{
color: #4E555A; 
font-size: 25px;
 
font-family: 'Open Sans Condensed', sans-serif!important;
 
line-height: 1.6em !important;
 
font-weight: bold;
 
margin: 20px 0 50px 0px;
 
padding: 5px 0 5px 55px;
 
background: url(http://1.bp.blogspot.com/-tZR7Njp97jo/UalQRiCT3UI/AAAAAAAAJxg/ba4PGdYsHj4/s1600/mbt-postcomment.png) no-repeat 5px 10px;
 
text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.13);
 
border: 2px dashed #DDD;
 
border-radius: 4px;
}
5.  Save your template and you are half done!

Design Comment Header


Nested comments uses AN iframe comment box that cannot be tailor-made unless we tend to use JQuery. I thus removed the message that seems at the highest of comment box that show a message higher than the comment box. we tend to wont to add a message higher than kind by getting to Blogger &gt; Posts and comments. I removed that choice and introduced manner|a far} a lot of versatile way of warning guests regarding the comment policy.


How it works?

Do you guys keep in mind the Expand/collapse practicality we tend to created for concealing the comment box? we are going to utilize the precise same script here and make a toggle tab for comment policy.

Be careful here:
  1. Inside your template search for:
<b:if cond='data:post.numComments == 1'>
Now this code will appear a total 2 times inside your template, having the exact similar format as the code below:
Tip: this code will appear once inside <b:includable id='comments' var='post'> and the next time inside <b:includable id='threaded_comments' var='post'>
<h4> 
                   <b:if cond='data:post.numComments == 1'>
 
                     1
 
                     <data:commentLabel/>
 
                     :
 
                     <b:else/>
 
                     <data:post.numComments/>
 
                     <data:commentLabelPlural/>
 
                     :
 
                   </b:if>
 

</h4>

If your code matches the exact code shown above then just above </h4> paste the following HTML:

<a href='#comment-form'>Post Yours!</a> <span class='trigger'>Read Comment Policy &#9660;</span> 
<div class='toggle_container'>
 
<div class='block'>
<font style='color:rgb(255, 0, 0); font-weight:bold;'>PLEASE NOTE:</font> 
 
 
  <br/>
 
<b><u>We have Zero Tolerance to Spam.</u></b>  Chessy Comments and Comments with <b>Links</b>  will be deleted immediately upon our review.
</div> 
</div>
You can replace the complete yellow highlighted give up any message that you simply would really like to show to your readers. you'll add links, images, even a video message! something you would like to guide your guests to avoid spam.

Make the Comment Header Animate:

When you click the comment Policy link, the Message slides down. after you click it back it collapses and hides the message. we are going to use Jquery slideToggle perform to use this result. I even have conjointly enclosed the Google link to "Open Sans condensed" font to vogue the fonts.

Follow these steps:
  1. Paste the following code just above </head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>

$(document).ready(function(){

    $(&quot;.toggle_container&quot;).hide();
 
 
 
    $(&quot;.trigger&quot;).click(function(){
 
        $(this).toggleClass(&quot;triggeractive&quot;).next().slideToggle(&quot;slow&quot;);
 
    });
 
 
 
});

</script>
Don't add the bolded code if you have already added JQuery library source link in your template.
  2.  Save your template and you are all done!

I Hope this data that I shared was useful to you, if you liked the post, please share.


If you've got any queries, you're most welcome to raise, simply leave a comment below and that i can surely answer your queries.



74 comments:

  1. Awesome work.Just wished to drop a comment and say i'm new your journal and adore what i'm reading.Thanks for the share

    ReplyDelete
  2. Great job. This is well judged and results in a healthy way. Great knock. Happy.

    ReplyDelete
  3. Awesome work.Just wished to drop a comment and say i'm new your journal and adore what i'm reading.Thanks for the share

    ReplyDelete
  4. Great job. This is well judged and results in a healthy way. Great knock. Happy.

    ReplyDelete
  5. Awesome work.Just wished to drop a comment and say i'm new your journal and adore what i'm reading.Thanks for the share

    ReplyDelete
  6. This is a great post. I like this topic.This site has lots of advantage.I found many interesting things from this site. It helps me in many ways.Thanks for posting this again. 토토


    ReplyDelete
  7. Can add up your article, believe that there is something you can add, visit the site 토토

    ReplyDelete
  8. 카지노사이트 This blog is a very valuable blog.I was looking the same type of post here.Thanks for it and carry on it

    ReplyDelete
  9. his article is very effective and valuable. I am very glad to read your blog. I hope you will soon share your next post about this discussion. Thanks for sharing and keep sharing 바카라사이트

    ReplyDelete
  10. 바카라사이트 these websites are really needed, you can learn a lot.

    ReplyDelete
  11. Having read this I believed it was extremely informative. I appreciate you finding the time and energy to put this content together. 파워볼게임

    ReplyDelete
  12. Thanks for sharing This is really inspiring and I love to read more about this. 경마

    ReplyDelete
  13. Like!! I blog quite often and I genuinely thank you for your information. The article has truly peaked my interest.
    슬롯머신

    ReplyDelete
  14. I’m really digging the template/theme of this blog. It’s simple, yet effective. A lot of times it’s very hard to get that “perfect balance” between usability and appearance. 토토

    ReplyDelete
  15. In the meantime, I wondered why I couldn't think of the answer to this simple problem like this. Your article is an article that gives the answer to all the content I've been contemplating. 메이저토토사이트

    ReplyDelete
  16. It has fully emerged to crown Singapore's southern shores and undoubtedly placed her on the global map of residential landmarks. I still scored the more points than I ever have in a season for GS. I think you would be hard pressed to find somebody with the same consistency I have had over the years so I am happy with that. 메이저토토사이트

    ReplyDelete
  17. I all the time used to read article in news papers but now as I am a user of web therefore from now I am using net for articles or
    reviews, thanks to web. 스포츠토토

    ReplyDelete
  18. 스포츠토토 I am sure this article has touched all the internet people, its really really fastidious article on building up new website.

    ReplyDelete
  19. 바카라사이트
    Your style is so unique compared to other folks I have read stuff from.
    Many thanks for posting when you’ve got the opportunity, Guess I’ll just bookmark this page.

    ReplyDelete
  20. Wonderful, what a web site it is! This web site presents
    useful information to us, keep it up. 온라인카지노사이트

    ReplyDelete
  21. You made some good points there. I did a Google search about the topic and found most people will believe your blog. 먹튀검증

    ReplyDelete
  22. Interesting blog! Is your theme custom made or did you download it from somewhere? A design like yours with a few simple adjustments would really make my blog shine. Please let me know where you got your design. Many thanks
    파워볼사이트

    ReplyDelete
  23. We are looking for a lot of data on this item. In the meantime, this is the perfect article I was looking for . Please post a lot about items related to 바카라사이트!!! I am waiting for your article. And when you are having difficulty writing articles, I think you can get a lot of help by visiting my .

    ReplyDelete
  24. I visited last Monday, and in the meantime, I came back in baccarat anticipation that there might be other articles related to I know there is no regret and leave a comment. Your related articles are very good, keep going!!

    ReplyDelete
  25. all the technical solutions and staff we need for operators who provide world
    kingkong112233
    에볼루션-카지노

    ReplyDelete
  26. My curiosity was solved by looking at your writing. Your writing was helpful to me. 룰렛사이트 I want to help you too.

    ReplyDelete
  27. I've been troubled for several days with this topic. 바카라사이트, But by chance looking at your post solved my problem! I will leave my blog, so when would you like to visit it?

    ReplyDelete
  28. From one day, I noticed that many people post a lot of articles related to 온라인슬롯 . Among them, I think your article is the best among them!!I

    ReplyDelete
  29. I'm looking for a lot of data on this topic. The article I've been looking for in the meantime is the perfect article. Please visit my site for more complete articles with him! 메이저검증

    ReplyDelete
  30. Of course, your article is good enough, 슬롯사이트 but I thought it would be much better to see professional photos and videos together. There are articles and photos on these topics on my homepage, so please visit and share your opinions.

    ReplyDelete
  31. I was looking for another article by chance and found your article 룰렛 I am writing on this topic, so I think it will help a lot. I leave my blog address below. Please visit once.

    ReplyDelete
  32. I accidentally searched and visited your site. I still saw several posts during my visit, but the text was neat and readable. I will quote this post and post it on my blog. Would you like to visit my blog later? 토토사이트순위

    ReplyDelete
  33. An intriguing discussion may be worth comment. I’m sure you should write much more about this topic, may well be described as a taboo subject but generally folks are too little to chat on such topics. An additional. Cheers 메이저토토사이트

    ReplyDelete
  34. I finally found what I was looking for! I'm so happy. 안전한놀이터 Your article is what I've been looking for for a long time. I'm happy to find you like this. Could you visit my website if you have time? I'm sure you'll find a post of interest that you'll find interesting.

    ReplyDelete
  35. 바카라사이트
    Nice post. I learn something more challenging on different blogs everyday. It will always be stimulating to read content from other writers and practice a little something from their store. I?d prefer to use some with the content on my blog whether you don?t mind. Natually I?ll give you a link on your web blog. Thanks for sharing.

    ReplyDelete
  36. 스포츠토토 Thanks for sharing this information. I really like your blog post very much. You have really shared a informative and interesting blog post with people.

    ReplyDelete
  37. 스포츠토토티비 whoah this blog is wonderful i really like studying your
    posts. Stay up the great work! You realize, lots of individuals are searching around for this information, you can aid them greatly.

    ReplyDelete
  38. 토토 HI. Please visit our interesting website.

    ReplyDelete
  39. Really appreciate you sharing this blog.Much thanks again. Want more.
    토토사이트링크

    ReplyDelete
  40. That's why it's very hard to find, but I'm very fortunate to read your writing. 스포츠토토

    ReplyDelete
  41. As I website possessor I believe the content material here is rattling great , appreciate it for your hard work. You should keep it up! If anyone looking for safety playground for online gaming, come here: 바카라사이트


    ReplyDelete
  42. I will bookmark your blog and keep checking for new information about once per week. 바카라사이트

    ReplyDelete
  43. I am glad to discover this page. I have to thank you for the time I spent on this especially great reading !! 온라인카지노

    ReplyDelete
  44. I finally found what I was looking for! I'm so happy. 사설토토사이트 Your article is what I've been looking for for a long time. I'm happy to find you like this. Could you visit my website if you have time? I'm sure you'll find a post of interest that you'll find interesting.

    ReplyDelete
  45. Hey what a brilliant post I have come across and believe me I have been searching out for this similar kind of post for past a week and hardly came across this. Thank you very much and will look for more postings from you. 먹튀검증 and I am very happy to see your post just in time and it was a great help. Thank you ! Leave your blog address below. Please visit me anytime!

    ReplyDelete
  46. 카지노사이트 I finally found great post here. Thanks for the information. Please keep sharing more articles.

    ReplyDelete
  47. Your blog is really nice. Its sound really good. 바카라사이트

    ReplyDelete
  48. 카지노사이트 Well I truly enjoyed reading it. This subject offered by you is very helpful and accurate.

    ReplyDelete
  49. 바카라사이트 Your article is an article that gives the answer to all the content I've been contemplating.

    ReplyDelete
  50. Your article is an article that gives the answer to all the content I've been contemplating.

    ReplyDelete
  51. Your blog is really nice. Its sound really good.

    ReplyDelete
  52. I finally found great post here. Thanks for the information. Please keep sharing more articles.

    ReplyDelete
  53. Wow, I found your content unique, you are doing a great job, just keep giving such information, we love to read the blog. - Massey 245

    ReplyDelete
  54. Well, reading that was really enjoyable. You have provided information that is both highly accurate and helpful.

    Rear Tractor Tyre

    ReplyDelete
  55. I appreciate you giving this knowledge. I read your article and find myself compelled to read it completely.

    Good Year tractor tyres

    ReplyDelete
  56. Thank you for sharing this information; your article is excellent and easy to read.

    Tractor

    ReplyDelete
  57. all the technicalss AUGUST1983Y solutions and staff we need for 에볼루션알가격

    ReplyDelete
  58. This information will always help everyone to gain knowledge. So please always share your valuable information. Thanks for giving good information. - Powertrac euro 50

    ReplyDelete
  59. Thanks for the publish your blog for free.. The info is really good.
    와이즈토토

    ReplyDelete
  60. I read this article. 바카라사이트닷컴 I think You put a lot of effort to create this article. I appreciate your work.

    ReplyDelete
  61. Great article with excellent idea! 카지노사이트 Thank you for such a valuable article. I really appreciate for this great information..

    ReplyDelete