?

Followers

×

Tentang Blog Ini×

Blog ini wadah merupakan media pembelajaran otodidak secara online bagi kalangan newbie seperti Andmin ini, akan tetapi belajar dan berusaha secara otodidak inilah yang membuat saya bisa berkreasi dengan ala kadarnya.

Salam pembuka dari Admin sebagai penulis blog ini sebelumnya akan memperkenalkan diri saya sebagai salah satu blogger yang berasal dari Jawa Timur.

Bagi para pembaca yang mungkin juga ingin menghubungi saya, bisa melihat alamat juga kontak saya yang disediakan dibawah ini.

Nama :  Admin
Email :  admin[at]gmail[dot]com

by Admin

Sidebar Blog×

Daftar Blog Bacaanku×

Bagikan kepada teman!
Close Info

LINK FRIEND

Sampaikan pesan anda jika ingin memajang link blog anda di Id Tutor Plus pada  (Link Friend)

NAMA BLOGURL BLOGDESCRIPSI BLOG
KOD Bloghttp://kang-onk.blogspot.com/Konsep Blogging Sederhana
KOD Sharehttp://onk-shared.blogspot.comShare something beautiful for you
Klik Templatehttp://klik-template.blogspot.com/Beauty Premium Teamplate for You

Comment Thread with Reply Button

Comment Thread with Reply Button
Comment Thread with Reply Button

Hari ini, pas saat Admin posting artikel ini, banyak diterima pesan melalui e-mail yang tanya tentang kode CSS pada blog ini, namun sampai kapapnpun Admin tidak akan memberikan kodenya dengan alasan apapun. Namun, sedikit Admin respong cara membuat komentar thread bisa anda lakukan seperti yang telah dituliskan sebelumnya pada CSS Thread Comment Bertingkat dan Komentar Thread Pada Blogger

Tutorial ini hampir sama dengan yang Admin pakai pada blog ini ~ buatan DTE :] hanya tergantung Anda memahami kode CSS, HTML dan jQuery dalam menerapkannya.

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 Pre Code
  • 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):

PerintahFormat
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://cekidot.96.lt/file/css/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='&quot;item-control &quot; + 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='&quot;r&quot;+data:comment.anchorName' onclick='javascript:Display_Reply_Form(this)' title='balas'>Balas</a><span expr:class='&quot;item-control &quot; + 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='&quot;r_f_&quot;+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 &amp;lt;i rel=&quot;anchor&quot;&amp;gt;http://nama_situs.com&amp;lt;/i&amp;gt;
            <br/>Untuk menyisipkan kode, gunakan tag &amp;lt;i rel=&quot;code&quot;&amp;gt;KODE ANDA&amp;lt;/i&amp;gt;
            <br/>Kode yang panjang bisa menggunakan tag &amp;lt;i rel=&quot;pre&quot;&amp;gt;KODE PANJANG ANDA&amp;lt;/i&amp;gt;
            <br/>Untuk menyisipkan gambar, gunakan kode &amp;lt;i rel=&quot;image&quot;&amp;gt;URL GAMBAR&amp;lt;/i&amp;gt;
            <br/>Untuk menyisipkan kuota, gunakan tag &amp;lt;b rel=&quot;quote&quot;&amp;gt;KATA-KATA ANDA DI SINI...&amp;lt;/b&amp;gt;
            <br/>Untuk menciptakan efek tebal gunakan tag &amp;lt;strong&amp;gt;TEKS ANDA DI SINI...&amp;lt;/strong&amp;gt;
            <br/>Untuk menciptakan efek huruf miring gunakan tag &amp;lt;em&amp;gt;TEKS ANDA DI SINI...&amp;lt;/em&amp;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:  :&#39;(  :\  :p  B)  :Q  :Ozz  7:(  \o/  **p  &lt;3  0:)  :-a  7:O  *fck*  x@  X@  ~x(  =p* Klick untuk melihat kode!
          <br/>
          <br/>
        <a class='orange-button' href='http://cekidot.96.lt/file/html/converter.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://idtutorplus.blogspot.com' target='_blank'>idtutorplus.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(&#39;<data:post.appRpcRelayPath/>&#39;,&#39;<data:post.communityId/>&#39;);
        </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://cekidot.96.lt/file/js/comments.v1.js'></script>

Klik simpan template dan lihat hasilnya. Gimana mudah bukan..

Terakhir Diperbaharui

    8 comments

    12 Oktober 2013 19.54 Permalink
    begini nih caranya yah mas ?
    oh iya klo menghilangkan gambar arrownya gimana mas?
    dan membuatnya berdempet dengan komentar ?
    15 Oktober 2013 05.56 Permalink
    Makasih Kang sy sudah bisa ^_^
    23 September 2014 09.45 Permalink
    He, sorry klo urusan tutorial ini saya gak bisa ngasih tau, soalnya menyagkut dengan template ini dan lagian template ini saya pakek untuk konsumsi pribadi bukan di publikasikan untuk umum :)
    infonya bagus gan, sukses terus
    Infonya Keren Gan :)
    http://obattradisional22.com/
    15 Maret 2015 20.35 Permalink
    terimakasih atas infonya sob
    27 April 2015 23.41 Permalink
    Nice Info Gan, Terimkahasih Banyak :-bd
    sangat bermanfaat sekali gan artikelnya

    Catatan :
    Link hidup dalam komentar akan terhapus secara otomatis.
    Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
    Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA</i>
    Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
    Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
    Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
    Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

    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.
    :):(^_^:D;):-bd:'(:\:pB):Q:Ozz7:(\o/**p<30:):-a7:O*fck*x@X@~x(:yaya:=p*Klik untuk melihat kode!

    Konversi Kode di Sini  Pasang Link Gratis  Daftar Member Aktif

    Batal

    Ke atas!Ke bawah!