Membuat Komentar Blog Seperti Facebook - Banyak cara untuk modifikasi kotak komentar blog salah satunya adalah memodifikasi atau membuat kotak komentar blog seperti komentar yang ada di facebook. Untuk itu, pada kesempatan ini om juragan akan menjelaskan bagaimana cara membuatnya atau memodifikasinya. Komentar blog seperti facebook ini sama fungsi dengan threaded comments blogger lainnya, hanya saja tampilannya yang berbeda yaitu mirip seperti kotak komentar facebook. Agar lebih jelas om juragan akan menyertai gambarnya seperti di bawah ini - cara membuat blog.

komentar blog seperti facebook

Jika gambar di atas kurang jelas, Anda dapat melihat contohnya pada komentar blog om juragan. Mungkin anda tertarik juga mengaplikasikan dan memodifikasi atau membuat kotak komentar blog Anda seperti facebook. Untuk itu, simak penjelasan tutorial blogger cara membuat komentar blog seperti facebook yang om juragan jelaskan berikut ini.

Komentar Blog Seperti Facebook

1. Silahkan login ke ID Blogger Anda

2. Klik pada menu dropdown, lalu pilih "Template"

3. Selanjutnya klik "Edit HTML" kemudian klik "Lanjutkan"

4. Lalu, cari kode ]]></b:skin> (gunakan ctrl+f atau F3 untuk memudahkan pencarian kode tersebut)

5. Selanjutnya copy dan paste kode berikut ini tepat di atas kode ]]></b:skin>

/** Comments **/
.comments{font:normal 12px/14px "Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;color:rgb(51,51,51); width:485px}
.comments .comments-content a{color:#3B5998 !important}
.comments h2,.comments h3,.comments h4{font-family:"Lucida Grande",Tahoma,Verdana,Arial,Sans-Serif !important;font-size:14px}
.comments .comments-content .comment{margin:0 0 0;padding:10px 0 10px 0;border-top:1px solid #e9e9e9;border-left:none}
.comments .comment .comment-header,.comments .comment .comment-actions,.comments .comment .comment-actions a,.comments .comment .comment-thread.inline-thread,.comments .comment .continue{margin:0 0 0;padding:0 0 0;border:none;background:transparent}
.comments .comment .comment-header{margin-bottom:4px}
.comments .comment .comment-header .datetime a{color:#808080 !important}
.comments .comment .comment-actions a{padding-right:5px}
.comments .thread-toggle .thread-arrow{width:7px;height:7px;padding-right:4px}
.comments .comment .avatar-image-container,.comments .comment .avatar-image-container img{width:40px;height:40px;max-width:none;max-height:none;border:none;padding:0;margin:0;outline:none}
.comments .comment .comment-block{margin:0 0 0 60px !important}
.comments .comment .comment-thread.inline-thread{margin:7px 0 0 22px}
.comments .comment .comment-thread.inline-thread ol{margin:7px 0 10px !important}
.comments .comment .comment-thread.inline-thread .comment{background-color:#EDEFF4;padding:5px 5px 0;margin:1px 0 0;border:none;border-bottom:1px solid #D2D9E7}
.comments .comment .comment-thread.inline-thread .comment .avatar-image-container,.comments .comment .comment-thread.inline-thread .comment .avatar-image-container img{width:32px;height:32px}
.comments .comment .comment-thread.inline-thread .comment .comment-block{margin:0 0 0 40px !important}
.comments .comment .comment-content{text-align:left}
.comments .comments-content .icon.blog-author{width:16px;height:16px;display:inline-block;vertical-align:top;background:transparent url('/favicon.ico') no-repeat 50% 50%}
.comments .comment .comment-thread.inline-thread .comment:last-child{border-left:2px solid #A8B2CE !important}

NB: Perhatikan kode yang om juragan beri tanda warna merah, Jika di dalam template blogger Anda terdapat kode CSS yang membentuk komentar blog, silahkan di hapus saja dan ganti dengan kode diatas. Hal ini dilakukan agar meringankan loading blog Anda. Karena CSS yang lama tidak di pakai lagi.

6. Setelah semuanya selesai simpan template Anda.

Note: Jika dengan penambahan kode diatas masih juga belum ada hasil, berarti template Anda belum ditambahkan dengan kode HTML sebagai fungsi treaded comments. Untuk itu Anda harus menambahkannya. Caranya seperti dibawah ini.

1. Ikuti point mulai dari langkah 1-3 diatas
2. Selanjutnya, beri tanda ceklis atau centang pada kotak kecil yang bertuliskan "Expand Template Widget"

3. Selanjutnya cari kode <b:include data='post' name='comments'/>
Kode tersebut biasanya ada 3 atau 4. Lalu ganti semuanya dengan kode dibawah ini.

<b:if cond='data:post.showThreadedComments'>
<b:include data='post' name='threaded_comments'/>
<b:else/>
<b:include data='post' name='comments'/>
</b:if>

4. Kemudian Save/Simpan template Anda

Jika Anda mengikuti tutorial membuat komentar blog seperti facebook diatas dengan benar, maka anda akan berhasil. Karena om juragan sudah membuktikan dan mempraktekkannya. Sampai jumpa pada tutorial blogger berikutnya. Pastikan bahwa Anda terus mengunjungi blog om juragan untuk mendapatkan tutorial baru yang akan om juragan posting. Jika Anda tidak ingin ketinggalan tutorial blogger berikutnya yang akan om juragan posting, silahkan berlangganan artikel via email gratis dan me-like fans page facebook om juragan. Dan baca juga artikel tutorial blogger lainnya seperti cara cerdas dan efektif promosi blog dan serta cara cepat menigkatkan pengunjung blog.

http://www.halogan.com/2012/09/membuat-komentar-blog-seperti-facebook.html

Membuat Komentar Blog Seperti Facebook

Komentar Blog Seperti Facebook

0 komentar:

Posting Komentar