Cara Pindahkan Kolom Komentar Median UI ke Atas

Saifullah.id - Kolom komentar Median UI v1.5 dan Median UI v1.6 menerapkan tampilan default template blogger kebanyakan, dimana tempat menulis comment berada di paling bawah. Padahal, menurut saya akan lebih nyaman kalau kolom komentar itu berada di atas.

Coba kalian perhatikan desain kolom komentar yang dimiliki oleh Disqus. Lebih enak untuk nulis dan bacain komentar pengunjung sebelumnya kan?

Selain itu, kalian bisa cek Blog www.igniel.com, kolom komentarnya ada di atas juga. Jadi kita tidak perlu scroll panjang ke bawah saat ingin berkomentar.

Oleh sebab itu, berikut akan saya bagikan tutorial cara memindahkan kolom komentar Blogger di template Median UI 1.5 dan 1.6 ke atas.

Cara Pindahkan Komentar Median UI 1.5

Ada 3 tahap yang akan kita lakukan untuk mengubah posisi kolom komentar, yaitu:

1. Pindahkan Kolom

Tahap pertama yang harus dilakukan adalah memindahkan kotak komentar di atas komenan netizen.

a. Cari kode <div class='commentForm'>

Bentuk kode lengkapnya seperti ini:

<div class='commentForm'>

 <b:if cond='data:post.embedCommentForm'>

  <b:if cond='data:post.allowNewComments'>

   <b:include name='threadedComments-form'/>

   <b:else/>

   <!--[ If comment was disable ]-->

   <div class='commentsDisable'><data:post.noNewCommentsText/></div>

  </b:if>

  </b:if>

</div>

b. Potong (Cut) semua kode di atas dan Tempel (Paste) di bawah kode <div class='commentsInner'>

Hasilnya jadi seperti ini:

<div class='commentsInner'>

<div class='commentForm'>

 <b:if cond='data:post.embedCommentForm'>

  <b:if cond='data:post.allowNewComments'>

   <b:include name='threadedComments-form'/>

   <b:else/>

   <!--[ If comment was disable ]-->

   <div class='commentsDisable'><data:post.noNewCommentsText/></div>

  </b:if>

  </b:if>

</div>

 <b:if cond='data:post.numberOfComments &gt; 0'>

 <div class='commentsContent'>

 

2. Ubah Urutan Komentar

Karena posisi kolom komentar jadi di atas, maka urutan komentar harus diubah dari Komentar Terbaru ke Komentar Terlama, supaya tidak perlu scroll dan lebih efisien

a. Cari kode <b:tag class='commentSection' id='commentSection' name='div'>

Bentuk kode lengkapnya seperti ini:

<b:tag class='commentSection' id='commentSection' name='div'>

<b:tag class='commentAll hidden' id='forall-comment' name='input' type='checkbox'/>

b. Tambahkan kode checked='checked'

Hasilnya jadi seperti ini:

<b:tag class='commentSection' id='commentSection' name='div'>

<b:tag checked='checked' class='commentAll hidden' id='forall-comment' name='input' type='checkbox'/>

3. Ubah Ukuran Komentar

Setelah dipindah, biasanya ada jarak yang cukup lebar di bawah kolom komentar, untuk memperbaikinya kita harus mengubah satu kode lagi.

a. Cari kode <!--[ Comment iframe (remove comment tag below to improve height of comment form) ]-->

<!--[ Comment iframe (remove comment tag below to improve height of comment form) ]-->

<!--<a aria-label='Comment Form' expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam' id='comment-editor-src'/>-->

<iframe class='blogger-iframe-colorize blogger-comment-from-post lazy' expr:data-src='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}' height='296' id='comment-editor' name='comment-editor' title='Blogger comment' width='100'/>

b. Ubah Nilai height Menjadi: Auto atau 150

Hasilnya jadi seperti ini:

<!--[ Comment iframe (remove comment tag below to improve height of comment form) ]-->

<!--<a aria-label='Comment Form' expr:href='data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam' id='comment-editor-src'/>-->

<iframe class='blogger-iframe-colorize blogger-comment-from-post lazy' expr:data-src='data:post.commentFormIframeSrc appendParams {skin: &quot;contempo&quot;}' height='auto' id='comment-editor' name='comment-editor' title='Blogger comment' width='100'/>

 

Cara Pindahkan Komentar Median UI 1.6

Median UI 1.6 berbeda dengan Median UI versi sebelumnya. Oleh sebab itu, langkah-langkahnya juga akan berbeda pula.

1. Pindahkan Kolom

a. Cari kode <div class='cmFrm'>

Maka akan ketemu kode seperti ini:

<div class='cmFrm'>

        <b:if cond='data:post.embedCommentForm'>

        <b:if cond='data:post.allowNewComments'>

        <b:include data='post' name='threadedComments-form'/>

        <b:else/>

        <!--[ If comment was disable ]-->

                                      <div class='cmDis'><data:post.noNewCommentsText/></div>

        </b:if>

        <b:else/>

        <b:if cond='data:post.allowComments'>

         <!--[ Comment message ]-->

        <b:if cond='data:this.messages.blogComment != &quot;&quot;'>

        <div class='cmMs note'>

        <data:this.messages.blogComment/>

        </div>

        </b:if>

                                        

        <a class='cmBtn button' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick' rel='noreferrer' role='button' target='_blank'>

         <!--[ Delete tag bellow to change button style ]-->

         <b:class name='ln'/>

                                          

        <b:message name='messages.postAComment'/>

         </a>

         </b:if>

         </b:if>

         </div>

b. Potong (Cut) semua kode di atas dan Tempel (Paste) di atas kode <div class='cmC'>

Hasilnya jadi seperti ini:

<div class='cmFrm'>

        <b:if cond='data:post.embedCommentForm'>

        <b:if cond='data:post.allowNewComments'>

        <b:include data='post' name='threadedComments-form'/>

        <b:else/>

        <!--[ If comment was disable ]-->

                                      <div class='cmDis'><data:post.noNewCommentsText/></div>

        </b:if>

        <b:else/>

        <b:if cond='data:post.allowComments'>

         <!--[ Comment message ]-->

        <b:if cond='data:this.messages.blogComment != &quot;&quot;'>

        <div class='cmMs note'>

        <data:this.messages.blogComment/>

        </div>

        </b:if>

                                        

        <a class='cmBtn button' expr:href='data:post.commentsUrl' expr:onclick='data:post.commentsUrlOnclick' rel='noreferrer' role='button' target='_blank'>

         <!--[ Delete tag bellow to change button style ]-->

         <b:class name='ln'/>

                                          

        <b:message name='messages.postAComment'/>

         </a>

         </b:if>

         </b:if>

         </div>

<div class='cmC'>

2. Ubah Urutan Komentar

Cari kode ini

<b:tag class='cmAl hidden' cond='data:post.numberOfComments &gt; 0' id='forAllCm' name='input' type='checkbox'/>

Ubah menjadi ini

<b:tag checked='checked' class='cmAl hidden' cond='data:post.numberOfComments &gt; 0' id='forAllCm' name='input' type='checkbox'/>

Terakhir, Simpan Tema.