Highlight Author And Threaded Commenting Levels

Shah Danial August 01, 2012

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgK1LGTONDORDGRX4O0ikoZJJo3NWvDTTh1v4k15n7oEoswR7-spxdA4UKiNLcr5I1xBnfrbdfa8mc4ayC6nIRK3mtD0bCgcImP9O_j7rM7XnuNeBUBtVPsXSBkkQsUTptNMSJjPG60AkgA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3VPOb3usfY_hCeksj_7sQ-2nOsYnE_A-QRBQYVa3Z5F1VVgOZo8Tvi21ZGnASreqBOmrFvlU_A77wdz_m_worfJsOo7DRPKydqM-UBPNCsCBEePcVOB1wYK5NB83xCMs0MaoszkqZwXI/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/

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

Fara August 02, 2012

copy paste mcm tu saje ke?

Fara August 02, 2012

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

Mus Lim August 02, 2012

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>

Anonymous August 03, 2012

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

Anonymous August 03, 2012

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

Fara August 03, 2012

tekan CTRL + F kat bahagian template tu..

Fara August 03, 2012

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

Mus Lim August 03, 2012

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

Fara August 03, 2012

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

Mus Lim August 03, 2012

Ya. Betul sekali, Kak Fara.

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

Iza August 05, 2012

Assalam..
Cantik design screen shoot tu..

Mus Lim August 05, 2012

Wa`alaikumussalam Kak Iza.

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

Boleh lah dicoba :D

Dicas Cozinhar August 08, 2012

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?

laku ,com belanja murah dan aman August 09, 2012

tampilan jadi lebih bagus dan menarik,

Mus Lim August 20, 2012

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.

Mus Lim August 20, 2012

pasti dong mas laku :)

silahkan coba template ini, templatenya bagus loh.

Tutorial Blog WordPress August 22, 2012

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

Mus Lim August 28, 2012

heheheh terimakasih atas kunjungannya mas Tutorial Blog Wordpress :)

Iasiaseo September 13, 2012

wedew keren kali :)

Unknown September 14, 2012

This comment has been removed by the author.

Anonymous October 02, 2012

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

Bayu November 22, 2012

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

Shah Blogger Profile Test November 29, 2012

Hello Dorothy,

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

Find on google : Threaded comment for blogspot.