Kali ini saya hanya sedikit memodifikasi hasil kerja kang jaloee yaitu mengganti perwajahan komentar, di mana saya hanya ingin menambahkan author commentnya beda style atau istilahnya komentar pemilik blog berbeda style dengan komentar pengunjung, seperti yang sobat lihat screenshoot di bawah ini :
Menurut saya perwajahan komentar tersebut sangat menarik dan unik, kalau sobat tertarik ingin membuat perwajahan komentar seperti screenshoot di atas silahkan ikuti langkah-langkah berikut :
1. Seperti biasa login terlebih dahulu ke blogspot, kemudian masuk ke Tata Letak > edit HTML
Jangan lupa simpan template lengkapnya, klik Download Template Lengkap!!
2. Centang Expand Widget Templates
3. Kemudian cari kode css untuk komentar :
/* Comments
----------------------------------------------- */
#comments h4 {
margin:1em 0;
font-weight: bold;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.2em;
color: $sidebarcolor;
}
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
#comments-block .comment-author {
margin:.5em 0;
}
#comments-block .comment-body {
margin:.25em 0 0;
}
#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height: 1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}
#comments-block .comment-body p {
margin:0 0 .75em; }
NB: setiap bagian code css komentar berbeda-beda pada setiap template
4. Ganti semua kode di atas dengan kode di bawah :
/* Comments
----------------------------------------------- */
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 0.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: #fff;
border-bottom: 1px dotted #ddd;padding: 20px;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;display: inline;
width: 160px;min-width: 160px;max-width: 160px;
border-right: 1px dotted #ddd;padding-right: 20px;margin-right: 20px;}
.pane_r {display: block;line-height: 1.5em;margin-left: 201px;}
.c_author {font-size: 0.9em;font-weight: bold;margin: 0px 0px 7px 0px;}
.c_avatar {display: block;margin: 0px 0px 7px 0px;}
.c_date {color: #aaa;font-size: 0.9em;margin: 0px 0px 7px 0px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:#EFEFEF; border:5px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 201px;}
.owner-Body p {
font-size:100%;
margin:0 0 .2em 0;
color:#FF0000;
text-decoration:bold;
}
5. Setelah itu cari bagian di bawah ini :
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='data:comment.url' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Kemudian sobat ganti semua kode di atas dengan kode di bawah ini :
<ul class='commentlist'>
<b:loop values='data:post.comments' var='comment'><li>
<div class='pane_l'>
<div class='c_author'>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>
<b:else/>
<data:comment.author/>
</b:if>
<data:commentPostedByMsg/>
</div>
<div class='c_avatar'/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
</div>
<b:else/>
<div class='pane_r'>
<data:comment.body/>
</div>
</b:if>
<div class=' clear'/></li>
</b:loop>
</ul>
6. Langkah terakhir adalah save template
PERTAMAXXXXXXXXXXXXXXX.....
ReplyDeleteWAKAKKKAA
yang pertamakah???
ReplyDeletemas mochal muncul lagi..hoyyeee
selamat datang bung mochal..ayem waiting foyu
Mochal is back.
ReplyDeletekyknya ane bisa pensiun dari dunia template blogger. ahlinya udah muncul lagi. udah waktunya ane kembali menjadi blogger oon yg cm ngerti bikin posting sederhana aja dan kembali make template minima standart.wekekke.
templatenya masih loem sempurna yah boz? pasti oc abis nih template.
@ herro > wekekekekke pa kabar bro.. selamat anda yang pertama, hadiahnya mabil di polsek terdefkat
ReplyDelete@ anita > yup anda yang kedua, pa kabar nita :D im back wekekekekkekeke
@ heroo > wew..... ane kan curi ilmu ente suhu herro ....
ReplyDeletenumpang disave ya om.wahhh ganti template ya hohohoh :D
ReplyDeleteini lebih asyik keknya.
ReplyDeleteNah gitu dong chal, jangan ngilang lama-lama ..
ReplyDeletesemoga sehat dan sukses selalu yach ...
Mochaaaalllll.... :hug:
ReplyDeleteMasa bertapamu dah slese? Karena hibernasiku masih on progress :p :p
Kangen juga nih ma Mochal hehe..
huehuehue........ mas Subagya kembali dengan wajah yang juga baru. Dibuka dengan tutorial super keren lagi..... HORAY!
ReplyDeletewah... udah mulai ngeblog lagi ya... wahhh... ganti wajah...
ReplyDeletewaduh... makin sipp aja nih... hasil semedinya mantap :) hehee boleh tukeran link gak nih?
ReplyDeletehoreeeeeee brother...hw ar u today.....wah seneng buanget nih ngeliad pak polisi dah on the line lagi....selamad dateng yah kang....jangan hilang lagi yah......
ReplyDeleteweits....hasil semedi yang ruaaaarrrrr biasa kang....., boleh tukeran link gag :D?
ReplyDeletehebat... kata kang herro bapak ini ahlinya ya? wah mesti berguru neh
ReplyDeletejovie cuma mau bilang "KANGEEEEEEEEEEN"
ReplyDeleteSip bgt tutorialnya kang. :) rasanaya sudah waktunya style comment blog saya diganti.
ReplyDeletewew master template blogspot ni, bantuin sayah donk, pliisss. template sayah error ni, iks.
ReplyDeletejadi ngeri ubrak abrik template
akhirnya ^_^ netes juga telor lu chal
ReplyDeletewah mas nie keren juga.... palagi kalau ada foto authornya kaya yang kemaren
ReplyDeletemantap, kita khan satu suhu,hue..he..
ReplyDeletenah gitu donk nonghol lagi chal.. jgn ke lamaan tapanya entar idenya pada ngilang tuh..
ReplyDeletesy tunggu aksi berikutnya suhu
@ ipank > silahkan om
ReplyDelete@ mantan kyai > menurut saya begitu juga om
@ abang > amiien bang
@ uliee > wekekeke kok hibernasi sigh lie
@ lyla > boleh mbak
@ hary > boleh bro
@ fauzan > bisa aja wekekekekke
@ jovie > aku memang ngangeninkan wekekekkekeke
@ alam > im back wekekekek
@ tongkonan > silahkan om, menurut saya bagus juga nigh
@ ar-ros > sudah saya balas di postingannya bro
@ cebong > ya soalnya telurnya dagh lama di eram wekekekke
@ anas > ide bagus nas
@ diah > yup satuju
@ jaloee > wekekekekek master suhu bisa aja....
Keren Mas Bagus Tuh Kreatif dan Inovatif banget nih Jadi Inspirasi buat Saya
ReplyDelete@ ade > wah mau di hack nih de :D
ReplyDeleteThis comment has been removed by the author.
ReplyDeletebgus, tpi perasaan comentnya jdi ga bisa dihapus
ReplyDeletemantap pisan euy...
ReplyDeleteboleh dicoba nggak bos???
mantap euy artikelnya hehhe...
ReplyDeleteHello! It is enough helpful information.
ReplyDeletehttp://law-us.blogspot.com/
aku coba deh moga berhasil n ok, terima kasih...matur nuhun,ya....
ReplyDeletepatut di coba
ReplyDeletewah ini dia nih yg ane lama cari2 ternyata ada disini jg .. salut deh buat mas :-D
ReplyDeletewew....
ReplyDeletengoprek daleman blogspot blom pernah neh ...
bisa juga ne jd info
Kang, kok kodenya di Simple Box Template punya kang guruh, gak ada kode Comment diatas? Agak resiko kalo ngeraba-ngeraba.. ngeri error.. Ada solusi Kang?
ReplyDeletethanks infonya :)
ReplyDeleteIjin copy paste gan
ReplyDeleteWah kere nih, Eh ramenya yg komentar dsni. Ikut ngramein ya....
ReplyDeleteoya gan, bisa ngk tmpilan komentarnya admin beda sama pgnjung? gmn caranya?
hehehehe jajal komentar berbeda
ReplyDelete