Sistem Komentar Berbalas (Threaded Comments) Pada Blog Tanpa Popup Window _ Pada kesempatan kali ini saya akan membagikan satu artikel yang sudah tidak asing lagi kedengarannya, karena artikel semacam ini sudah banyak beredar di Google search. Namun yang kali ini saya bahas agak sedikit berbeda karena ada beberapa fitur yang saya tambahkan di dalamnya yang menurut saya mungkin sudah lengkap.
Sesuai dengan judul postingan ini Tanpa Popup Window yang artinya ketika kita mengklik tombol Reply atau (balas) kita tidak lagi melihat Popup Window untuk membalas sebuah komentar, karena form komentar akan tampil tepat di bawah komentar terkait yang akan di balas.
Fitur manipulasi pada komentar
- Support tag
PreCode - Support tag
Blockquote - Support tag
<strong> - Support
Image - Support
Video youtube - Support tag
<em> - Tersedia Emoticon
- Tersedia Tombol Konversi kode
- Link aktif visitor terhapus otomatis
- Warna kotak komentar Admin berbeda
- Smooth Scrolling To Internal Links With jQuery
Penerapan Kode-Kode Manipulasi
Saya memberikan dua pilihan, yaitu menggunakan tag HTML dengan target manipulasi yang diambil berdasarkan atribut rel dan menggunakan kata-kata kunci yang dimasukkan ke dalam braket kotak sebagai penggambaran tag HTML. Saya merekomendasikan Anda untuk menggunakan tag HTML karena mereka masih bisa bekerja tanpa JavaScript (ini juga merupakan standar manipulasi komponen komentar di blog Saya):
| Perintah | Format |
|---|---|
| Memasukkan gambar | <i rel="image">URL Gambar</i> |
[img]URL Gambar[/img] | |
| Memasukkan video YouTube | <i rel="youtube">URL YouTube</i> |
[youtube]URL YouTube[/youtube] | |
| Memasukkan tag <code> | <i rel="code">Kode Anda</i> |
[code]Kode Anda[/code] | |
| Memasukkan tag <pre> | <i rel="pre">Kode Anda</i> |
[pre]Kode Anda[/pre] | |
| Memasukkan kuota | <b rel="quote">Kata-kata Anda</b> |
[blockquote]Kata-kata Anda[/blockquote] |
Penerapan pada template
External CSS
<link href='http://externalproject.googlecode.com/svn/trunk/eks/css/astn_comments.v1.css' rel='stylesheet' type='text/css'/>Cari kode seperti di bawah ini di dalam template anda
<b:includable id='comments' var='post'>
Setelah ketemu hapus kode tersebut kemudian anda ganti dengan kode di bawah
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.numComments != 0'>
<h4><b:if cond='data:post.numComments == 1'>1 <data:commentLabel/>:<b:else/><data:post.numComments/> <data:commentLabelPlural/></b:if></h4>
</b:if>
<div class='cm_pagenavi' id='cm_page' />
<div class='cm_block' id='cm_holder'>
<b:loop values='data:post.comments' var='comment'>
<div class='comment_wrap' expr:auclass='data:comment.adminClass' expr:id='data:comment.anchorName' level='0'><a expr:name='data:comment.anchorName' />
<div class='comment_inner'>
<b:if cond='data:comment.isDeleted'>
<div class='instruction'>
<p>
<data:comment.body/>! - <span expr:class='"item-control " + data:comment.adminClass'><a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>Hapus</a></span>
</p>
</div><b:else/>
<div class='comment_header'>
<div class='comment_avatar_wrap'>
<div class='comment_avatar'>
<b:if cond='data:blog.enabledCommentProfileImages'>
<img alt='avatar' expr:src='data:comment.authorAvatarSrc' expr:title='data:comment.author' />
</b:if>
</div>
<div class='comment_reply'><a class='answer-comments' expr:id='"r"+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='balas'>Balas</a><span expr:class='"item-control " + data:comment.adminClass'><a class='comment-delete' expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>Hapus</a></span>
</div>
</div>
</div>
<!-- .end comment header -->
<b:if cond='data:comment.author == data:post.author'>
<div class='comment_body comment_admin'>
<div class='comment_name comment_admin' itemprop='creator'>
<b:if cond='data:comment.authorUrl'><a class='auth-pen url' expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><span itemprop='author'><data:comment.author/></span></a><b:else/><b><data:comment.author/></b></b:if><span class='comment_date'><time itemprop='dateCreated'><data:comment.timestamp/></time><a expr:href='data:comment.url' title='Comment Permalink'> Permalink</a></span>
</div>
<div class='para author-comment'>
<data:comment.body/>
</div>
</div>
<!-- .end comment body author --><b:else/>
<div class='comment_body'>
<div class='comment_name' itemprop='creator'>
<b:if cond='data:comment.authorUrl'><a class='url' expr:href='data:comment.authorUrl' rel='nofollow' target='_blank'><span itemprop='author'><data:comment.author/></span></a><b:else/><b><data:comment.author/></b></b:if><span class='comment_date'><time itemprop='dateCreated'><data:comment.timestamp/></time><a expr:href='data:comment.url' title='Comment Permalink'> Permalink</a></span>
</div>
<div class='para visitor-comment'>
<data:comment.body/>
</div>
</div>
<!-- .end comment body visitor -->
</b:if>
</b:if>
</div>
<!-- .end comment_inner -->
<div class='comment_reply_form' expr:id='"r_f_"+data:comment.anchorName' />
<div class='comment_child' /></div>
</b:loop>
</div>
<div class='cm_pagenavi' id='cm_page_copy' />
<b:if cond='data:post.embedCommentForm'>
<b:if cond='data:post.allowNewComments'><b:include data='post' name='comment-form' /><b:else/>
<data:post.noNewCommentsText/>
</b:if><b:else/>
<b:if cond='data:post.allowComments'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'>
<data:postCommentMsg/>
</a>
</b:if>
</b:if>
</b:if>
</div>
<script async='async' expr:src='data:post.commentSrc' type='text/javascript' />
<script type='text/javascript'>
<b:if cond='data:post.numComments != 0'>
var Items = <data:post.commentJso/>;
var Msgs = <data:post.commentMsgs/>;
var Config = <data:post.commentConfig/>;
<b:else/>
var Items = {};
var Msgs = {};
var Config = {'maxThreadDepth': '0'};
</b:if>
</script>
</b:includable>Jika langkah di atas sudah selesai, silahkan cari lagi kode seperti dibawah
<b:includable id='comment-form' var='post'>
Setelah ketemu hapus dan gantikan dengan kode di bawah ini
<b:includable id='comment-form' var='post'>
<div class='comment_form' id='comment-form'>
<p class='heads-up' id='emoWrap'>
<span><strong>Catatan:</strong><br/>
Tautan (<em>link</em>) hidup dalam komentar akan terhapus secara otomatis.
<br/>Untuk menyisipkan tautan dengan aman, gunakan kode &lt;i rel="anchor"&gt;http://nama_situs.com&lt;/i&gt;
<br/>Untuk menyisipkan kode, gunakan tag &lt;i rel="code"&gt;KODE ANDA&lt;/i&gt;
<br/>Kode yang panjang bisa menggunakan tag &lt;i rel="pre"&gt;KODE PANJANG ANDA&lt;/i&gt;
<br/>Untuk menyisipkan gambar, gunakan kode &lt;i rel="image"&gt;URL GAMBAR&lt;/i&gt;
<br/>Untuk menyisipkan kuota, gunakan tag &lt;b rel="quote"&gt;KATA-KATA ANDA DI SINI...&lt;/b&gt;
<br/>Untuk menciptakan efek tebal gunakan tag &lt;strong&gt;TEKS ANDA DI SINI...&lt;/strong&gt;
<br/>Untuk menciptakan efek huruf miring gunakan tag &lt;em&gt;TEKS ANDA DI SINI...&lt;/em&gt;
<br/>
<br/>Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.
<br/><br/></span>
<span1 class='tips'><strong>Catatan:</strong>
<br/>Jika anda ingin memasukkan kode kedalam komentar, anda bisa menggunakan alat konversi yang sudah di sediakan di bawah untuk mengkonvert kode yang ingin anda masukkan dengan cara mengklick tombol <b>Konversi Kode!</b>
<br/>
<br/>
</span1> :) :( ^_^ :D ;) :-bd :yaya: :'( :\ :p B) :Q :Ozz 7:( \o/ **p <3 0:) :-a 7:O *fck* x@ X@ ~x( =p* Klick untuk melihat kode!
<br/>
<br/>
<a class='orange-button' href='http://externalproject.googlecode.com/svn/trunk/eks/html/html-escaper.html' onclick='window.open(this.href,"popupwindow","status=0,height=420,width=400,resizable=0,top=50,left=100");return false;' target='_blank'>Konversi Kode! (Jendela Munculan)</a>
<a class='small-button' href='http://astinquery.blogspot.com' target='_blank'>http://astinquery.blogspot.com</a>
</p><data:blogTeamBlogMessage/>
<a expr:href='data:post.commentFormIframeSrc' id='comment-editor-src' />
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='410' id='comment-editor' name='comment-editor' src='' width='100%'/>
<data:post.friendConnectJs/>
<data:post.cmtfpIframe/>
<script type='text/javascript'>
BLOG_CMT_createIframe('<data:post.appRpcRelayPath/>','<data:post.communityId/>');
</script>
<p><a class='cancel' href='javascript:void(0);' onclick='Reset_Comment_Form()'>Cancel</a></p>
<div class='trims'>Terima kasih telah berkomentar</div>
</div>
</b:includable>Kemudian yang terakhir letakkan kode di bawah ini tepat di atas kode </body>
<div id='alert-box'></div>
<script type='text/javascript'>
var emoMessage = "Untuk menyisipkan emotikon setidaknya Anda harus menambahkan satu spasi di depan.Jangan pernah melupakan itu atau emotikon Anda tidak bisa diterjemahkan.";
</script>
<script src='http://externalproject.googlecode.com/svn/trunk/eks/js/astn_comments.v1.js'></script>Klik simpan template dan lihat hasilnya. Gimana mudah bukan..
6 Komentar:
PLEASE....!!!!
September 16, 2014 at 4:11 AM
December 23, 2014 at 1:21 AM
hahaha
December 24, 2014 at 12:43 PM
December 28, 2014 at 11:41 AM
http://goo.gl/5I92mK
April 2, 2015 at 12:43 PM
Sudah saatnya Pencinta POKER Bergabung bersama kami dengan Pemain - Pemain RATING-A
Hanya dengan MINIMAL DEPOSIT RP. 10.000 anda sudah bisa bermain di semua games.
Kini terdapat 8 permainan yang hanya menggunakan 1 User ID & hanya dalam 1 website.
( POKER, DOMINO99, ADU-Q, BANDAR POKER, BANDARQ, CAPSA SUSUN, SAKONG ONLINE, BANDAR66 )
PROSES DEPOSIT DAN WITHDRAWAL CEPAT Dan AMAN TIDAK LEBIH DARI 2 MENIT.
100% tanpa robot, 100% Player VS Player.
Live Chat Online 24 Jam Dan Dilayani Oleh Customer Service Profesional.
Segera DAFTARKAN diri anda dan Coba keberuntungan anda bersama MestiQQ
** Register/Pendaftaran : WWW-MestiQQ-POKER
Jadilah Milionare Sekarang Juga Hanya di MestiQQ ^^
Untuk Informasi lebih lanjut silahkan Hubungi Customer Service kami :
BBM : 2C2EC3A3
WA: +855966531715
SKYPE : mestiqqcom@gmail.com
November 17, 2018 at 11:12 PM