Home > Thesis Blogger Template > Highlight Author And Threaded Commenting Levels

Highlight Author And Threaded Commenting Levels

By MUS LIM on 1 Aug 2012 at 6:01 am

Bagi Anda pengguna Thesis For Blogspot, sangat mudah sekali melakukan modifikasi dan memperindah threaded comment pada comment bar blogger.

Cukup dengan meletakkan CSS ini dalam  /*-- :[ START THEREADED COMMENT STYLE BY FORBLOGGER.NET]: --*/ pada template Thesis For Blogspot.

Dalam tutor ini, terdapat dua bagian penting pada threaded commenting blogspot, yaitu Highlight Author Threaded Comment dan Threaded Comment Levels.

Dengan meletakkan css3 code ini pada template Anda, maka threaded comment default Thesis For Blogspot Anda akan menjadi seperti screenshot berikut:

Highlight Author And Threaded Comment Levels For Thesis For Blogspot

Highlight Author Dan Thread Comment Bertingkat Dengan CSS



.comment-block{position:relative;padding:8px;background:rgba(255,255,255,.7);border:1px solid #ddd;border-radius:4px;box-shadow:4px 4px 4px #444;text-shadow:0 1px 0 #dbdbdb;}
.comment-block .icon.blog-author{position:absolute;right:0;bottom:0;background:rgba(0,0,0,.3) url(http://2.bp.blogspot.com/-sTLnLHWJok8/UBUsV2ZjfxI/AAAAAAAABa4/V5JOMhS744Y/s1600/author.png) bottom right no-repeat !important;width:100% !important;height:100% !important;margin:0 !important;border-radius:4px;}
.comment-block:hover{box-shadow:0 10px 10px -10px #444;}
.comment-block:hover .icon.blog-author{width:60px !important;height:22px !important;background:url(http://3.bp.blogspot.com/-RU1Q-HwrfsU/T2CyurPWOtI/AAAAAAAABmY/S0uNp_lWCNw/s1600/admin2.png) bottom right no-repeat !important;background-size:60px 22px !important;}

.comments .thread-toggle {margin-bottom:10px;}
.comments .comment-thread.inline-thread .comment .comment-block {margin-left:52px;}
.comments .comment-thread.inline-thread .comment {margin:0px 0px 5px 30%;padding:10px 15px;color:#222;}
.comment .comment-thread.inline-thread .comment:nth-child(6) {margin:0px 0px 5px 25%;}
.comment .comment-thread.inline-thread .comment:nth-child(5) {margin:0px 0px 5px 20%;}
.comment .comment-thread.inline-thread .comment:nth-child(4) {margin:0px 0px 5px 15%;}
.comment .comment-thread.inline-thread .comment:nth-child(3) {margin:0px 0px 5px 10%;}
.comment .comment-thread.inline-thread .comment:nth-child(2) {margin:0px 0px 5px 5%; }
.comment .comment-thread.inline-thread .comment:nth-child(1) {margin:0px 0px 5px 0%; }

Terimakasih yang tak terhingga kepada:
Blogonol: http://blogonol.blogspot.com/2012/06/highlight-author-threaded-comments.html
Rahmadika Kuniawan: http://blog.uad.ac.id/rahmadika/2012/06/27/cascading-style-sheet-4/
5

{ 31 comments... read them below or add one }

  1. copy paste mcm tu saje ke?

    ReplyDelete
    Replies

    1. BTW,tak jumpa lak dlm template utk code /*-- :[ START THEREADED COMMENT STYLE BY FORBLOGGER.NET]: --*/ ni

      Delete

    2. Betul sekali, Kak Fara. Cukup copy dan paste saja.

      Kalau tak ada tulisan macam tu, silahkan letakkan dibawah kode:

      < b:includable id='threaded_comment_css' >
      < style>
      Letakkan kode Highlight Author Dan Thread Comment Bertingkat Disini.
      < /style>

      Delete

    3. terima kasih templatnya, elok sekali.
      < b:includable id='threaded_comment_css' > ---> letakna dimana?

      Delete

    4. tekan CTRL + F kat bahagian template tu..

      Delete

  2. terima kasih templatnya, elok sekali.
    < b:includable id='threaded_comment_css' > ---> letakna dimana?

    ReplyDelete
    Replies

    1. This comment has been removed by the author.

      Delete

  3. soalan lagi..dah jumpa
    < b:includable id='threaded_comment_css' >
    < style>
    Letakkan kode Highlight Author Dan Thread Comment Bertingkat Disini.
    < /style>

    tp di antara < style> < /style> tu mmg dh ade coding yg asal utk threaded comment..nk kene delete yg tu dan gantikan dengan coding baru ni ke??then sy dh try tp bila preview,takde ape2 perubahan

    ReplyDelete
    Replies

    1. jangan didelete code yang sudah ada tu, Kak. tetapi tambahkan dengan css code yang ada diatas tu.

      Delete

    2. tambah di bawah code atau di atas code sedia ada?? tp stil dlm < style> < /style> la kan

      Delete

    3. Ya. Betul sekali, Kak Fara.

      Boleh diletakkan dimana saja dan masih dalam < style> content < /style>

      Delete

  4. Assalam..
    Cantik design screen shoot tu..

    ReplyDelete
    Replies

    1. Wa`alaikumussalam Kak Iza.

      Ya betul sekali, Cantik screenshot tu, ada gambar Kak Iza didalamnya :D

      Boleh lah dicoba :D

      Delete

  5. Thank you, by the time you devoted to this topic!
    I wonder if it is equal to its subject (ForBlogger), with two extended post and the other in two columns?
    How can I do this in Thesis.2?

    ReplyDelete
    Replies

    1. if you want to make two columns in thesis template, you may insert the css style before the < /head>:

      < b:if cond='data:blog.pageType == "index"'>
      < style>
      .blog-posts .post{display:inline-block;width:280px;min-height:10px;margin-left:10px;margin-right:10px}
      .post-body h2{font-size:1.25em}
      #outer-wrapper{font-family: 'Franklin Gothic Medium',Arial,sans-serif;font-size:0.75em;line-height:1.275em;}
      .sidebar h2{font-size:2.5em}
      < /style>
      < /b:if>

      and then, create two sticky posts above the post area.

      Delete
  6. Replies

    1. pasti dong mas laku :)

      silahkan coba template ini, templatenya bagus loh.

      Delete

  7. woww verry nice gan.salam dr blogger indonesia.
    tengok blog ku jg,running with Thesis :D

    ReplyDelete
    Replies

    1. heheheh terimakasih atas kunjungannya mas Tutorial Blog Wordpress :)

      Delete

  9. Hello admin,
    I am very appreciate your work. Currently I am using in one of my blogs. But still did not get any changed when I applied threaded comment code. As you can see in my url: http://pembayarankomisiamazon.blogspot.com/2012/09/biaya-payooner.html. There is a comment from blog visitor, and I also replied it. But threaded comment style does not appear. Need your help to fix this. I love this theme. As your preference, I am adding the code after comment code but still in the style quote.
    Screenshot of the code http://prntscr.com/gm4jg

    THanks

    ReplyDelete
    Replies

    1. Hello Dorothy,

      Anda hendaklah aktifkan theaded comment blogspot dengan memasukkan kod pada template.

      Find on google : Threaded comment for blogspot.

      Delete

  10. masih gak jalan mas threaded commentnya
    kira2 kenapa ya? padahal udah diantara < style> < /style>

    ReplyDelete

  11. agak sukar utk fhm cara2 untuk letak code itu...

    ReplyDelete

  12. saya tak jumpa code < b:includable id='threaded_comment_css' >

    ReplyDelete

  13. kenapa ya saya dah letak diantara code yg dibagi .. lepas tu tak jadi pun .. huhu

    ReplyDelete

  14. Salam....

    stylish la thread comment yg ney, elegant....

    Tnx atas tuto ini, dah berjaya pasang dekat blog sy =)

    ReplyDelete

  16. salam, saya baru saja tukar kepada template yg baru ini..setiap kali cari kos tak jumpa...kenapa yer...

    ReplyDelete

  17. seharian saya cuba...last-last tab menu comment saya entah ke mana...siapa boleh tolong saya..tq.

    ReplyDelete

Spamming will report.

 
© Thesis Ver.2 Rock! All Rights Reserved