Xceria Blogger Indonesia
Showing posts with label komentar. Show all posts
Showing posts with label komentar. Show all posts

Memunculkan Kolom Komentar di Halaman Statis Blogger
Kolom Komentar di Halaman Blogger
Memunculkan kolom komentar di halaman statis blogger - Hari ini Xceria akan menulis tutorial blog sederhana mengenai komentar di blogspot.

Jika seseorang membuat suatu halaman (bukan artikel) biasanya tidak membutuhkan kolom komentar. Seperti halaman about me, contact me, sitemap, dan sebagainya. Tapi ada juga halaman yang membutuhkan kolom komentar untuk dapat berinteraksi dengan pembacanya. Lalu bagaimana jika kolom ini tidak dapat dimunculkan pada halaman statis yang Anda buat di blogspot?

Di blogger kolom komentar akan muncul jika pada tab option kita memilih allow comment. Tapi pada halaman statis terkadang (pada template tertentu) kolom komentar tidak mau muncul, walaupun sudah kita perbolehkan untuk berkomentar.

Ini terjadi karena conditional tag untuk kolom komentar pada template Anda tidak ditujukan pada halaman statis, tetapi hanya pada halaman post.

Cara Menampilkan Kolom Komentar di Halaman Statis Blogger

Jika ini terjadi pada blog Anda dan ingin menampilkan kolom komentar pada halaman statis blogger, ikuti panduan di bawah ini untuk mengatasinya.
  1. Masuk ke blogger.
  2. Pilih Template » Edit HTML.
  3. Cari (Ctrl + F) kode <b:if cond='data:blog.pageType == &quot;item&quot;'>. Kode tersebut mungkin akan banyak ditemui di template Anda. Cari kode kira-kira seperti berikut.

  4. <div class='blog-posts hfeed'>
    <b:include data='top' name='status-message'/>
    <data:adStart/>
    <b:loop values='data:posts' var='post'>
    <b:if cond='data:post.dateHeader'>
    <h2 class='date-header'><data:post.dateHeader/></h2>
    </b:if>
    <b:include data='post' name='post'/>
    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <b:include data='post' name='comments'/>
    </b:if>
    <b:if cond='data:post.includeAd'>
    <data:adEnd/>
    <data:adCode/>
    <data:adStart/>
    </b:if>
    </b:loop>
    <data:adEnd/>
    </div>
  1. Selanjutnya ganti kode tersebut menjadi <b:if cond='data:blog.url == data:post.url'>
  2. Simpan template.
Sekarang lihat hasilnya pada salah satu halaman di blog Anda. Ingat pada tab Options saat edit page, pilih Allow (Reader comments).

Sekian tutorial mengenai cara memunculkan kolom komentar pada halaman statis blogger. Semoga berguna.

Membuat Komentar Admin Berbeda di Blogger (5 Style)
Komentar Admin Beda
Hari ini Xceria akan menulis tutorial blog seputar komentar di blogger, yaitu cara membuat komentar admin blog berbeda dengan komentar yang diberikan oleh pengunjung.

Apa kegunaan yang didapatkan?

Dengan melakukan hal ini, maka pengunjung akan mudah dalam membedakan yang mana komentar admin dan yang mana komentar pengunjung blog.

Dengan begitu ini akan memudahkan pengunjung yang ingin melihat komentar balasan admin terhadap pertanyaan yang mereka berikan.

CSS Styles

Pada tutorial blog ini saya menggunakan CSS untuk membuat komentar admin berbeda. Anda cukup menambahkan CSS yang sederhana untuk bisa melakukannya. Saya juga sudah menyediakan 5 style berbeda. Silahkan dipilih sesuai selera.

Komentar Admin Berbeda - Style 1

Cara Membuat Komentar Admin Berbeda - Style 1

