Merubah Threaded Comment Dengen Css 0

Threaded comment merupakan fiture baru dari blogger yang memudahkan para pengunjung atau pembaca serta pemilik blog untuk berbalas komentar dengan daftar komentar berurutan kebawah sesuai dengan komentar yang di tanggapi.Sebelum adanya threded komen pada blogger kita semua mungkin tau bahwa ketika kita akan menjawab komentar dari pengunjung blog kita, kita akan menggunakan @ untuk membalas komentar seseorang serta menambahkan tombol reply komentar dan menambahkan fungsi reply komentar .
Fiture ini hanya berlaku pada templete-templete resmi dari blogger dan tidak pada custom templete atau templete-templete yang di sediakan oleh pihak ketiga melainkan kita harus mengaktifkan threaded komen terlebih dahulu.

Adapun langkah-langkah mengaktifkan threaded komen tersebut adalah:


1. login ke blogger dengan ID sobat.

2. Pilih Rancangan atau Tata Letak.

3. Pilih Edit HTML.

4. Centang tulisan "expand template widget".

5. Lalu cari kode dibawah ini(untuk mempermudah pencarian tekan F3 atau ( Ctrl+ F )) .


<b:include data='post' name='comments'/>



6. Jika anda telah menemukan kode tersebut anda akan mendapati lebih dari satu kode

seperti diatas ini bisa 2 , 3 atau sampai 4 kode yang sama .dapatkan kesemua kode

yang sama tersebut dan ganti dengan kode si bawah ini .

<b:if cond='data:post.showThreadedComments'>

<b:include data='post' name='threaded_comments'/>

<b:else/>

<b:include data='post' name='comments'/>

</b:if>

7. Setelah anda mengganti kode dan menyelesaikan langkah ke 5 dan ke 6 kemudian

simpan templete anda.Dan diharapkan threaded komen pada templete anda telah

aktif.


Selanjutnya setelah anda mengaktifkan threded komen pada templete anda, dan Sesuai

dengan judul postingan yang saya buat yaitu merubah threded komen dengan menggunakan

css ikuti langkah berikut ini:


I. Cari kode berikut]]></b:skin>kemudian

copy dan paste script css di bawah ini Diatas kode

]]></b:skin>

/* Start Comment Style Code */

.comments{clear:both;margin-top:10px;margin-bottom:0;font-family:Arial;line-height:18px;font-size:13px}

.comments .comments-content{margin-bottom:16px;font-weight:normal;text-align:left}

.comments .comment .comment-actions a,.comments .comment .continue a{display:inline-block;margin:0 0 10px 10px;padding:0 15px;color:#424242 !important;text-align:center;text-decoration:none;background:#fede72;border:1px solid #fec648;border-radius:2px;height:26px;line-height:28px;font-weight:normal;cursor:pointer}

.comments .comments-content .comment-thread ol{list-style-type:none;padding:0;text-align:none}

.comments .comments-content .inline-thread{padding:0}

.comments .comments-content .comment-thread{margin:8px 0}

.comments .comments-content .comment-thread:empty{display:none}

.comment-replies{margin-top:1em;margin-left:40px;background:#fff}

.comments .comments-content .comment{margin-bottom:0;padding-bottom:0}

.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:normal}

.comments .comments-content .user a{color:#0E6284;font-weight:normal;text-decoration:none}

.comments .comments-content .icon.blog-author{width:18px;height:18px;display:inline-block;margin:0 0 -4px 6px}

.comments .comments-content .datetime a{color:#0E6284;font-size:12px;float:right;text-decoration:none}

.comment-content{margin:0 0 8px;padding:0 5px}

.comment-header{font-size:18px;background-color:#f1f1f1;border-bottom:1px solid #e3e3e3;padding:5px}

.comments .comments-content .owner-actions{position:absolute;right:0;top:0}

.comments .comments-replybox{border:none;height:230px;width:100%}

.comments .comment-replybox-thread{margin-top:0}

.comments .comment-replybox-single{margin-top:5px;margin-left:48px}

.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:0}

.comments .comments-content .loadmore.loaded{max-height:0;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("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAc AAAAHCAYAAADEUlfTAAAAG0lEQVR42mNgwAfKy8v/48I4FeA0AacVDFQBAP9wJkE/KhUMAAAAAElFTkSuQmCC") no-repeat scroll 0 0 transparent}

.comments .thread-collapsed .thread-arrow{background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA AcAAAAHCAYAAADEUlfTAAAAJUlEQVR42mNgAILy8vL/DLgASBKnApgkVgXIkhgKiNKJ005s4gDLbCZBiSxfygAAAAB JRU5ErkJggg==") no-repeat scroll 0 0 transparent}

.avatar-image-container{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjI8GK7GoyuLOaqyp1ccEWl3gjsCsZepK9AIycvE4z_tNeqswrOUfkz_aXDCpuOmC2VTJXLT3ma-lgaWMkB_aTisL62-E96KCFZSHfHdhTVPUMPeJUQK4q3SmOkvMcUhMGHhch_Su6La-4/s51/arrow.png) top right no-repeat;float:left;vertical-align:middle;overflow:hidden;width:65px !important;height:51px !important;max-width:65px !important;max-height:51px !important}

.comments .avatar-image-container img{padding:2px;border:1px solid #ccc;width:45px !important;height:45px !important;max-width:45px !important;max-height:45px !important}

.comments .comment-block{margin-left:65px;position:relative;border:5px solid #e3e3e3;border-radius:8px}

@media screen and (max-device-width:480px){.comments .comments-content .comment-replies{margin-left:0}}

/* End Comment Style Code */

Selanjutnya simpan templete anda.

Setelah menggikuti langkah-langkah diatas saya yakin tampilan threaded komen anda sudah jauh berbeda dengan aslinya dan.

Selesai selamat mencoba dan semoga bermanfaat......