Cara Membuat Threaded Comment Keren (Fitur Reply)

79 Komentar

Cara Membuat Threaded Comment Lebih Keren (Fitur Reply). Selamat pagi sobat sobat Mas yusa, mungkin post ini melanjutkan dari post bang dirman (Planktoon.blogspot.com). Pernah saya berpikir ingin punya threaded coment dengan fitur reply seperti wordpress. Karena saya kurang tau cara membuatnya....saya PM barng dirman dari facebook. Lalu dia menjawab dengan menyertakan link cara untuk membuat threaded comment. Tapi... (Ada tapinya) penampilan threaded comment yang di share bang dirman masih default alias belum di edit.

Nah maka dari itu....saya akan share Cara Membuat Threaded Comment Lebih Keren (Fitur Reply). Agar anda para admin mudah dalam menjawab para komentator blog anda. Dilain itu, kelebihan dari threaded comment ini yaitu fitur reply tanpa membuka jendela baru seperti fitur reply blog Mas Yusa yang dibawah. Jadi ketika di klik Reply. Kotak komentar akan datang menghampiri...

Screen shoot :


Langsung saja masuk ke caranya :

  • Sebelumnya backup dulu aja templatenya. (Biar aman)
  • Masuk Edit HTML blog (Rancangan->Edit HTML->Expand Template Widget)
  • Cari kode (Ctrl + F) : <b:include data='post' name='comments'/>
  • Ganti kode diatas dengan kode dbawah :
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
  • Note : jika anda sudah memakai Threaded comment langsung aja ke langkah selanjutnya. Dan jika anda menemukan dua kode <b:include data='post' name='comments'/> ganti kedua duanya...
  • Nah kita melaju ke tahap CSS nya..
  • Cari kode ]]></b:skin>
  • Lalu Copy dan paste kode CSS di bawah ini tepat diatas kode ]]></b:skin>
