Home » Blogger Hack » Cara Modifikasi/costumize Blogger Thread Comment

Cara Modifikasi/costumize Blogger Thread Comment

Kali ini Blog Gado Gado akan menampilkan artikel berjudul Cara Modifikasi/costumize Blogger Thread Comment. Dengan artikel Cara Modifikasi/costumize Blogger Thread Comment ini kami berharap dapat menjadi sebuah rujukan dan bahan penambah wawasan kita terkait dengan judul tersebut. Artikel ini adalah hasil pencarian di google dengan kata kunci Cara Modifikasi/costumize Blogger Thread Comment kemudian saya kumpulkan dan saya sajikan buat anda di Blog Gado Gado ini. Semoga kehadiran artikel ini bermanfaat bagi kita semua.anda juga dapat melihat artikel sebelumnya atau artikel berikutnya. Ok, langsung saja berikut adalah artikel Cara Modifikasi/costumize Blogger Thread Comment selengkapnya:

D-Copy Blog | Hai sahabat blogger semua, di sore yang mendung ini ( 14 Oktober 2012, 15:48) kita akan membahas bagaimana cara memodifikasi/costumize blogger thread comment. Mungkin jika Anda sering bermain main ke blog terkenal www.spiceupyourblog.com mungkin Anda akan melihat komentar blog tersebut akan sama seperti yang saya utarakan ini. Saya hanya mengcopy page source blog tersebut dan seperti dibawah ini contoh gambar commentnya :

Cara Modifikasi/costumize Blogger Thread Comment
Blogger Thread Comment Hack 1

-------------------------------------------------------------------------------

Blogger Thread Comment Hack 2
Blogger Thread Comment Hack 2

Saya memang suka menghack blog saya jadi apa salahnya saya berbagi ilmu kepada Anda. Sebelum melakukan tutorial hack ini, Anda harus menggunakan blogger thread comment seperti yang saya juga gunakan. Anda tidak mengerti apa itu blogger thread comment? Blogger thread comment adalah sebuah gaya komentar berbalas seperti gambar diatas dan yang sa juga gunakan.

Tahap Pertama, jika Blog Anda tidak memiliki fitur Blogger Thread Comments :
  1. Terlebih dahulu backup template Anda
  2. Masuk ke Menu Edit HTML, jangan lupa centang Expand Template Widget
  3. Cari kode dibawah ini :
