BloonOnline GoTemplatez VersiEdan
Facebook Twitter You Tube Friendfeed
Blog Seo Intermezo

Upgrade desain halaman komentar 2 kolom

imagesfree

Tulisan ini merupakan “ Upgrade Vesion Tentang Desain layout komentar  2 kolom “. thank buat blog hajunik karena source kodenya saya ambil dari template buatannya “ True Elegan “, dan makacih juga buat suhu mochal yang telah memodifikasi pada author comment highlighting-nya .

Terutama di bandingkan dengan yang terdahulu ( bisa di lihat di sini ), maka upgrade version ini  untuk loding time-nya lumayan ringan, dan juga jika di lihat dari source kodenya lebih simple dari sebelumnya.

Cara Penerapanya :

Pertama :

Backup dulu template kita. setelah itu buka tab Tata Letak- Edit Html.

Kemudian centang/tandai kotak kecil di samping tulisan Expand Template Widget.

 

Setelah itu cari kode berikut ini.

<b:loop values='data:post.comments' var='comment'>

kode keseluruhan-nya menjadi  seperti di bawah ini.

<dl id='comments-block'>
        <b:loop values='data:post.comments' var='comment'>
          <dt expr:class='&quot;comment-author &quot; + 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 ganti semua kode di atas dengan kode html ini.

<ul class='commentlist'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'><li>
<div class='' expr:id='data:comment.id'>
<div class='pane_l'>
<div class='c_author'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<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>
<br/>
Said
</dt>
</div>
<div class='c_avatar'/>
<div class='commentphoto' expr:class='data:post.avatarIndentClass' style='margin-top:.5em;'/>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<a expr:href='&quot;#comment-&quot; + data:comment.id' style='font-size:14px;' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</div>
<b:if cond='data:comment.author == data:post.author'>
<div class='owner-Body'>
<p><data:comment.body/></p>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</div>
<b:else/>
<div class='pane_r'>
<p><data:comment.body/></p>
<b:if cond='data:comment.isDeleted'>
              <span class='deleted-comment'><data:comment.body/></span>
            <b:else/>
<div class='c_date'><data:comment.timestamp/></div>
<div class='c_approved'/><br/>
<b:include data='comment' name='commentDeleteIcon'/>
</b:if>
</div>
</b:if></div>
<div class=' clear'/></li> </b:loop>
</ul>

 

Kedua :

Pada bagian kedua ini menyimpan ( atau menganti )  Css comment. dan yang pertama kali  saya lakukan adalah menambah kode Css global riset, – untuk kasus ini , saya menambahkan global reset list .

ul {   
   margin:0px;
   padding:0px;
   list-style-type:none;
  }

Simpan kode tersebut di atas atau di bawah properti body ini

body{ background:$bgcolor;  margin:0;…. }

 

kemudian setelah itu . saya mengganti css comment  - red. biasanya di bawah kode keterangan seperti ini.

/* Comment  */

Atau seperti ini ....

/* Comment
-------------------------------------------------- */

dengan kode css berikut ini.