.comments {
  clear: both;
  margin-top: 10px;
  margin-bottom: 0px;
  line-height: 1em;
}
.comments .comments-content {
  font-size: 12px;
  margin-bottom: 16px;
font-family: Verdana;
font-weight: normal;
text-align:left;
line-height: 1.4em;
}
.comments .continue a, .comments .comment .comment-actions a {
display:inline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
padding: 2px 5px;
text-decoration: none;
text-shadow:0 1px 1px rgba(0,0,0,.3);
color:#FFF;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
box-shadow: 0 1px 2px rgba(0,0,0,.2);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-right: 10px;

border: 1px solid #3079ED;
background: #0066FF;
background: -webkit-gradient(linear, left top, left bottom, from(#0099FF), to(#009999));
background: -moz-linear-gradient(top, #0099FF, #009999);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0099FF&#39;, endColorstr=&#39;#009999&#39;);

}
.comments .continue a:hover, .comments .comment .comment-actions a:hover {
  text-decoration: none;
background:#0099FF;
background: -webkit-gradient(linear, left top, left bottom, from(#009999), to(#0099FF));
background: -moz-linear-gradient(top, #009999, #0099FF);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#009999&#39;, endColorstr=&#39;#0099FF&#39;);
}

.comments .continue a:active, .comments .comment .comment-actions a:active {
position: relative;
top:1px;
background: -webkit-gradient(linear, left top, left bottom, from(#0066FF), to(#0099CC));
background: -moz-linear-gradient(top, #0066FF, #0099CC);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=&#39;#0066FF&#39;, endColorstr=&#39;#0099CC&#39;);
}

.comments .comments-content .comment-thread ol {
  list-style-type: none;
  padding: 0;
  text-align: none;
}
.comments .comments-content .inline-thread {
  padding: 0.5em 1em 0 1em;
}
.comments .comments-content .comment-thread {
  margin: 8px 0px 0px 0px;
}
.comments .comments-content .comment-thread:empty {
  display: none;
}
.comments .comments-content .comment-replies {
  margin-top: 1em;
  margin-left: 40px;   font-size:12px;
}
.comments .comments-content .comment {
  padding-bottom:8px;
  margin-bottom: 0px
}
.comments .comments-content .comment:first-child {
  padding-top:16px;
}
.comments .comments-content .comment:last-child {
  border-bottom:0;
  padding-bottom:0;
}
.comments .comments-content .comment-body {
  position:relative;
}
.comments .comments-content .user {
  font-style:normal;
  font-weight:bold;
}

.comments .comments-content .user a {
  color: #444;
}

.comments .comments-content .user a:hover {
  text-decoration: none;
color: #555;
}

.comments .comments-content .icon.blog-author {
  width: 18px;
  height: 18px;
  display: inline-block;
  margin: 0 0 -4px 6px;
}
.comments .comments-content .datetime {
  margin-left:6px;
color: #999;
font-style: italic;
font-size: 11px;
float: right;
}

.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
}
.comments .comments-content .comment-content {
font-family: Arial, sans-serif;
font-size: 12.5px;
line-height: 19px;
  text-align:none;
margin: 15px 0 15px;
}
.comments .comments-content .owner-actions {
  position:absolute;
  right:0;
  top:0;
}
.comments .comments-replybox {
  border: none;
  height: 250px;
  width: 100%;
}
.comments .comment-replybox-single {
  margin-top: 5px;
  margin-left: 48px;
}
.comments .comment-replybox-thread {
  margin-top: 5px;
}
.comments .comments-content .loadmore a {
  display: block;
  padding: 10px 16px;
  text-align: center;
}
.comments .thread-toggle {
  cursor: pointer;
  display: inline-block;
}

.comments .comments-content .loadmore {
  cursor: pointer;
  max-height: 3em;
  margin-top: 3em;
}
.comments .comments-content .loadmore.loaded {
  max-height: 0px;
  opacity: 0;
  overflow: hidden;
}
.comments .thread-chrome.thread-collapsed {
  display: none;
}
.comments .thread-toggle {
  display: inline-block;
}
.comments .thread-toggle .thread-arrow {
  display: inline-block;
  height: 6px;
  width: 7px;
  overflow: visible;
  margin: 0.3em;
  padding-right: 4px;
}
.comments .thread-expanded .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC&quot;) no-repeat scroll 0 0 transparent;
}
.comments .thread-collapsed .thread-arrow {
  background: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==&quot;) no-repeat scroll 0 0 transparent;
}
.comments .avatar-image-container {
  float: left;
  overflow: hidden;
}
.comments .avatar-image-container img {
  width: 36px;
}
.comments .comment-block {
  margin-left: 48px;
  position: relative;
padding: 15px 20px 15px 20px;
background: #F7F7F7;
border: 1px solid #E4E4E4;
overflow: hidden;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-image: initial;
}
  • Lalu Simpan Template.
Selesai.....Jika ada masalah silahkan ditanyakan..
Baca Peraturan Copy Paste !

Anda sedang membaca artikel tentang Cara Membuat Threaded Comment Keren (Fitur Reply) dan anda bisa menemukan artikel Cara Membuat Threaded Comment Keren (Fitur Reply) ini dengan url http://masyusa.blogspot.com/2012/07/cara-membuat-threaded-comment-lebih.html, Anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Cara Membuat Threaded Comment Keren (Fitur Reply) ini sangat bermanfaat bagi teman-teman Anda, namun jangan lupa untuk meletakkan link postingan Cara Membuat Threaded Comment Keren (Fitur Reply) sebagai sumbernya. Jika tidak saya akan laporkan Google ! Yusa Syihab Akbar


79 comments

July 4, 2012 at 6:11 PM

Pagi Sobat..., saya tunggu kunjungan baliknya sob :D

http://bluesky-rikudo.blogspot.com/

July 4, 2012 at 6:17 PM
July 4, 2012 at 6:44 PM

Sayank ane gak pake threaded komentar sob, ,
nice posting sob :D

July 4, 2012 at 6:55 PM

postingan kayak gini nih yang selalu berhasil bikin aku nangis darah :((

soalnya blogku kagak bisa dibuat threaded comment :((
gak ada yang mau bantu ya? :((

July 4, 2012 at 7:02 PM

saya pernah pake.. tapi kenapa malah jadi error scrollnya.. -,-"

July 4, 2012 at 7:52 PM

Kayaknya saya template bawaan saya udah seperti itu, jadi ga perlu edit lagi

Informasi yg menarik, terutama bagi mereka yg belum menggunakan fasilitas ini...

July 4, 2012 at 9:29 PM

@MaxHaha...tapi menurut saya pakek threaded comment lebih enak... :D

July 4, 2012 at 9:30 PM

@Chequita ChiproetYah maaf yah kalo bikin sedih... :D hehehehe

July 4, 2012 at 9:30 PM

@affanibnuThreaded comment gak dukuk comment pakek scrool =='

July 4, 2012 at 9:30 PM

@ADIS OUTLINE BALIIya sob.... makasih dah mampir,.,,

July 4, 2012 at 11:42 PM

Wahh..mantef tuh bang Yusa..pokoknya sip banget..hahahahyyy

July 5, 2012 at 1:19 AM

di coba ah..hehe
nice ifno sob..

July 5, 2012 at 1:36 AM

@ICAH BANJARMASINMakasih bang..... :)

July 5, 2012 at 1:37 AM

@tovaSilahkan ni sob.... :)

July 5, 2012 at 2:32 AM

sangat membantu sekali mas buat yang pengen membuat threaded comment,,...

July 5, 2012 at 3:01 AM

aduh.Jangan bawa-bawa nama saya.Itu diatas semestinya judulnya modifkasi threaded komen.Tapi modifikasi threaded komen,.......hehehe

July 5, 2012 at 3:35 AM

mantep sob..

July 5, 2012 at 4:24 AM

wah keren nih sob . . .

ada gak threaded komen yang skinnya beda??
kalo ada, di post dong :)
heheh

July 5, 2012 at 4:49 AM

ini yang baru mas,,
kayanya mantaff nih, codenya ngga terlalu banyak kaya yg lain
saya coba di blog yg satunya aja n_n

wahh oke juga nih bagi yang belum bisa buat koment seperti ini

July 5, 2012 at 10:58 AM

saya ud coba sob...tpi error...
by the way..nice share...

July 5, 2012 at 6:10 PM

@EKA IKHSANUDINIya bang... :)

July 5, 2012 at 6:11 PM

@MisbahudinHahaha...emang ada anda sob... :D

July 5, 2012 at 6:11 PM

@binkbenkTerimakasih

July 5, 2012 at 6:12 PM

@FarZCSS nya diutak atik aja, kalo pengen skin yang kamu mau sob.... :)
Maslah nya saya gak terlalu paham ama csss :D

July 5, 2012 at 6:14 PM

@nahap.comHahah iya sob.... :)

July 5, 2012 at 6:14 PM
July 5, 2012 at 6:15 PM

@Shaq DerriSory sob kalo bikin error.... :( kalo tetep gak bisa langsung aja ke sumber kode di hacktutors.info

July 5, 2012 at 6:23 PM

Ane pernah nyoba bang.. tapi ternyata template ane gak bisa pake yang ginian.. pengen juga sih pake,, tapi mau gimana lagi.. nice post bang yusa

July 5, 2012 at 6:31 PM

semoga berguna gan,,, ane demen komn2 gini hhe...

July 5, 2012 at 7:04 PM

@wisnuHahaha ane juga.... :)

July 5, 2012 at 7:06 PM

@ariefGtu to sob... :) yah.....nggak beruntung dong,,, hehehe

July 5, 2012 at 7:11 PM

ijin copas sahabat untuk dipelajari, thanks

July 5, 2012 at 7:14 PM

@Yusa SyihabDengan thread comment kita bisa membalas komentar sesuai topiknya.. bisa pilih-pilih komentar yang mau dibalas... hehehe :)

July 5, 2012 at 9:35 PM

@BRI Jakarta VeteranSilahkan sob... :)

July 5, 2012 at 9:36 PM

@sip-onlineBener gan...setuju banget ama abang,,,, :)

July 6, 2012 at 1:15 AM

Info yang kayak gini ni sob yang penting biar kita bisa tukar pendapat thank ya sob infonya ...

July 6, 2012 at 1:29 AM

mantap sob :)

