Threaded Comments For Blogger With New Style - Cyber Tweaks

Ads Top

Threaded Comments For Blogger With New Style

lovely blogger threaded comment style

Here is a new blogger comment designed with CSS. Just install this new code to your blogger and replace it with your old simple-looking blogger comments.

How To Add Threaded Comments With Awesome Style


1. Applying CSS Styles


1. find the follwong code
]]></b:skin>

2. add below code just above it.

.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;
}

2. Enabling The Threaded Comments


1. Go to Blogger Dashboard > Design > Edit HTML
2. Tick the "Expand Widget Templates" checkbox.
3. Now find for below code in your template

<b:include data='post' name='comments'/>

4. Now replace the above code with below code (Note - If you found 2 codes lines of given spinet, then you have to replace both. )

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

Now save the template and you are done! You can also customize the above CSS values as you wish. Also, ask me for any kind of help, I'll glad to help you.

No comments:

Powered by Blogger.