Last Minute Posts

11 Oktober 2009 aRi isTiadi

Sudah beberapa minggu ini saya tidak menambah postingan di blogger
karena beberapa hal yang menghalangi saya menambah postingan
seperti ini
yang saya pakai di blog saya



ada teman blogger yang bertanya "bagaimana membuat kotak komentar jadi 2 kolom dengan nomor komentator"

sebenarnya saya mendapatkan cara membuat 2 kolom kotak komentar
dari blognya kang jaloe
tetapi karena ada beberapa kodenya yang tidak cocok dengan beberapa template
oleh karena itu sebelumnya saya minta izin untuk mengeditnya

Mau gak tuh pasang Kolom komentar Yang kayak gitu?
kalo Mau yuk ikuti langkah langkahnya

pertama:
Login dahulu di account blogger anda
kedua:
Pilih Tata Letak
ke tiga:
Pilih Edit HTML


untuk menghindari sesuatu yang tidak diinginkan
jangan lupa untuk membackup dulu template anda
dengan mengklik Download Template Lengkap







nah sebelum memulainya
kasih tanda ceklist di kotak yang sebelah kiri Expand Template Widget



coba anda cari kode di bawah ini
/* Comment */

atau

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

kalau sudah ketemu ganti semua kode kodenya dengan kode di bawah ini


/* Comments
----------------------------------------------- */
#comments h4 {margin:1em 10px; padding:10px; font-weight: normal;
line-height: 1.4em; text-transform:lowercase; letter-spacing:.2em;
color: #ccc;
}

#comments-block {margin:.5em 0 1em; line-height:1.6em;
padding:10px;
}
#comments-block .comment-author {display:block; width:90px;
height:110px;
margin:0; text-align:center; padding:5px 0 0; line-height:1.4em;
font-size:13px; text-transform:capitalize;
}

#comments-block .mount-author {
display:block; overflow:hidden; max-height: 16px;
text-align:center;
}

#comments-block .comment-body {
background:#fff ; border-top:3px double #ccc; margin:20;
border-right:1px dotted #ccc;border-left:1px dotted #ccc;
padding:10px 5px 0 10px;
}
#comments-block .comment-footer {
background:#EDFDC0 ; border-right:1px dotted #ccc;
border-left:1px dotted #ccc;border-bottom:3px double #ccc;
margin-bottom:5px; padding:5px 5px 5px 10px; line-height: 1.4em;
text-transform:normal; font-size:10px; letter-spacing:.1em;
}

#comments-block .comment-body-author p {
background:#C0E6FD ; border-top:3px double #ccc;
margin:0; padding:10px 5px 0 10px;
}
#comments-block .comment-footer-author {
background:#EDFDC0 ;border-bottom:1px solid #ccc;
margin-bottom:5px;padding:5px 5px 5px 10px;
line-height: 1.4em; text-transform:normal;
font-size:10px; letter-spacing:.1em;
}

#comments-block .comment-body p {
margin:0;
}
.comment-form { background:#ffff;
}

.deleted-comment {
font-style:italic; color:gray;
}

.numberingcomments{
margin-top:5px;
font-family: 'Century Gothic','Lucida Grande',Arial,Helvetica,Sans-Serif;
font-size: 20px; font-weight: normal;
}

#blog-pager-newer-link {
float: $startSide;
}

#blog-pager-older-link {
float: $endSide;
}

#blog-pager {
text-align: center;
}

.feed-links {
clear: both;
line-height: 2.5em;
}












selanjutnya coba anda cari kode 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>




kalau sudah ketemu,hapus kode yang di atas
kemudian ganti dengan kode berikut ini


<dl id='comments-block'>
<script type='text/javascript'>var CommentsCounter=0;</script>
<b:loop values='data:post.comments' var='comment'> <div style='width: 10%; float: left;'><div class='' expr:id='data:comment.id'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<div class='mount-author'> <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></div>
<div class='commentphoto' style='margin-top:.5em;'/><span class='numberingcomments'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='Comment Link'>
<script type='text/javascript'>
CommentsCounter=CommentsCounter+1;
document.write(CommentsCounter)
</script>
</a>
</span>

</dt></div></div>
<div style='width: 80%; float: right;'>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</dd>
<dd class='comment-footer-author'>

<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
<b:else/>

<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='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd></b:if></div>

<div style='clear: both;'/>
</b:loop>
</dl>




setelah itu SIMPAN TEMPLATE/SAVE TEMPLATE



nah sekarang kolom komentar anda menjadi 2

dah kayaknya itu saja caranya
silahkan di coba dan di peragakan
kalau belum berhail tanyakan saja


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

21 komentar:

(maaf) izin mengamankan PERTAMA dulu. Boleh kan?!
Makin mantaaaabs aja ilmunya.
Lanjutkan!!!

Alhamdulillah, meski comen ke-2, tetep dapat ilmunya

keren nich kotak komentarnya make nomor mirip ama wordpress yach x(

ntar aku coba di blog baru ku sob makasih ya infonya:-D

Kayaknya bagus juga nich, jadi pengen.. Terima kasih sob :)

bagus kang tutorialnya

keep posting

salam sobat trims infonya dan ilmunya,,
membuat 2 kolom komentar dan nomor komentar,,
seperti milik sobat ini ya,,contohnya,,
jadi pingin juga,,biar lebih rapi .

salam dari NURA

Mantap juga sob tutorialnya neh..trims

wao keren sob :) ,btw tau gak caranya ngubah bentuk comment di WP jadi satu comment satu jawaban dalam satu kotak comment gt ,tau bro? kalau tau balas ya sob di blog gua :) ,gua tunggu :)

mantap dech tutorialnya.. perlu dipraktekkan nich. maksih telah berbagi pengetahuan

beW..manteb nih sharing ilmunya.. ntar gw cobain sob :-) btw komeng balik yaa ;-)

hehehe.. koq yang saya salut tuh cara peletakan tulisan kode script na.. jadi keliatan hidup.

Boleh juga nih tipsnya sobat... tapi eror gak yah...

thanks sobat.. atas infonya saya coba nih..

MANTAP !! postingannya BOS !! Jangan Lupa Berkunjung, , , ,

nice post..........

good luck...........

mas tolong aku dong aku coba nggak berhasil... soalnya aku bingung mau di letakkan di mana tu script... bales di blog ku ya...please

Terima kasih info yg sangat menarik menurut ane, semangat terus gan keep posting. Makin jaya untuk ngeblognya. Barangkali mau mampir ke blog ane silahkan blogwalking.

Spesialis penyakit dalam, termasuk wasir atau wasir, pengobatan herbal

Kirimkan Komentar Anda

Mohon Komentarkan ketika anda selesai membaca

Bagi anda pengguna blog,harap pilih Name/URL
untuk memudahkan saya membacklink anda