#comments{background:transparent; border:solid #ccc 0px;  margin-bottom:10px}
#comments h4{ margin:1em 0;  padding:10px;  font-weight:bold;   line-height:1.4em;  text-transform:uppercase;  letter-spacing:.2em;   color:$sidebarcolor}
#comment-list {margin-top: 10px;padding:10px;
background: transparent;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv {
margin-top: 10px;padding:10px;
background: #FFF;border:
1px dotted #ddd;font-size: 1.75em;color: #666;}
.commentlistdiv h1 {font-size: 1.3em;
color: #366799;border-bottom: 1px solid #eee;
line-height: 1.5em;}
.commentlist li {background: transparent;
border-bottom: 1px dotted #ddd;padding: 20px 10px 5px 10px;}
.commentlist li.alt {background: #fff;}
.pane_l {float: left;background:#fff;display: inline;
width: 110px;min-width: 110px;max-width: 110px;
border: 1px dotted #ddd;padding-right: 0px;margin-right: 0px;text-align:center;padding:15px 0}
* html .pane_l{margin-top:15px; }
.pane_r {display: block;line-height: 1.5em;margin-left: 125px;
padding:8px 15px 15px 15px;;background:#fff;
border-left:1px dotted #CCCCCC;
border-right:1px dotted #CCCCCC;
border-top:3px double #CCCCCC;border-bottom:3px double #CCCCCC;}
.c_author {font-size: 13px;font-weight: normal;height:30px;
overflow:hidden;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 0px 0px;
padding-top:20px;}
.c_approved {color: #aaa;font-size: 0.9em;}
.comment-form { background:transparent; border:0px solid #cccccc;
margin:0 10px 20px 10px; padding:10px 0 0 15px;width:95%;}
* html .comment-form {  width:87%; }
.owner-Body {display: block;line-height: 1.5em;margin-left: 125px;
background:transparent;padding:8px 15px 15px 15px;
border-left:1px dotted #33CCFF;border-right:1px dotted #33CCFF;
border-top:3px double #33CCFF;border-bottom:3px double #33CCFF;}
.owner-Body p {
font-size:100%;margin:0 0 0 0;color:black;
text-decoration:bold;
}
.deleted-comment {
  font-style:italic;  color:gray;
  }

 

* atau jika susah mencarinya , bisa juga langsung di simpan kode css tersebut di atas tag.

]]></b:skin>

Setelah itu Simpan Template ..

Page views this post: reader

50 komentar:

Anonymous said...

wah suhu jaloe makin mantap nih ..
Ajarin saya ya suhu ...hue he

Baka Kelana said...

Bis di pake untuk yang 3 atau 4 kolom Bos

kalau bisa mau coba nich

makasih tutorialnya

makin yahud aja totorialnya

Anonymous said...

wah...ini picilakaeun kang,....blog saya bisa amburadul lagi...kaya kemayen..hehe. Seep kang tq

Jaloee said...

@ Abang

wkwkkwk.. masa newbie seperti sy ini ngajarin master-nya..

@ Baka Kelana

bisa boss.. btw met berpusing ria saja...hehehehhe

Baka Kelana said...

Disamping jago Tutorial...rupanya kang juga Jaloe pembaca setia serial Kho ping hoo juga...wach kalau dach baca tuch karangan almarhum jadi lupa waktu.

Kemarin dach coba pasang show/hide komentar belum berhasil...saya pake template 3 dan 4 kolom...ntar tak coba lagi dach...kotak commentnya tambah mantap

Thanks ya

Anonymous said...

he..he..e.. mantap, trus apa hubungannya dengan ISrael....??? Salut dech, saya juga siaga 1 nich.

Bang jawaban tentang membuat width posting dihalaman depan dengan halaman sub berbeda tolong dijawab, ya.

Makasih

Anonymous said...

wah wah wah...kang, makin keren aja nih, makin mantab dan makin nyuknyes nya......

Unknown said...

ini model yang dipake skarang ini ya bang...
kalo ini pengin sekaleeee....

ahmadx said...

ajib sob tutorialnya..
tutorial perang di gaza tak tunggu ya

Anonymous said...

Mamtap brooo,... pengen nyobaa,...

Unknown said...

worraaay...
sukses saya mas..., cuman kok ada titik bulet di samping kiri kotak author... asem besok lagi lah....

Subagya said...

waaah kebetulan nih... ane make no nya pake tag ol kang, hmm nanti di coba ah make script js, btw kalau di kombinasikan dengan author photo kayaknya makin ciamik kang....

Anonymous said...

Makin mumet aku kalo nyimak Suhu Suhu Tutorial pada ngomongin kayak gini...
Sukses suhu...

Unknown said...

waduw pusing nui kang..

hehe..

saya ndak bisa kalo masalah gitu"an..

Kristina Dian Safitry said...

kok gak ada gambar contohnya kang?tapi yang pasti bukan bok komen yg akang pakai sekarang ini khan?

Kristina Dian Safitry said...

khan yang terdahulunya sih modelnya gini emang khan kang.tapi yg membedakanya apa,apakah cuma karena kecepatan loadng?soalnya mau langsung praktek nih..

Cebong Ipiet said...

contohnya mana kang yg baru? apa yg sekarang ini? emmmm g begitu beda kang? apa dari lodingnya aja?

Admin said...

huihhh,,,, keren juga!!!!

JoVie said...

Akang Suhu emang gak bisa dilawan nih ilmunya..keren abizzz..kapan yah daku bisa kursus?? :(. Akang Jaloeku ini sibuk nyari calon istri mulu sih, murid yang baik seperti ini sampe terkena korban cuek..:((

Anonymous said...

wah mantafff.. neh tutornya, tq kang

Anonymous said...

iya, tutornya kang jaloe top abiezzz, gak rugi saya kenal blog ini. buka private gak kang? heheheh..:)

Jaloee said...

@ KDI

iye dari soal loding dan kodenya simple, tidak terlalu menumpuk seperti yg kemarin

@ C ipet

conto na ya ini

Kristina Dian Safitry said...

kalo emang bener contohnya ini,aku mau langsung praktek lho kang. tapi kode2 yg dulu langsung diganti ini ya kang. kalo ada kode yg tertinggal gak kacau tho.btw,kalo dah jadi daku kabari kang.

Jaloee said...

@ KDI

yup .. yg penting bakup dulu kode2 yg di gantinya ke notepad untuk jaga2 saja

Unknown said...

sukses, sudah done bersih,
makasih ya mas Jaloe... aman, betul-betul aman...

Anonymous said...

Wah... kelihatannya asik nih... :)

Anonymous said...

Wah Makasih Banyak Kang sudah mau berbagi Ilmunya :)

Anonymous said...

wah....., siap dicoba dah............

tapi aku musti berpusing ria nie..., bis templateku baru aku compress :(

Zippy said...

Bos, mau dong di editin...
Bos kan baik... :lol:

Junjung Purba said...

bagus juga nih, tp keknya males bgt ngutak-atik HTML:D

Anonymous said...

memampir kang, hehe...

Eni Widiyanti said...

ada saran buat blog tradisional ane...

Anonymous said...

saya naksir dengan orangnya...ehhhh, widget j-gazanya maksudnya :D

dian sosor nunggu jawaban lohhhh :D

saya save dulu tutorialnya sambi di cerna soale maklum oot banget :D

idotkontji said...

wah kang susah pisan nih nyobanya... udah pake intensedebate gagal... sekarang yang ini gagal juga.. template nggak mau nge-save... ini bacaannya:

Please correct the error below, and submit your template again.
Invalid variable declaration in page skin: Variable is used but not defined. Input: sidebarcolor


please kang tulung.. bosen pake comment pop-up mulu... ihiks...

Jaloee said...

@ idotkonji

cari syntax ini $sidebarcolor kemudian ganti dgn #fff atau #000 atau nilai warna lainya terserah

Bisnis Afiliasi said...

Aku ini pencinta setia blog anda, Aku terus terang setiap malam belajar dari blog anda, Salam Hormat dan Belajar Terus untuk mengembangkan IT Indonesia

Jaloee said...

@ Bisnis Afiliansi

wah makasih boss atas kunjugannya selalu... dan makasih banyak atas supportnya selama ini..

dan mohon maaf jika da kekuranganya juga mohon masukan-nya boss..

Anonymous said...

sipp buagd kang. ... .

ajarin gw juga ya. ..

btw speedy naek ,tambah pusing ...

http://www.abalashare.blogspot.com

Bisnis Afiliasi said...

Mohon maaf template suhu aku pakai di blog saya http://cek-bisnis.blogspot.com/, http://cek-google.blogspot.com/ dan http://sumber-usaha.blogspot.com/
sebelumnya saya mohon maaf dikarenakan keingin tahuan saya tentang xml blog. terima kasih

Bisnis Afiliasi said...

suhu, aku mau nanya ini tentang menu seperti (home, archives, daftar isi) untuk linknya gimana apakah pakai kode html dan saya kira bukan widget yang dipakainya

Jaloee said...

@ Bisnis Afiliasi

iye itu tidak pake widget.. untuk mengeditnya buka saja tab edit html kemudian cari menu2 tersebut mas

Unknown said...

nakku kok gag bisa di beri dua kolom to mas....???
gmana ni...??

Jaloee said...

@ Prasetya

wow kenapa mas .. apa dah benar

tracking said...

makasih...om...
tapi ko belum muncul photo authornya yah.....

triangle solutions said...

sudah ane pastekan ke triangle-solutions[dot]blogspot[dot]com

OB said...

Terima kasih info triknya, sangat berguna untuk yang pengen ngerubah tampilan komentar jadi 2 kolom

Kizsee Kiseki said...

wahh, sudah ak coba ni ..
tapi ko ngga ada perubahan ya?
bisa tolong diberi pencerahan? :)
lam kenal ..

Sukadi said...

bisa dipraktekkan nih moga-moga tidak terjadi error... terimakasih

idblogku said...

Kang maaf ko saya nyoba ini ga bisa?..

aieza said...

tampilan blog nya mirip kayak google. keren banget

Post a Comment

" Apapun Yang Dapat Anda Lakukan, Atau Ingin Anda Lakukan Mulailah

Keberanian Memiliki Kecerdasan, Kekuatan Dan Keajaiban Di Dalam-nya"

Makacih Atas Komentar-Nya

 

Copyright 2009. Home | Serba Serbi Google | XHTML | CSS Design by Catalog-Tutorial