Selamat malam kawan,postingan ini khusus dari permintaan YENI.J yang bertanya ( mau tanya...mcm mana kamu buat scroll box dekat comments?boley ajar? ) rupanya bloggerwati cantik ini dari tanah sebrang yang juga mempunyai sebuah blog unik dan menarik di yaniej.blogspot.com mudah mudahan aku gak salah mengartikan pertanyaannya yaitu menanyakan bagai mana membuat scrollbox pada komentar,benar gak yah..?? hehehe...Ok kita lanjut ini didasarkan kepada pemikiran atau prediksi bahwa komentar yang masuk semakin lama akan semakin bertambah banyak .. duh narsisnya.. sehingga halaman blog akan panjang. Untuk mengatasi ini maka dibuat scrolling pada daftar komentar itu , sehingga blog tidak tampak memanjang ke bawah. Caranya bisa simple bisa juga ribet.. hal ini tergantung pada templatenya. Kalau kodenya sama ya.. gampang.. tapi kalau gak sama.. yaa rasakan sendiri aja deh.. hehehe.. yang jelas kita harus mengenali kode HTML tamplate kita sendiri.. karena untuk kode kode tambahan sebenarnya sama aja
Kalau berminat Membuat Scroll Pada Komentar, langkahnya seperti ini :
Cara 1Kalau berminat Membuat Scroll Pada Komentar, langkahnya seperti ini :
- Masuk ke Acount blogger anda atau ke Dashboard
- Pilih Layout, kemudian klik Edit HTML
- klik expand templates widget
- Cari kode seperti di bawah ini
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-singleblock'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-singleblock'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
tambahkan kode ini diatasnya
<div style='overflow:auto; width:ancho; height:400px;'>
dan kode ini dibawah kode </dl>
</div>
#-----------------------------------------------#
Cara 2
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
<b:loop values='data:post.comments' var='comment'>
<dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName'>
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<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>
Kalo sudah ketemu, tambahkan kode berikut, tepat di atasnya,
<div style='overflow:auto; width:ancho; height:400px;'>
dan kode ini dibawah kode </dl>
</div>
Ingat ya, setelah kode </dl> !!
SAVE
#-----------------------------------------------#
Cara 3
/* 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 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;
}
Tambahkan kode dibawah ini di atas kode #comments-block .comment-author {
height:400px;
overflow:auto;border:1px solid grey;
dan SAVE
#-----------------------------------------------#
Cara 4
<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + 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>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</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>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
<b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + 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>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</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>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
Nah, kalau sudah memperhatikan kode di atas, sekarang tambahkan kode berwarna merah,yang akhirnya menjadi seperti berikut:
<div style='overflow:auto; width:ancho; height:350px;'>
<dl id='comments-block'><b:loop values='data:post.comments' var='comment'>
<dt class='comment-author' expr:id='"comment-" + data:comment.id'>
<a expr:name='"comment-" + 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>
<data:commentPostedByMsg/>
</dt>
<b:if cond='data:comment.author == data:post.author'>
<dd class='comment-body-author'>
<p><data:comment.body/></p>
</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>
</b:if>
<dd class='comment-footer'>
<span class='comment-timestamp'>
<a expr:href='"#comment-" + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dd>
</b:loop>
</dl>
</div>
klik SAVE
sampai disini selesai deh semoga bermanfaat yah..!!
8 komentar:
nice tutorial :d:
ya2,ini jawabannya :P
hahahaa..terima kasih GM.Puas yanie cari tutorial ni dekat google...kuikui..
waa...aku suka ni tutorialnya...thanks for the tips ya!
@shida saje shida ku rupanya nampak hadir juga :a:
@yanie j hahaha tak paham aku :j:
@Up2saya.. sama sama :c:
nice tutorial dan sangat bermanfaat terlebih bagi blog yang banyak komen, salam
@Warna Tulisan thanks gan :zz:
Posting Komentar