Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
RealcomBiz
Pin It

Add CSS Speech Bubble To New Blogger Threaded Comments

This another great way of styling new blogger threaded comments with cool CSS speech bubble, in my previous post i have also discuss on how to customize blogger threaded comment with cool style and color in which they were customize using CSS.
The original version of the css code was built by paul crowe and fully customize by realcombiz, so in other for you to style your new blogger threaded comments with speech bubble, simply follow the few steps below.



How To Add The Speech Bubble To Threaded Comments
  • Go to your blogger dashboard
  • Click on "Design" > "Edit HTML" > back up your template
  • Use ctrl F to find ]]></b:skin> and paste the following code above/before it
/* Speech Bubble For Blogger Threaded Comments By www.realcombiz.com */
.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}
.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}
.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#ffffff !important;text-align:center;text-decoration:none;background:#bc0000;border:1px solid #bc0000;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}
.comments .comments-content .inline-thread{padding:0}
.comments .comments-content .comment-thread{margin:8px 0}
.comments .comments-content .comment-thread:empty{display:none}
.comment-replies{margin-top:1em;margin-left:40px;background:#fff}
.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}
.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:normal}
.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}
.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}
.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}
.comment-content{margin:0 0 8px;padding:0 5px}
.comment-header{font-size:18px;background-color:#464444;border-bottom:1px solid #e3e3e3;padding:5px}
.comments .comments-content .owner-actions{position:absolute;right:0;top:0}
.comments .comments-replybox{border:none;height:230px;width:100%}
.comments .comment-replybox-thread{margin-top:0}
.comments .comment-replybox-single{margin-top:5px;margin-left:48px}
.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:0}
.comments .comments-content .loadmore.loaded{max-height:0;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}
.avatar-image-container{background:url(http://3.bp.blogspot.com/-6ewJDBHiFmY/UBLHyrJJWtI/AAAAAAAAAy8/I5vw5-XSE_8/s1600/rb+arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}
.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}
.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}
@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}
/* Speech Bubble For Blogger Threaded Comments By www.realcombiz.com */
  • To change the background color of the reply and delete buttons, simply edit #bc0000
  • Edit #464444 if you which to change the background color of the comments header
  • Click "SAVE TEMPLATE" when you are done with your editing.
 That's all, share this article with friends/followers, and subscribe now for you to receive all our latest posts update directly into your email.



Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

13 comments : Post Yours! Read Comment Policy ▼
PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Nice Info, acctually i using Wordpress Self Hosting, but this is also important to know, :-)

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This worked great for me.
    Could you tell me which line of code to modify to increase the amount of space (margin) between each comment? Thanks!

    ReplyDelete
  5. acctually i using Wordpress Self Hosting, but this is also important to know Ideologi pancasila...

    ReplyDelete
  6. Wordpress Self Hosting Jersey Indonesia, but this is also important to know

    ReplyDelete
  7. Nice post. I just started using columns recently and I really like the results. You can use it with multiple paragraphs and just wrap it in a div. And with a little jquery you can control the number of columns based on screen size. It works grate and if people are still using EI they can get the normal single paragraphs they are use to.
    web development company uae

    ReplyDelete
  8. If you are planning to make blog and not confident about contents we are providing custom research papers services into affordable prices with 100% work satisfaction and guarantee.

    ReplyDelete

About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger