Tumben rasanya blog seo doodey ini membahas soal tutorial blog, semenjak update tutorial kemaren tanggal 5 April kemarin pada artikel yang berjudul "
Cara Mengganti Warna Kotak Komentar Anda". Dan untuk kali ini, sebagai lanjutnya membahas tutorial dari postingan sebelumnya, saya akan mencoba memberikan tutorial tentang
mengoptimasi kotak komentar blogger.
Baik, langsung aja. Berikut tutorialnya.
Merubah lebar kotak komentar
Tambahkan CSS
(Cascading Style Sheets) berikut di atas
]]></b:skin>.comment-form {
width:425px;
max-width:425px;
overflow:auto;
clear:both;
}
Catatan: Tambahkan jika CSS tersebut belum include dalam CSS template blog Anda. Kemudian silakan rubah nilai atribut yang berwarna merah, bisa dengan menggunakan satuan px, em, %, atau pt. Atribut width berfungsi untuk mengatur ‘lebar’ suatu elemen, sedangkan max-width digunakan untuk mengatur ‘lebar maksimal’ suatu elemen.
Aksesoris kotak komentar
1. Menambah teks sebelum kotak komentar
 |
| Menambah teks sebelum kotak komentar (panah hitam) |
Berikut kodenya :
<h2 id='comment-post-message'><data:postCommentMsg/></h2>
<p>Silakan berkomentar, tapi jangan memasukkan SPAM yah…</p>
<p><data:blogCommentMessage/></p>
<data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src'/>
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
Catatan: Kode yang
berwarna merah merupakan kode yang dicari, sedangkan yang
berwarna hijau merupakan sisipan teks untuk menambah informasi di atas kotak komentar. Default untuk kode yang berwarna merah adalah
<h4 id='comment-post-message'><data:postCommentMsg/></h4>2. Menambah variasi teks atau gambar di samping kotak komentar
Sebelum Anda mencoba menambah variasi teks maupun gambar di samping kotak komentar, terlebih dahulu Anda perlu meninjau lebar—dengan atribut width—elemen komentar (#comments) & lebar kotak komentar (.comment-form) pada CSS template blog Anda. Jika lebar yang Anda tinjau sudah terasa cukup untuk dapat menampung elemen baru, mari kita lanjut ke langkah berikutnya.
Yang perlu digarisbawahi bahwa konsep berikut hanya merupakan ‘contoh’ atau tidak bersifat ‘mutlak’.Coba Anda lihat gambar di atas tadi, perhatikan yang diberi tanda panah berwarna merah. Mungkin seperti itulah penambahan yang saya maksudkan dan bentuknya lebih kurang terlihat pada gambar di bawah ini.
 |
| Baca: You still on the focus. Enjoy with Blogger™ commenting system. Please don't include spam....... |
Untuk membuat aksesoris seperti di atas, maka Anda perlu menambahkan kode CSS maupun HTML dalam template blog Anda.
Berikut kode CSS nya.
.intermezzo {
float:right;
width:32%;
margin-top:8em;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}
.intermezzo .first-letter {
float:left;
line-height:0.5em;
padding:0.175em 0.15em 0.0175em 0;
font-size:5em;
}
.intermezzo .first-line {
margin-left:-5.75em;
}
.intermezzo .enjoy {
display:block;
font-variant:small-caps;
font-weight:bold;
}
.intermezzo .type-s {
padding:0.175em 0 0;
font-size:6.15em;
vertical-align:-0.35em;
}
.intermezzo .end-letter .hidden-s {
color:#fafafa;
display:block;
position:absolute;
left:-1.75em;
}
.intermezzo .end-letter {
text-transform:uppercase;
font-size:2em;
margin:-0.225em 0 0 2.225em;
display:block;
position:absolute;
}
.intermezzo .dot {
font-size:1.5em;
bottom:-1.5em;
margin-left:6em;
display:block;
position:absolute;
}
.dot .dot-1 {
bottom:-0.5em;
display:block;
position:absolute;
}
.dot .dot-2 {
bottom:-1em;
display:block;
position:absolute;
margin-left:-0.25em;
}
.dot .dot-3 {
bottom:-1.5em;
display:block;
position:absolute;
margin-left:-0.75em;
}
.dot .dot-4 {
bottom:-2em;
display:block;
position:absolute;
margin-left:-1.525em;
}
.dot .dot-5 {
bottom:-2.5em;
display:block;
position:absolute;
margin-left:-2.5em;
}
.dot .dot-6 {
bottom:-3em;
display:block;
position:absolute;
margin-left:-3.75em;
}
Perhatikan :
- Letakkan kode tersebut di atas ]]></b:skin>
- Warna biru menunjukkan bahwa kode CSS tersebut cocok untuk template ini dan belum tentu balance dengan template blog Anda. Apabila Anda memaksa untuk tetap menggunakan CSS di atas, mungkin Anda perlu pula merubah nilai atribut dari masing-masing ‘markup’-nya, baik sebagian maupun keseluruhan. Dan jika Anda beruntung, berarti Anda tidak perlu merubah kode CSS tersebut.
- Warna merah merupakan kode yang mungkin perlu dirubah agar sesuai dengan tenya.mplate blog Anda. Width menunjukkan lebar elemen dan margin-top menunjukkan jarak margin suatu elemen dengan bidang di atasnya.
- Warna hijau merupakan sintaksis dari transformasi memutar suatu elemen dalam CSS3.
Berikut kode CSS nya.
<p class='intermezzo'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger™ commenting system.</span></span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></p>
Letakkan kode HTML tersebut di atas kode berikut.
<p class='comment-footer'> <b:if cond='data:post.embedCommentForm'> <b:if cond='data:post.allowNewComments'> <b:include data='post' name='comment-form'/> <b:else/> <data:post.noNewCommentsText/> </b:if> <b:else/> <b:if cond='data:post.allowComments'> <a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a> </b:if> </b:if> </p> </b:if> <b:if cond='data:showCmtPopup'> <div id='comment-popup'> <iframe allowtransparency='true' frameborder='0' id='comment-actions' name='comment-actions' scrolling='no'> </iframe> </div> </b:if>
Apabila Anda memulai pencarian dengan kode
<p class='comment-footer'>, maka Anda akan menemui 2 (dua) kode.
Pilihlah yang kedua!Untuk menjaga format komentar agar tidak berantakan, Anda dapat menambahkan kode :
<div style='clear:both;'></div>
di atas kode HTML :
<p class='intermezzo'>
Ketika Anda melakukan pengaturan bahwa komentar tidak diizinkan karena suatu sebab atau lain hal, mungkin aksesoris teks/gambar di samping kotak komentar tidak diperlukan lagi. Tambahkan kode berikut (warna merah) di antara HTML .intermezzo.
<div style='clear:both;'></div>
<p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger<sup>™</sup> commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p>
Di halaman statis kok muncul juga? Tambahkan kode berwarna biru berikut di-antara HTML .intermezzo.
<div style='clear:both;'></div>
<b:if cond='data:blog.pageType != "static_page"'><p class='intermezzo'><b:if cond='data:post.allowNewComments'><span class='first-letter'>You</span> <span class='first-line'>still on the focus.</span> <span class='enjoy'>Enjoy <em>with</em> <span style='font-size:0.75em;'>Blogger<sup>™</sup> commenting system</span>.</span> Plea<span class='type-s'>s</span>e, don't include <span class='end-letter'><span class='hidden-s'>s</span>pam.</span> <span class='dot'>.<span class='dot-1'>.</span><span class='dot-2'>.</span><span class='dot-3'>.</span><span class='dot-4'>.</span><span class='dot-5'>.</span><span class='dot-6'>.</span></span></b:if></p></b:if>
Kemudian rubah CSS .comment-form menjadi (lihat kode berwarna merah) :
.comment-form {
width:…;
max-width:…;
overflow:auto;
clear:left;
}
dot…dot…dot tersebut tergantung isian nilai yang telah Anda masukkan.
5. Jika sudah, klik "Save Template". Dan lihat hasilnya..
