Get Latest Tweaks via Facebook, Twitter, Google+ & FeedBurner
    Subscribe:
    Subscribe Twitter Facebook

    Saturday, August 11, 2012

    Threaded Comments For Blogger With New Style

    SOCIALIZE IT →

    lovely blogger threaded comment style

    Here is a new blogger comments designed with css. Just install this new code to your blogger and replace 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" check box.
    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 your are done! You can also customize above CSS values as you wish.Also ask me for any kind help,I'll glad to help you..


    0 comments:

    Post a Comment