Trik Mempercantik kotak komentar Blog

Assallamu'alaikum sobat semua, abis muter2 bersama mbah Google sambil buka GoogleBlogJember, nyasar kesebuah blog yang sangat keren, bongkar2 tiap artikel di sana, dan saya dapati sebuah artikel yang berjudul " Membuat kolom komentar balon bicara dengan kode css " karena penasaran apa sich maksudnya akhirnya saya baca dan pelajari isi artikel tersebut, Wowww ... keren sekali triknya gan, agar sobat juga gak penasaran ini saya copy halaman artikel tersebut berserta sumbernya, Start >>>>Tampilan kolom komentar seringkali luput dari perhatian kita saat memodifikasi template. Sementara dihalaman depan blog terpampang widget-widget cantik,halaman post hanya di bumbui kolom komentar default bawaan dari blogger saja. Padahal,design bentuk dan pengunaan variasi warna yang tepat,bisa menjadi sebuah alasan mengapa pengunjung ingin meninggalkan komentarnya di blog kita lho.

Kali ini kita akan belajar membuat kolom komentar dengan gaya "Balon Bicara" seperti yang dikomik-komik. Tentunya,tanpa image dan murni 100% dari kode CSS saja.

1. Login ke Account Blogger sobat. masuk ke Tab Rancangan/Design , kemudian pilih Edit HTML.

2. Beri tanda centang pada Expand Template Widget. (jangan lupa backup template anda dengan mengklik linkDownload Full Template)

3. Cari kode ]]></b:skin>

4. Ganti kode tersebut dengan kode berikut ini :

#bg_commentblock{width:678px;background:#fff;border:1px solid#91bde6;float:left;padding:10px;margin:0px;-moz-border-radius:10px;}
#bg_commentblock li{list-style:none}
.comment-body{background:#eee;padding:5px 10px;-moz-border-radius:10px;margin:30px 0px 0px 10px;border:1px solid #aaa;}
.comment-body .sg1{position:relative;top:-29px;left:5px;border-color: transparent transparent #aaa transparent;border-style:solid;border-width:12px;height:0;width:0;}
.comment-body .sg2{position:relative;top:0px;left:5px;border-color: transparent transparent #eee transparent;border-style:solid;border-width:12px;height:0;width:0;margin-top:-52px;}
.avatar-image-container{float:left;width:40px;height:40px;background:#fff;padding:1px;border:1px solid #ccc;margin:0px 10px 0px 0px;}
.avatar-image-container img { width:40px; height:40px;}
]]></b:skin>

--> Ubah teks berwarna biru diatas sesuai dengan kalkulasi berikut :

Lebar main-wrapper dikurangi 22px.

--> Contoh, Jika lebar main wrapper sobat adalah 410px, maka sesuai dengan kalkulasi diatas, lebar tersebut kemudian dikurangi sebesar 22px.

410px – 22px = 388px

Hasil tersebut lah yang kemudian harus di gantikan pada teks berwarna biru diatas.

--> Ganti kode berwarna merah dengan kode warna background yang sobat inginkan.
--> Ganti kode berwarna hijau dengan kode warna border/garis pinggir yang sobat inginkan.

Sampai pada tahap ini,save/simpan dulu template sobat. Kemudian baru melanjutkan ke step berikutnya. (Step ke-5)

5. Selanjutnya,cari kode :

<dl class='commentlist'>
<b:loop values='data:post.comments' var='comment'>
          <span><dt expr:class='"comment-author " + data:comment.authorClass' expr:id='data:comment.anchorName' style='display:inline'>
            <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/>
            </b:if>
          </dt>pada hari <dd class='comment-footer' style='display:inline; margin:0px'>
            <span class='comment-timestamp'>
              <a expr:href='data:comment.url' title='comment permalink'>
              </a>
              <b:include data='comment' name='commentDeleteIcon'/>
            </span>
          </dd></span>
          <dd class='commenttext'>
            <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:loop>
      </dl>

6. Ganti kode diatas dengan kode berikut ini :

<dl class='commentlist'><b:loop values='data:post.comments' var='comment'>
<li class='comment' id='li-comment'><div id='commentblock'><div class='comment-author vcard'>
<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><div class='author-name'>
<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><div class='comment-meta'>
<a expr:href='data:comment.url' title='comment permalink'><data:comment.timestamp/></a>
<b:include data='comment' name='commentDeleteIcon'/></div><div class='comment-body'>
<div class='sg1'/><div class='sg2'/><b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span><b:else/><p><data:comment.body/>
<span class='interaction-iframe-guide'/></p></b:if></div></div></li></b:loop></dl>

7. Simpan hasil kerja sobat. Kini kolom komentar sobat udah lebih cantik bukan ? ^^ >>>>End

Silahkan kalo mau mencoba, oh ya hampir lupa menyertakan sumbernya. sumbernya berasal dari SINI

Salam Yang Hangat-hangat dari GoogleBlogJember / www.kusnadiarisa08.co.cc

Author: GPLN JEMBER - 6:25 PM

Tentang patimber

GoogleBlogJember

Trik Mempercantik kotak komentar Blog

Tidak ada komentar