.comments .comments-content .icon.blog-author {margin: 0 0 -13px 15px; width: auto; background: #ec3f0c; color: #fff; padding: 3px 7px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px;}
.comments .comments-content .icon.blog-author:before {content: 'ADMIN';}

Komentar Admin Berbeda - Style 2

Cara Membuat Komentar Admin Berbeda - Style 2

.comments .comments-content .user.blog-author {background: #ec3f0c; padding: 3px 7px;}
.comments .comments-content .user.blog-author a {color: #fff;}
.comments .comments-content .icon.blog-author {background: none;}

Komentar Admin Berbeda - Style 3

Cara Membuat Komentar Admin Berbeda - Style 3

.comments .comments-content .icon.blog-author {width: 30px; height: 30px; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiRquGKzfzcgdk-Mzil5slwM0I-OvAYCxb-pKMZdn87ZG7z9mOC0GhZX6dC0JJTvxSlBUIIJQGTDNKbEz51OpyhlnB99SngXd9hASqxE2Rv123BbTFFI-qko7drwtKtt7WkNwHL5gSo8ANi/s1600/image.png) no-repeat; margin: 0px 0 -13px 6px;}

Komentar Admin Berbeda - Style 4

Cara Membuat Komentar Admin Berbeda - Style 4

.comments .comments-content .icon.blog-author {width: 100%; position: absolute; left: 0; height: 2px; background: #ec3f0c; margin: 0; padding: 0; display: block;}

Komentar Admin Berbeda - Style 5

Cara Membuat Komentar Admin Berbeda - Style 5

.comments .comments-content .icon.blog-author {width: 100%; position: absolute; left: 0; z-index: 0; background: #f2f2f2; margin: -5px 0; padding: 3px 0;}
.comments .comments-content .datetime, .comments .comments-content .blog-author {position: relative; z-index: 1;}

Cara Membuat Komentar Admin Berbeda di Blogspot

Jika ingin menerapkannya di blog Anda, cukup ikuti langkah-langkah di bawah ini.
  1. Log in ke blogger.
  2. Pilih tab Template.
  3. Klik tombol Edit HTML.
  4. Cari kode ]]></b:skin>
  5. Pilih salah satu style dari kelima style di atas, kemudian tambahkan kodenya di atas kode ]]></b:skin> tersebut.
  6. Simpan template.
Kelima style di atas hanya bisa diterapkan pada blogger threaded comment

Sekarang lihat hasilnya pada salah satu posting Anda. Jika belum ada komentar Anda di dalamnya, coba lakukan tes komentar sebagai admin (akun google).

Sekian posting kali ini tentang komentar admin di blogger. Semoga berguna dan dapat membuat kolom komentar blog Anda menjadi lebih bagus dan indah dipandang.

Menampilkan Avatar pada Kolom Komentar Blogger
Avatar pada Komentar Blogger
Setelah sebelumnya Xceria menulis artikel tentang conditional tag pada blogger, kali ini Xceria akan memberikan tutorial memasang avatar pada kolom komentar blogspot.

Avatar ini dapat meningkatkan keinginan pengunjung untuk berkomentar karena kolom komentar akan tampak lebih menarik dipandang.

Dengan avatar yang ditampilkan, Anda dan juga para pengunjung lainnya akan semakin mengenal satu sama lain. Karena wajah yang terpampang saat memberikan komentar.

Interaksi yang terjadi pada kolom komentar pun akan semakin hidup

Lalu bagaimana avatar bisa muncul pada komentar di blog blogspot?

Avatar akan muncul jika Anda masuk ke akun google Anda dan berkomentar dengan akun google tersebut. Avatar ini merupakan profile image pada akun google/blogger Anda.

Pada template bawaan blogger yang lama, fitur ini belum tersedia. Anda harus menambahkannya secara manual.

Kolom komentar tanpa avatar
Kolom komentar tanpa avatar

Lalu bagaimana cara menampilkan avatar pada kolom komentar blogspot? Bagi yang ingin menampilkannya langsung saja ikuti tutorial berikut.

  1. Masuk ke akun blogger.
  2. Pilih Template » Edit HTML.
  3. Temukan kode berikut.
<dl id='comments-block'>
  1. Ganti kode di atas dengan kode berikut.
<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
  1. Selanjutnya cari kode berikut.
<a expr:name='data:comment.anchorName'/>
  1. Ganti kode di atas dengan kode berikut.
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<div expr:class='data:comment.avatarContainerClass'>
<data:comment.authorAvatarImage/>
</div>
</b:if>

Kolom komentar dengan avatar
Kolom komentar dengan avatar

Sekarang avatar sudah muncul tetapi hanya pada pengunjung yang memberi komentar dengan akun blogger/google.
  1. Sekarang cari kode ]]></b:skin>. Tambahkan kode CSS berikut di atasnya.
#comments-block .avatar-image-container img {
background: #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP2jCmy2P5Zs689c3I1ULXHs_Ju5WkeRSMhe83Pg11JI-Cv9MPAOm4upWhCuzCLSbH-UoWEJekm60IhGWsBvWrHU1vHMXQNNrZ4Z2ccmqW9I1DNxxASMy7aJT0jQtpd9zOfhMLVxUQ1x4i/s1600/blank+avatar.gif) no-repeat left top;
width:32px;
height:32px
}

Kolom komentar dengan anonymous avatar
Kolom komentar dengan avatar (terdapat anonymous avatar)

  1. Terakhir simpan template.
Sekian tutorial menampilkan avatar pada komentar blogger. Semoga berhasil.

»
 
Back to top