Ultimate Guide:Customize Blogger Comment Section - TechyWebTech
Are you want to advertise, Link Insertion,Guest post or promotion Reach out Now..

Search Suggest

Ultimate Guide:Customize Blogger Comment Section

Ultimate Guide:Customize Blogger Comment Section.How To Add Image Between Each Comment,Add Border And Background Color, And More in Blogger Blog...

Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS

Hello Friends,

Welcome to Techy Web Tech blog's another article.

If you are looking for Ultimate Guide:Customize Blogger Comment Section you are not alone.

At the end of the post your all queries will solve about Ultimate Guide:Customize Blogger Comment Section.

What if you not satisfy ?

Don't worry we are here for you..

Table of Contents [Hide]

    Do You Want To Customize Your Blogger Blog Comment Section Professionally ?


    Ultimate Guide:Customize Blogger Comment Section


    In This Post I Have Guide You How You Can Customize Blogger Comment Section Easily By Some Codes Integration.


    How To Add Seperate Border To Blogger Comment


    customize comments, blogger

    Step 1. To add a simple separator go to Template Edit HTML.

    Step 2. Click anywhere inside the code area and search using CTRL + F keys, for the following piece of code:
    ]]></b:skin>

    Step 3. Paste the following style just above it:


    .comment-block {
    border-bottom: 1px solid #000000;
    }

    .comments .continue {
      border-top: 0px solid $(widget.alternate.text.color);
    }



    Note: To change the border's color, replace the bolded color value and to change its thickness, increase/decrease the 1 value.

    Step 4. Save the Template.



    How To Add Image Between Each Comment In Blogger


    blogger comments, blogger tricks, blogger tutorials


    Step 1. Go to Template > Edit HTML and search (CTRL + F) for the following piece of code:
    ]]></b:skin>
    Screenshot:


    Step 2. Paste the following just above it:

    .comment-block {
    background-image:url(http://1.bp.blogspot.com/-YaY5yi0UcbM/UTpA2jWBJFI/AAAAAAAAC_0/UXbviThYl2w/s1600/74.gif);
    background-repeat:no-repeat;
    background-position:center bottom;
    padding-bottom:30px;
    margin-top: -10px;


    .comments .continue {
    border-top: 0px solid $(widget.alternate.text.color);
    }




    Step 3. Save the Template.


    How To Add Border And Background Color To Blogger Comment 

    blogger tips, blogger tricks, gadgets

    Step 1.
     Go to Template > Edit HTML and search for the following piece of code:
    ]]></b:skin>

    Step 2. Paste the following just above it:

    .comment-block {
    background:#F9F9F9; /* Background Color */
    border: 1px solid #f1f1f1; /* Border style */
    margin-bottom:20px;
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px; 
    }

    .comments .comment-thread.inline-thread {
    background-color: #FAFAFA; /* Background color behind the replies */
    border-left: 4px dotted #E6E6E6; /* Border on the left side of replies */
    }

    .comment-content {
    padding:2px 10px 10px 10px;
    color:#444444; /* Font Color in Comments */
    }

    .datetime a {
    font-style:italic;
    font-size:9px;
    margin-left: 2px;
    }

    .comments .comments-content .user a{
    color:#1982D1; /* Author's name color */
    font-size: 12px; /* Author's name size */
    padding-left: 10px;
    font-weight:bold;
    text-decoration:none;
    }

    .comments .comment .comment-actions a,.comments .comment .continue a{
    display:inline-block; 
    margin:0 0 10px 10px;
    padding:0 15px;
    color:#B4B4B7;
    text-align:center;
    text-decoration:none;
    background:#F8F8FB;
    border:1px solid #C2C2C5;
    border-radius:4px;
    height:20px;
    line-height:20px;
    font-weight:normal;
    cursor:pointer;
    }

    .comments .continue {
    border-top: 0px solid $(widget.alternate.text.color);
    }

    .comments .comments-content .icon.blog-author {
    background-image: none;
    margin-left: -10px;
    }

    .comments .avatar-image-container{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 40px;
    max-height: 40px;
    border: 1px solid #F2F2F2;
    padding: 1px;
    }

    .comments .avatar-image-container img{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    max-width: 40px;
    height: 40px;
    }


    Step 3. Save the Template.



    How To Change Avatar Size In Blogger Comment

    Step 1. Go to Dashboard - Template - click on the Edit HTML button.



    Step 2. Find (CTRL + F) this code in your template:

    ]]></b:skin>

    Step 3. Copy and paste the following codes just above it.

    .comments .avatar-image-container{
    background-color: rgb(34, 34, 34);
    border:1px solid #ccc;
    margin: 0px 10px 0px 0px;
    padding: 0px 0px 0px 0px;
    width: 64px;
    max-height: 64px;
    }
    .comments .avatar-image-container img{
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    max-width: 64px;
    height: 64px;
    }


    Step 4. Save the Template.

    How To Change Blogger Default Anonymous Avatar In Blogger With Image

    1. Go to the theme in the blogger blog and Click edit html.


    2. Paste the code below before the blog theme </body>

    <script>

    var oldSrc = ‘//img1.blogblog.com/img/blank.gif’; //Default blogger image link

    var newSrc = ‘http://1.bp.blogspot.com/-eKbzORzVaBQ/T6ZXHmdgHqI/AAAAAAAACFs/rVy3T4gxojM/s1600/blogger-user.png’; 

    $(‘img[src=”‘ + oldSrc + ‘”]’).attr(‘src’, newSrc);

    </script>


    4. Finally you save your theme.



    If You Want To Add Your Custom Image In Blogger Comment Section Then replace the image URL with the URL of the image which you want To Show.



    Bottom Line :

    I Hope This Post Help You To Customize Blogger Blog Comment Section.

    Impress By This Post ?

    Then Show It By Sharing This Post.

    Don't Forget To Follow On Social Networks.

    Keep In Touch πŸ™


    Impress with Us?

    Feel free to know more About us, contact us, or work with us.

    You can find this article on bing or bing news.

    What was the your openion, suggestion related this blog post ?

    We will love to hear it in the comments.

    Insurance,Loans,Mortgage,Attorney,Credit,Lawyer,Donate,Degree,Hosting,Claim,Conference Call,Trading,Software

    Recovery,Transfer,Gas/Electicity,Classes,Rehab,Treatment,Cord Blood,crypto,finance,google,business,tech,DNS

    Post a Comment

    We Use Auto Comment Approval but in conditions. Because This Blog on Blogger Platform so CommentLuv Not Available..
    1. Don't Comment for just spamming.
    2. Use maximum 1-2 links in one comment.
    3. If you want more comment Backlinks do comment on different post's..