Membuat Tampilan Komentar dan Jawaban Beda dengan CSS3

Written by RA_Syihan on Sunday, November 07, 2010 | Category: , , ,

Untuk Template Lama (Template Tata Letak/Layout Templates) dan New Blogger Template).
Salah satu cara memberikan "servis terbaik" kepada pembaca atau pengunjung blog adalah dengan memberikan ciri khusus pada jawaban komentar yang dibuat autor. Dengan cara ini maka komentar pengunjung dan jawaban yang berupa komentar dari author akan terlihat dengan sangat jelas. Beberapa cara bisa dilakukan misalnya dengan membuat bentuk teks berbeda atau dengan cara memberi background pada box yang berisikan komentar pengunjung atau sebaliknya pada komentar autor (jawaban komentar). Untuk membuat bentuk kolom komentar yang sangat menarik ini, tidak boleh tidak kita harus membongkar template guna menyimpan kode CSS dan xHTML pada bagian header dan body. Untuk penyimpanan xHTML dengan amat terpaksa juga harus kita lakukan melalui Expand Widget Template, karena tanpa melalui proses ini tidak mungkin apa yang kita rencanakan bisa terwujud. Heh ... heh ..., tapi jangan kuatir! Kita akan berikan panduan sedetail mungkin hingga semua sobat blogger, terutama yang masih dalam tahap belajar memahami isi dalamnya template juga bisa belajar dan menyelesaikan desain baru ini dengan tanpa kesulitan. Iya, toh! Lhoh ..., buat apa buat tutorial klo nggak bisa dicerna dengan baik. Heh ...heh ... berkali-kali sudah banyak yang mengalami. Akibat terlalu banyak makan (tutorial atau makanan?) yang susah atau sulit dicerna di perut akhirnya masuk rumah sakit. Heh ... heh ... Usus buntunya kena! Ho ... ho... apa nggak repot jadinya?

Bentuk baru kolom komentar ini pastinya tidak hanya menguntungkan buat pengunjung, tetapi akan banyak manfaatnya juga buat tampilan blog. Yah..., jika mau sampeyan bisa utak-atik sendiri nantinya. Baik ganti bentuk dan warna teksnya atau mungkin cari-cari atau buat background lain yang "pas" dengan background blog sampeyan. Hoo... Asyik, toh! Heh ... heh ..., banyak ngomong, jadinya repot juga. Yok, kita mulai saja!

KODE CSS 
.comment-body {
       margin:0 0 10px;
       padding:0 0 0 10px;
}
.comment-body p {
       margin:0 0 .5em;
}
.blog-author-comment {
       margin: 5px 0 10px;
       padding: 5px;
}
.blog-author-comment p {
       margin: 0 0 8px;
       padding: 10px;
       color: #c6e1fb; /* http://gubhugreyot.blogspot.com */
       background: #777 url(http://i55.tinypic.com/2drrhur/bgsGR/images/bggaristransp.jpg);
       text-shadow: 1px 1px 1px #000;
       border: 1px solid #666;
       border-radius: 4px 12px 4px 12px;
      -moz-border-radius: 4px 12px 4px 12px;
      -webkit-border-radius: 4px 12px 4px 12px;
      -o-transition:all 1.2s ease-out;
      -moz-transition:all 1.2s ease-out;
      -webkit-transition:all 1.2s ease-out; }
.blog-author-comment p:hover {
      -o-transform:scale(1.2) translate(0, 10px);
      -moz-transform:scale(1.2) translate(0, 10px);
      -webkit-transform:scale(1.2) translate(0, 10px);
}






  • Login : Login kee Blogger.
    • Tuliskan "User Name (Nama Pengguna)" atau bisa juga gunakan "Email Address".
    • Tuliskan "Password (Sandi)".
    • KLIK "Login".
  • Sesaat setelah login maka akan terlihat halaman "Dashboard (Dasbor)".
  • KLIK link "Design (Rancangan)"..
    • Bagian Design (Rancangan) yang akan terlihat setelah anda klik tadi adalah "Page Elements (Element Laman)", yang ditandai debngan terlihatnya beberapa box dengan beberapa diantaranya bergaris putus-putus yang merupakan pola dasar bentuk halaman blog sampeyan. Lewati saja halamman ini dengan klik link Edit HTML.
  • Edit HTML-1 : Lakukan back-up Template terlebih dahulu.
    • KLIK Download Template Lengkap (download Full Templates).
    • Simpan file template di "Folder PC". Berikan nama untuk memudahkan pencarian saat dibutuhkan kembali nantinya. File template ini berekstensi .xml.
    • Kembali ke "Edit HTML".
  • Edit HTML-2 : KLIK Expand Widget Templates.
  • Cari kode ]]></b:skin>, kemudian copy dan pastekan "kode CSS" di atas ]]></b:skin>.
  • Cari kode seperti yang terlihat di bawh ini:
    • <dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  • Kode seperti di atas hanya ada 1 (satu) sehingga mencarinya tak akan sulit. Di bawah kode ini akan terdapat sederet kode seperti yang terlihat di bawah.
<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' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <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>
      </div>

      <b:if cond='data:post.commentPagingRequired'>
        <span class='paging-control-container'>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.oldestLinkUrl'>
            <data:post.oldestLinkText/>
          </a>
          <a expr:class='data:post.oldLinkClass' expr:href='data:post.olderLinkUrl'>
            <data:post.olderLinkText/>
          </a>
           
          <data:post.commentRangeText/>
           
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newerLinkUrl'>
            <data:post.newerLinkText/>
          </a>
          <a expr:class='data:post.newLinkClass' expr:href='data:post.newestLinkUrl'>
            <data:post.newestLinkText/>
          </a>
        </span>
      </b:if>

      <p class='comment-footer'>

  • Ganti kode di atas dengan kode berikut:

<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>
<!-- ======================S T A R T========================= Author Comment ========-->
<b:if cond='data:comment.author == data:post.author'>
<dd class='blog-author-comment'>
<p><data:comment.body/></p>
</dd>
<b:else/>
<!-- ==========START==gubhugreyot.blogspot.com== Author Comment ============ -->
            <dd class='comment-body' expr:id='data:widget.instanceId + data:comment.cmtBodyIdPostfix'>
              <b:if cond='data:comment.isDeleted'>
                <span class='deleted-comment'><data:comment.body/></span>
              <b:else/>
                <p>
                  <data:comment.body/>
                </p>
              </b:if>
           </dd>
<!-- ===================== E N D ====================== Author Comment =========-->
</b:if>
<!-- ===================== E N D ====================== Author Comment ============= -->
            <dd class='comment-footer'>

  • KLIK SAVE Templates/Simpan Template.
  • Buka blog yang berisi komentar untuk melihat hasilnya.
Catatan:
  • Kode yang berwarna biru adalah kode baru yang harus ditambahkan di template.
  • Kode yang berwarna kuning merupakan tanda/kode batas dimana kode berwarna kuning harus di tempatkan.
  • Jika menginginkan background box komentar author yang berbeda, silahkan ganti background yang terdapat di kode CSS.
  • Gunakan Ctrl+F saat mencari kode html.
  • Bila masih ada yang merasa bingung untuk melakukan pengamanan/back-up templates berikut cara mencari kode di template, silahkan buka Special Tutorial di sebelah kiri atas (menu). Disana tersedia beberapa tutorial penting termasuk cara cepat mencari kode HTML, CSS dan javascript.

Share Artikel ini ke teman-temanmu

Lihat Artikel Lainnya disini