July 6, 2012 at 1:41 AM

@Mahfid MayantoSama sama sob... :)

July 6, 2012 at 1:41 AM

@budi os 19Thanks sob.... :)

July 6, 2012 at 3:18 AM

@Yusa Syihab
dukunglah sob,,, kodenya kali belum pas...

July 6, 2012 at 3:27 AM

@binkbenkMungkin kode anda ada dua....anda harus mengganti 2-2nya...

July 6, 2012 at 4:10 AM

@Yusa SyihabTernyata gini....kalo sudah pakek threaded koment...tinggal narus cssnya :)

July 6, 2012 at 5:53 AM

sob sudah di tes blm cara di atas..?
punya aku kok ga muncul replynya..?
semuanya sudah benar tapi tombol reply nya kok ga ada..?
kesalahannya d mana sob..?
apa d komen lama ga muncul dan harus yg komen baru baru ada reply nya..?

July 6, 2012 at 7:55 AM

Ini yang dicari sobat, izin sedot ilmunya sob..

July 6, 2012 at 9:57 AM

@efliandaSudah sob....demonya ada di demo-widget-yusa.blogspot.com...

July 6, 2012 at 9:58 AM

@cheloniaSilahkan sob... :)

July 6, 2012 at 6:48 PM

keren sob,

July 6, 2012 at 8:44 PM

@Saeful RahmanTerimakasih.... :)

July 6, 2012 at 10:18 PM

Thanks gan tutorialnya... ane coba ah, boleh ya gan :D

July 7, 2012 at 12:44 AM

Punya Saya , Pas Mau di Klick "Reply" , Pop Up nya Nggak Keluar Sob , Solusinya Gmna Nihh !

