Sehingga disini akan saya berika tips sesuai judul artikel saya tentang cara membuat kolom komentar keren agar terlihat lebih menarik sehingga akan memicu pengunjung untuk memberi komentar.
Oiaa.. pada tutorial ini juga sudah saya jadikan satu untuk membuat tombol Reply komennya lhoh :)
Sebelumnya, saya sarnkan jernihkan pikiran anda dulu, karena caranya sedikit ribet dan butuh konsentrasi tinggi. hehee..
Langusung saja begini caranya..
1. seperti biasa backup dulu templatenya, buat jaga2 jika gagal melakukan modifikasi.
2. Masuk ke template, lalu pilih edit HTML, kemudian centang pada expand teplate widget
3. Kemudian coppy dan paste kode berikut diatas kode ]]></b:skin> (untuk mempermudah pencarian pencet aja ctrl+F)
/*----------------------------------------------------
{--------} Comment {--------}
----------------------------------------------------*/
#comments h4 {
font-size: 18px;
font-weight: normal;
margin: 20px 0;
}
.cm_wrap {
clear: both;
margin-bottom: 10px;
float: right;
width: 100%;
}
.cm_head {
margin: 0;
width:60px;
float: left;
}
.cm_avatar {
margin: 0;
vertical-align: middle;
outline: 1px solid #fff;
border: 1px solid #ddd;
padding: 3px;
background-image: url(http://img846.imageshack.us/img846/7357/unled1oww.jpg);
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_avatar_a {
margin: 0;
vertical-align: middle;
border: 1px solid #ddd;
padding: 3px;
background:#c6e5f7;
background-position:center;
background-repeat:no-repeat;
width: 35px;
height: 35px;
}
.cm_reply {
padding-top: 5px;
}
.cm_reply a {
display: inline-block;
margin: 0;
padding: 1px 6px;
border: 1px solid #C4C4C4;
border-top-color: #E4E4E4;
border-left-color: #E4E4E4;
color: #424242 !important;
text-align: center;
text-shadow: 0 -1px 0 orange;
text-decoration: none;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #EDEDED;
background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, white), color-stop(1, #E5E5E5) );
background: -moz-linear-gradient( center top, white 20%, #E5E5E5 100% );
font: 11px/18px sans-serif;
}
.cm_reply a:hover {
text-decoration: none !important;;
background: #ccc;;
background: -webkit-gradient(linear,left top,left bottom,color-stop(.2, #eeeeee),color-stop(1, #cccccc));;
background: -moz-linear-gradient(center top,#eeeeee 20%,#cccccc 100%);;
}
.cm_entry {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_entry_a {
padding: 16px 16px 0 16px;
background: #F7F7F7;
outline: 1px solid #fff;
border: 1px solid #ddd;
overflow: hidden;
}
.cm_arrow {
display: block;
width: 9px;
height: 18px;
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz3zOI7B9IQPtdzZHNufqFyiANCt7ypuHMgFDGiJUlX0XsL_6FpUYvjh5BzLXE8qGHJpfpsM13XJcvFvDaWYT_WYeeFg9EEuXuH_-svlcZ5I8EVw-D1iLNKVw7ORkzwdH5Atkk9Hf8Qjs/s1600/comment-arrow.gif) no-repeat;
position: absolute;
margin-left: -25px;
}
.cm_info {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
padding: 5px;
}
.cm_info_a {
margin-bottom: 5px;
border: thin solid #E6E6E6;
background-color: #dff0fa;
padding: 5px;
}
.cm_name {
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: bold;
float: left;
}
.cm_name_a {
font-family:"Francois One";
font-size: 14px;
color: #666666 !important;
text-decoration:none;
font-weight: 250;
float: left;
}
.cm_date {
font-size: 10px;
color: #999;
text-decoration:none;
float: right;
}
.cm_date_a {
font-family:"Francois One";
font-size: 10px;
color: #2D5E7B;
text-decoration:none;
float: right;
padding-top:5px;
}
.cm_entry p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #F4F4F4;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_entry_a p {
padding: 5px;
clear: both;
border: thin solid #E6E6E6;
background-color: #dff0fa;
font-size: 13px;
color: #333;
word-wrap:break-word;
}
.cm_pagenavi {
font-size: 10px;
text-transform: uppercase;
color: #666;
text-shadow: 1px 1px orange;
font-weight: bold;
}
.cm_pagenavi a {
color: #666;
text-decoration: none;
padding:10px;
}
.cm_pagenavi a:hover {
text-decoration: underline
}
.cm_pagenavi span {
color: #888;
background: white;
padding: 4px;
border: 1px solid #E0E0E0;
}
4. Lalu cari kode </body> setelah itu copy paste kode berikut tepat diatasnya kode </body>
5. Kemudian cari kode seperti ini
7. Save dan lihat hasilnya.<b:includable id='comments' var='post'>
disini letak kode baru
</b:includable>yang berwarna merah tersebut merupakan kode yang diapit oleh klode diatas dan dibawahnya. Ganti tulisan yang berwarna merah dengan kode berikut
Nah, sekarang kotak komentar blog Anda sudah lebih menarik.
Jika sampai tahap ke 7 masih belum bisa,, lanjutkan dengan tahap berikutnya :
8. Carai kode seperti dibawah ini : (biasanya kodenya ada 2 atau 4)
<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>
9. Kemudian hapus semua kode seperti diatas yang ditemukan di template sobat, dan ganti dengan kode berikut
<b:include data="post" name="comments"></b:include>
10. Nah ..lalu save template. Seharusnya modifikasi komentar ini sudah berhasil. Jika belum perhatikan lagi steps2 diatas dengan teliti
Dari steps diatas, menurutku kesalahan banyak terjadi pada :
- proses copy paste script/kode yang kurang atau belum semuanya tercopy
- pada poin ke-5 untuk mencari kode yang diapit cukup sulit
- pada poin ke-8 tentang penggantian kode, jika kode no.8 ditemukan ada 4, anda juga harus mengganti semua kode no.8 dengan kode yang baru. Dan perhatikan benar2 kode yang akan diganti tsb.
- jika tombol Reply belum berfugsi, mungkin kamu belum mengganti _BlogID_ dengan ID blogger kamu
Artikel 
.gif)
0 komentar:
Posting Komentar
™ No Spam ™
™ Maaf Komentar Anda Menunggu Moderasi Admin ™
™ Mohon Tidak Menyinggung Siapapun ™
Pengunjung Yang Baik Adalah Pengunjung Yang Mau Memberi Komentar Walaupun Sepatah Kata... Dan Buat Para Blogger-Blogger Semua Saya Ucapkan Terima Kasih Atas Kritik, Saran, Dan Komentar Kalian. Salam Blogger Tawang !!!.