<b:include data='post' name='comments'/>
Keterangan :
  • Kode diatas ada 3-4, ganti seluruhnya
    4.  Ganti kode (langkah 3) dengan kode dibawah ini :
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
    5.  Save Template Anda.

 Tahap Kedua, memodifikasi Blogger Thread Comments :

  1. Masih pada langkah kedua diatas, lalu cari kode yang mirip seperti dibawah ini di template Anda :
    #comments{overflow:hidden}
    #comments h4{display:inline;padding:10px;line-height:40px}
    #comments h4,.comments .comment-header,.comments .comment-thread.inline-thread .comment{position:relative}
    #comments h4,.comments .continue a{background:#b6cfea}
    #comments h4,.comments .user a,.comments .continue a{font-size:12px}
    #comments h4,.comments .continue a{font-weight:normal;color:#fff}
    #comments h4:after{content:"";position:absolute;bottom:-10px;left:10px;border-top:10px solid #b6cfea;border-right:20px solid transparent;width:0;height:0;line-height:0}
    #comments .avatar-image-container img{border:0}
    .comment-thread{color:#111}
    .comment-thread a{color:#777}
    .comment-thread ol{margin:0 0 20px}
    .comment-thread .comment-content a,.comments .user a,.comments .comment-thread.inline-thread .user a{color:#b6cfea}
    .comments .avatar-image-container,.comments .avatar-image-container img{width:48px;max-width:48px;height:48px;max-height:48px}
    .comments .comment-block,.comments .comments-content .comment-replies,.comments .comment-replybox-single{margin-left:60px}
    .comments .comment-block,.comments .comment-thread.inline-thread .comment{border:1px solid #ddd;background:#f9f9f9;padding:10px}
    .comments .comments-content .comment{margin:15px 0 0;padding:0;width:98%;line-height:1em}
    .comments .comments-content .icon.blog-author{position:absolute;top:-12px;right:-12px;margin:0;background-image: url(http://4.bp.blogspot.com/-awl7HMjMgh4/T89YtINejTI/AAAAAAAAGmQ/XxcTVLKUAtI/s320/picresized_1338990142_comment-author-blue.gif338990142_comment-author-blue.gif);width:36px;height:36px}
    .comments .comments-content .inline-thread{padding:0 0 0 20px}
    .comments .comments-content .comment-replies{margin-top:0}
    .comments .comment-content{padding:5px 0;line-height:1.4em}
    .comments .comment-thread.inline-thread{border-left:1px solid #ddd;background:transparent}
    .comments .comment-thread.inline-thread .comment{width:auto}
    .comments .comment-thread.inline-thread .comment:after{content:"";position:absolute;top:10px;left:-20px;border-top:1px solid #ddd;width:10px;height:0px}
    .comments .comment-thread.inline-thread .comment .comment-block{border:0;background:transparent;padding:0}
    .comments .comment-thread.inline-thread .comment-block{margin-left:48px}
    .comments .comment-thread.inline-thread .user a{font-size:13px}
    .comments .comment-thread.inline-thread .avatar-image-container,.comments .comment-thread.inline-thread .avatar-image-container img{width:36px;max-width:36px;height:36px;max-height:36px}
    .comments .continue{border-top:0;width:98%}
    .comments .continue a{padding:10px 0;text-align:center}
    .comment .continue{display:none}
    #comment-editor{width:98%!important}
    .comment-form{width:100%;max-width:100%}
        5.  Jika sudah ketemu kode yang mirip pada kode ditas di HTML blog Anda, ganti seluruh kode tersebut dengan kode dibawah ini :


    Blogger Thread Comment Hack 1

    /*Blogger Thread Comment D-Copy*/
    #comments-block.avatar-comment-indent {margin: 2em 0 1.5em !important;position: relative;}
    dl#comments-block {line-height: 1.5em;margin: 2em 0 1.5em !important;}
    #comments-block .comment-author {background: none repeat scroll 0 0 #A9F5D0;color: #FFFFFF;font-size: 15px;font-weight: bold;margin-left: 60px;}
    #comments-block .comment-author a, dl#comments-block dt.author-comment a {color: #FFFFFF;text-decoration: none;}
    #comments-block .avatar-image-container {background: url("http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMs1T9Q5FwI/AAAAAAAAB9E/gSZ4rnYBqdU/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;height: 70px !important;left: 0;margin-top: -10px;position: absolute;width: 70px !important;}
    #comments-block .avatar-image-container img {border: medium none !important;float: right;height: 70px !important;width: 70px !important;}
    #comments-block .avatar-image-container.avatar-stock img {border-width: 0;padding: 0;}
    .commentauthorname {background: none repeat scroll 0 0 #DF7401;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
    #comments-block .comment-body {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
    #comments-block .comment-body p {margin: 0 0 0.75em;}
    #comments-block .comment-footer {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
    #comments-block .comment-footer a {color: #444444;text-decoration: none;}
    #comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 15px;font-weight: bold;margin-left: 60px;}
    #comments-block .naacomment a {color: #FFFFFF;text-decoration: none;}
    #comments-block .naacomment {background: none repeat scroll 0 0 #E0ECF8;color: #FFFFFF;font-size: 15px;font-weight: bold;margin-left: 60px;}
    #comments-block .naaperu {background: none repeat scroll 0 0 #8181F7;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;}
    #comments-block  .naacommentbody {background: url("") no-repeat scroll right bottom #F9F9FC;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 20px 90px;}
    #comments-block .naacommentbody p {margin: 0 0 0.75em;}
    #comments-block .naacommentfooter {background: none repeat scroll 0 0 transparent;border: medium none;font-size: 12px;font-style: italic;font-weight: normal;margin: 0 5px;text-decoration: none;}
    #comments-block .naacommentfooter a {color: #444444;text-decoration: none;} /* start */
    .comment .comment-header{background: none repeat scroll 0 0 #A9F5D0;color: #333;font-size: 15px;font-weight: bold;margin-left: 60px;}
    .comment .comment-header a {color: #FFFFFF !important;text-decoration: none;}
    .comment .avatar-image-container {background: url("http://3.bp.blogspot.com/_rKG-ziTSNUQ/TMs1T9Q5FwI/AAAAAAAAB9E/gSZ4rnYBqdU/s1600/Wide_Brush_64x64.png") no-repeat scroll center center #FFFFFF;border: 1px solid #B6B6B6;max-height: 70px !important;margin-top: -5px;width: 70px !important;position:relative;z-index:50;}
    .comment .comment-block {margin-left: 75px;}
    .comment .avatar-image-container img {border: medium none !important;height: 70px !important;width: 70px !important;max-height: 70px !important;max-width: 70px !important;}
    .comment-header cite {background: none repeat scroll 0 0 #DF7401;border: 1px solid #FFFFFF;color: #FFFFFF;padding: 0 20px;position: relative;z-index: 99;margin-left:-20px;}
    .comment .comment-content {background: none repeat scroll 0 0 #FEFFF9;border-bottom: 2px solid #E6E6E6;font-size: 14px;margin: 0 0 30px;padding: 5px 5px 10px 10px;}
    .comment .comment-actions a{background: none repeat scroll 0 0 #DDDDDD;color: #333333;display: inline-block;line-height: 1;margin: 0 3px;padding: 3px 6px !important;text-decoration: none;}
    .comment .comment-actions a:hover{background:#CCC;text-decoration: none !important;}
    cite.blog-author {background: none repeat scroll 0 0 #8181F7 !important;;}
    .icon.blog-author {display:none;background: url("") no-repeat scroll 0 0;margin-left: 90px;width:60px !important;height:60px !important;position:absolute;right:5px;bottom:5px;top:10px;}/* end */
    a.backtotop{display: block;height: 54px;position: absolute;right: 20px;top: -6px;width: 70px;z-index:56;}
    /*End Blogger Thread Comment D-Copy*/


    Blogger Thread Comment Hack 2

    /*Blogger Thread Comment D-Copy*/
    #comments h4{ margin:1em 0;   font-weight:bold;   font-size:15px;   text-shadow:1px 1px 1px #ddd;   line-height:1.4em;   text-transform:uppercase;   letter-spacing:.2em;   color:$sidebarcolor}
    #comments-block.avatar-comment-indent {
    margin: 2em 0 1.5em !important;
    position: relative;
    }
    dl#comments-block {
    line-height: 1.5em;
    margin: 2em 0 1.5em !important;
    }
    #comments-block .comment-author {
    background: none repeat scroll 0 0 #A9F5D0;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    margin-left: 60px;
    }
    #comments-block .comment-author a, dl#comments-block dt.author-comment a {
    color: #FFFFFF;
    text-decoration: none;
    }
    #comments-block .avatar-image-container {
    background: url("http://4.bp.blogspot.com/-ikbnwx0OEVQ/TbA2zWhgXtI/AAAAAAAADYc/CvArOO6FnsI/s1600/bbt-comment-avatar.png") no-repeat scroll center center #FFFFFF;
    border: 1px solid #B6B6B6;
    height: 70px;
    left: 0;
    margin-top: -10px;
    position: absolute;
    width: 70px;
    }
    #comments-block .avatar-image-container img {
    border: medium none !important;
    float: right;
    height: 70px;
    width: 70px;
    }
    #comments-block .avatar-image-container.avatar-stock img {
    border-width: 0;
    padding: 0;
    }
    .commentauthorname {
    background: none repeat scroll 0 0 #DF7401;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    padding: 0 20px;
    position: relative;
    z-index: 99;
    }
    #comments-block .comment-body {
    background: none repeat scroll 0 0 #FEFFF9;
    border-bottom: 2px solid #E6E6E6;
    font-size: 14px;
    margin: 0 0 30px;
    padding: 5px 5px 20px 90px;
    }
    #comments-block .comment-body p {
    margin: 0 0 0.75em;
    }
    #comments-block .comment-footer {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    margin: 0 5px;
    text-decoration: none;
    }
    #comments-block .comment-footer a {
    color: #444444;
    text-decoration: none;
    }
    #comments-block .naacomment {
    background: none repeat scroll 0 0 #E0ECF8;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: bold;
    margin-left: 60px;
    }
    #comments-block .naacomment a {
    color: #FFFFFF;
    text-decoration: none;
    }
    .naaperu {
    background: none repeat scroll 0 0 #8181F7;
    border: 1px solid #FFFFFF;
    color: #FFFFFF;
    padding: 0 20px;
    position: relative;
    z-index: 99;
    }
    #comments-block .naacommentbody {
    background: url("http://i.imgur.com/UqufZ.gif") no-repeat scroll right bottom #F9F9FC;
    border-bottom: 2px solid #E6E6E6;
    font-size: 14px;
    margin: 0 0 30px;
    padding: 5px 5px 20px 90px;
    }
    #comments-block .naacommentbody p {
    margin: 0 0 0.75em;
    }
    #comments-block .naacommentfooter {
    background: none repeat scroll 0 0 transparent;
    border: medium none;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    margin: 0 5px;
    text-decoration: none;
    }
    #comments-block .naacommentfooter a {
    color: #444444;
    text-decoration: none;
    }
    /*End Blogger Thread Comment D-Copy*/
        6.  Save Template Anda dan lihat pembaruan komentar Anda mirip dengan Spice U'r Blog.

    Nah, sobat Blog Gado Gado.. Anda telah membaca seluruh artikel berjudul Cara Modifikasi/costumize Blogger Thread Comment dengan keword yang masuk Blogger Hack . Anda dapat memberikan komentar ditempat yang telah tersedia. Terima kasih kunjungan Anda.

    0 komentar:

    Poskan Komentar