July 7, 2012 at 1:05 AM

@Blog's KevinIni threaded comment sob....jadi gak perlu buka pop up

July 7, 2012 at 1:44 AM

Terus , Cara Ngereply nya Gmna !!!

July 10, 2012 at 7:01 AM

Thank's !!! Trick nya Manjurr !!!

July 11, 2012 at 11:47 PM

wokey keren makasih yak ^^

July 11, 2012 at 11:58 PM

@katarinawinaSama sama... :)

July 13, 2012 at 4:47 AM

@Kevin Sullivanjawabanye Udah ane bales di blog mu sob..

July 13, 2012 at 4:47 AM

@Kevin SullivanMakasih dah mampir... :)

July 14, 2012 at 9:36 PM

Izin Praktek mass... Kalo da Waktu Mampir Ya.. :)

July 15, 2012 at 12:42 AM

@Dark OptimusOke sob.. :)

July 15, 2012 at 9:26 AM

@Yusa Syihabtapi saya sempat putus asa mas buat koment sperti ini.... dengan bantuan temen2 blogger akhirnya bisa juga.....

July 16, 2012 at 3:33 AM

ya sob...
kalo yg kayak gini....
template-ku kagak pernah bisa....
huft....

July 16, 2012 at 4:40 AM

ane bookmark dulu sob hehehe

July 21, 2012 at 10:02 PM

wah keren ni thread comentnya saya coba dl bro..:)

keliatannya enarik,saya coba ya.
terima kasih.

September 9, 2012 at 8:32 AM

Bisa gak tombol reply yang kayak blog ini tanpa popup?

October 26, 2012 at 1:14 AM

Thx Sob Work tutorialny..smoga sukses y

November 4, 2012 at 2:34 PM

sepertinya template bawaaan blog saya memusingkan kepala , kare pada ]]> tidak diisi oleh CSS namun CSS menggunakan TAG type="text/css" yang membuat kepala pusing

November 15, 2012 at 7:20 PM

gan knp gagal dipasang nih diblog aku....

November 17, 2012 at 5:44 AM

@Dian (Admin Sobat Blogger's)

Wihh Bermafaat Banget Tuh ^_^ ..
Jgn Lupa Mampir Ke Blog saya..
Salam Blogwalker

November 19, 2012 at 11:20 PM

Selamat siang gan, saya ingin mengajak anda untuk bekerja sama dengan saya..

Ohh iya, agan FOLLOW blog saya, nanti di FOLLBACK deh oleh saya. Berikut link'nya =>> [ YUEZHA SOFTWARE ]

November 27, 2012 at 12:16 AM

makasi sob info nyaa
berguna banget ne

o yaa jangan lupa kunjungi blog ane yaa
http://rezamunawan.blogspot.com/

January 26, 2013 at 12:18 PM

Terimakasih atas info nya mas,,
Sangat membantu sekali buat nubi seperti saya...

Langsung dicoba mas..

sebelumnya salam kenal dri Aan Shared..

visit me
http://aan-shared.blogspot.com

February 21, 2013 at 1:00 AM

Mas, makasih ya... aku berhasil menerapkannya. Tinggal saya edit CSS-nya ^^
Alhamdulillahh... Nuwun mas

Kunjungi : m-zee.blogspot.com (masih dalam tahap pengembangan tapi) hehe

May 4, 2013 at 5:12 PM

Keren gan, ane ijin praktek yo :D

jangan lupa kunjungi blog ane juga

<a href="http://www.frankyshare.us/>DISINI</a>

August 8, 2013 at 2:49 PM

berhasil sob ^^ terimakasih ya, baru sekarang nih kode yang ane coba berhasil hehe soal nya kode di tutor lain pada kacau. thanks ya

November 26, 2013 at 8:24 PM

Keren Sobat saya selalu berkunjung di blog ini keren semua postingannya

October 15, 2014 at 6:23 AM

saya ucapkan terimakasih banyak karena tampilannya saya suka banget.

Post a Comment

Silahkan kalian berkomentar,namun tetap jaga kesopanan dengan tidak melakukan komentar spam (•͡˘˛˘ •͡)┌П┐ .
Untuk yang tidak mempunyai akun apapun,anda bisa gunakan Anonim (✿◠‿◠)...
Untuk membalas komentar/reply akan keluar Pop Up, jangan hapus kode yang ada di kotak komentar
\\▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼| |▼▼▼//

Welcome to: Mas Yusa Blog | Twitter: Yusa_Syihab & Google+: Yusa Syihab
 
Follow Me

English
Japanese
Korean
Arabic
Chinese Simplified

Kembali Ke Atas Copyright © 2012 | Template Platinum Theme Modified by Mas Yusa