Highlight Author And Threaded Commenting Levels

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/

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

Fara Fara August 02, 2012
copy paste mcm tu saje ke?
Fara Fara August 02, 2012
BTW,tak jumpa lak dlm template utk code /*-- :[ START THEREADED COMMENT STYLE BY FORBLOGGER.NET]: --*/ ni
MUS LIM 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 Anonymous August 03, 2012
terima kasih templatnya, elok sekali.
< b:includable id='threaded_comment_css' > ---> letakna dimana?
Anonymous Anonymous August 03, 2012
terima kasih templatnya, elok sekali.
< b:includable id='threaded_comment_css' > ---> letakna dimana?
Fara Fara August 03, 2012
tekan CTRL + F kat bahagian template tu..
Fara 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 MUS LIM August 03, 2012
jangan didelete code yang sudah ada tu, Kak. tetapi tambahkan dengan css code yang ada diatas tu.
Fara Fara August 03, 2012
tambah di bawah code atau di atas code sedia ada?? tp stil dlm < style> < /style> la kan
MUS LIM MUS LIM August 03, 2012
Ya. Betul sekali, Kak Fara.

Boleh diletakkan dimana saja dan masih dalam < style> content < /style>
Iza Teratak Usang Iza Teratak Usang August 05, 2012
Assalam..
Cantik design screen shoot tu..
MUS LIM 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 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 laku ,com belanja murah dan aman August 09, 2012
tampilan jadi lebih bagus dan menarik,
MUS LIM 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 MUS LIM August 20, 2012
pasti dong mas laku :)

silahkan coba template ini, templatenya bagus loh.
Tutorial Blog WordPress Tutorial Blog WordPress August 22, 2012
woww verry nice gan.salam dr blogger indonesia.
tengok blog ku jg,running with Thesis :D
MUS LIM MUS LIM August 28, 2012
heheheh terimakasih atas kunjungannya mas Tutorial Blog Wordpress :)
ata Quincy ata Quincy September 14, 2012
This comment has been removed by the author.
Dorothy R Brown Dorothy R Brown 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 Bayu November 22, 2012
masih gak jalan mas threaded commentnya
kira2 kenapa ya? padahal udah diantara < style> < /style>
Berita Terbaru Berita Terbaru November 29, 2012
Hello Dorothy,

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

Find on google : Threaded comment for blogspot.
Sharidawati Shahrudin Sharidawati Shahrudin January 10, 2013
agak sukar utk fhm cara2 untuk letak code itu...
Mentari Minda Mentari Minda January 13, 2013
saya tak jumpa code < b:includable id='threaded_comment_css' >
Syaifuddin Alias Syaifuddin Alias January 16, 2013
kenapa ya saya dah letak diantara code yg dibagi .. lepas tu tak jadi pun .. huhu
syazrin syazrin January 24, 2013
Salam....

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

Tnx atas tuto ini, dah berjaya pasang dekat blog sy =)
Ema Johari Ema Johari April 30, 2013
salam, saya baru saja tukar kepada template yg baru ini..setiap kali cari kos tak jumpa...kenapa yer...
Ema Blog Ema Blog April 30, 2013
seharian saya cuba...last-last tab menu comment saya entah ke mana...siapa boleh tolong saya..tq.