Friday, February 17, 2012
Might you have already known, blogger recently has announced a new service "Threaded Comment Blogger" for their loyal users (am i included in this category?). This is what bloggers expected to come since a long time ago. This threaded comment is standing for dynamic view and so it has a fairly good look, i guarantee you'll fall in love if you'd like to use this service. By using this service your replay comment will now be embeded just on the column whose comment you replayed. But, you'll be blown to hear this: beyond that good news i got a bad news too to tell you, as this service stands for dinamic view which it loads image to show as comment form, well for you who have added emoticon into comment section your emoticon won't show up any longer. I think it is because of the image that this threaded comment loads, but i'm not a hundred percen sure if it's realy that. I mean, it could even be caused by another problem, right?

And since i rather preffer to use my old threaded comment cuz i love emoticon more than this new threaded comment. Some what i don't think that my old threaded comment is realy bad to be used. The difference betwen, is just that my old threaded comment doesn't embed replay comment on the same column with the comment replayed, isn't it the only difference betwen?

Well, what about you, emoticon or this new threaded comment?. Both? Fortunately, you can't have them both at once. -

And by the way you can guys go to my previous post about threaded comment if you want to do so. Here it is: How To Create Threaded Comment On Blogger Blog?. Or about emoticon: How To Add Smiley Emoticon Into Comment Section On Blogger Without Eror?.

Now Let's Talk About How To Implement This New Threaded Comment Service On Your Blog

1. Go to your blogger.
2. Design page.
3. Edit Html.
4. Check the Expand Widget Template box to load the entire codes in your template.
5. Copy and save the entire codes in the text box for anticipation of making mistake when you modify your template. Or simply download the codes through Download Full Template
6. Find the following code in your template. There are 3 of this code in my template, and it might apply in your template as well: < b:include data='post' name='comments'/>. Just replace the code in red with the following: threaded_comments. Well the code should look like this: < b:include data='post' name='threaded_comments'/>. Replace all three codes that you found.
7. Now find the following code: < body>. Copy and paste the code below right above that code.

To be the lesser arrangement the above code looks like the below:

< b:includable id='threaded_comment_css'>
< style >
< ! - - threaded comment blogger - - >
.comments { clear:both; margin-top:10px 0 0; line-height:1em;}
.comments .comments-content{font-size:12px;margin-bottom:16px;font-weight:normal;text-align:left;line-height:1.4em;}
.comments .comment .comment-actionsa{display:inline-block;margin:0;padding:1px6px;border:1px solid #C4C4C4;border-top-color:#E4E4E4;border-left-color:#E4E4E4;color:#424242;text-align:center;text-shadow:0 1px white;text-decoration:none;-webkit-border-radiu5E5E5100%);font:11px/18pxsans-serif;padding:2px8px;margin-right:10px;}
.comments .comment .comment-actionsa:hover{text-decoration:none;background:#fff;border:1pxsolid#5AB1E2;}
.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none;}
.comments .comments-content.inline-thread{padding:0.5em1em;}
.comments .comments-content .comment-thread{margin:8px0px;}
.comments .comments-content .comment-thread:empty{display:none;}
.comments .comments-content .comment-replies{margin-top:1em;margin-left:40px;font-size:12px;background:#EBF5FE;}
.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-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:#2D5E7B;font-size:14px;font-weight:bold;text-decoration:none;}
.comments .comments-content .icon. blog-author{width:18px;height:18px;display:inline-block;margin:0 0 - 4 6px;}
.comments .comments-content .datetime{color:#999999;float:right;font-size:11px;text-decoration:none;}
.comments .comments-content, .comments .comments-content .comment-content{margin:0 0 8px;}
.comment-header{background-color:#F4F4F4;border:thin solid #E6E6E6;margin-bottom:5px;padding:5px;}
.comments .comments-content .comment-content{text-align:none;}
.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:10px16px;text-align:center;}
.comments .thread-toggle{cursor:pointer;display:inline-block;}
.comments .continue{cursor:pointer;}
.comments .continue a{display:inline-block;margin:0;padding:1px6px;border:1px solid #C4C4C4;border-top-color:#E4E4E4;border-left-color:#E4E4E4;color:#424242;text-align:center;text-shadow:0 - 1px 0 white;text-decoration:none;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;background:#EDEDED;background:-webkit-gradient(linear,lefttop,left bottom,color-stop(.2,white),color-stop(1,#E5E5E5));background:-moz-linear-gradient(centertop,white20%,#E5E5E5100%);font:11px/18px sans-serif;padding:2px8px;margin-right:10px;}
.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,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC")no-repeatscroll 0 0 transparent;}
.comments .thread-collapsed .thread-arrow{background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAABJRU5ErkJggg ==") no-repeat scroll 0 0 transparent;}
.comments .avatar-image-container{background-image: url("http://img846.imageshack.us/img846/7357/unled1oww.jpg");background-position:centercenter;background-repeat:no-repeat;float:left;width:36px;max-height:36px;margin:0;outline:1pxsolid#FFFFFF;padding:3px;vertical-align:middle;overflow:hidden;border:1pxsolid#DDDDDD;}
.comments .avatar-image-container img{width:36px;} .comments .comment-block{margin-left:48px;position:relative;}
/*Responsive styles.*/ @mediascreenand(max-device-width:480px)
{ .comments .comments-content .comment-replies{margin-left:0; }
}
< /style> < / b :includable>


8. Save your template and you're done. Just check if your new threaded comment is shown up and working properly by replaying a comment on your blog.

Actually you could even make the easiest way to show it up on your blog, but this way the thread shown to replay is loaded as a anchor link, not a button. Yet, if you'd rather preffer to use it you can go to "Dashboard> Design> Edit Html". Scroll to bottom and look for a long button link titled Revert Widget Template To Default, Click it and you're done. Your new threaded comment should show up now. Don't worry about your layout and widget template, they will remain the same as before. But it doesn't mean that you don't need to back up your template prior to do it.

I'd read some articles before i wrote this, but i copypassed the code from: http://www.masterendi.com/. Sorry to brother endi cuz i don't link it, i just don't want if one day i should dig a deep to fix a broken link. Don't take it wrong..

1 comments: