Lightbox Effect Pada Kotak Komentar

Berhubung banyak yang menanyakan tentang trik Lightbox effect pada form komentar, berikut ini akan saya jelaskan bagaimana instalasinya pada platform blogspot.

Seperti yang kita tahu, banyak sekali framework atau plugin javascript yang dapat digunakan untuk membuat efek lightbox. Untuk membuat efek lightbox pada form komentar, kita membutuhkan plugin yang dapat menampilkan inline content. Saya memilih jQuery Superbox karena cukup mudah digunakan dan dikustomisasi. Berikut ini adalah tahapan instalasinya:

1. Instalasi jQuery Superbox

Saya tidak akan membahas banyak untuk petunjuk instalasi jQuery Superbox. Untuk lebih jelasnya, dapat dilihat pada official websitenya.

2. Setting HTML & CSS

Setelah proses instalasi berhasil, kita menggunakan fitur content mode. Prinsip kerjanya adalah kita memunculkan content yang tersembunyi dalam bentuk modal window (lightbox). Berikut ini adalah tampilan kodenya:

<div class='comment-form'>

    <a name='comment-form'/>

    <h4 id='comment-post-message'><data:postCommentMsg/></h4>



    <p><data:blogCommentMessage/></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='275' id='comment-editor' name='comment-editor' scrolling='no' 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>

  </div>

Dari kode tersebut kita tahu bahwa id form komentar adalah #comment-form maka tambahkan CSS berikut ini:

#comment-form {



display:none;

}

3. Aktifasi

Yang perlu kita lakukan adalah membuat sebuah link yang berfungsi menampilkan div#comment-form dalam bentuk modal box. Pertama-tama, carilah kode berikut ini:

<dl id='comments-block'>

        <b:loop values='data:post.comments' var='comment'>



          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>

            <b:if cond='data:comment.favicon'>



              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>



            </b:if>

            <a expr:name='data:comment.anchorName'/>

            <b:if cond='data:comment.authorUrl'>



              <a expr:href='data:comment.authorUrl'><data:comment.author/></a>

            <b:else/>



              <data:comment.author/>

            </b:if>

            <data:commentPostedByMsg/>

          </dt>



          <dd class='comment-body'>

            <b:if cond='data:comment.isDeleted'>

              <span class='deleted-comment'><data:comment.body/></span>



            <b:else/>

              <p><data:comment.body/></p>

            </b:if>



          </dd>

          <dd class='comment-footer'>

            <span class='comment-timestamp'>



              <a expr:href='data:comment.url' title='comment permalink'>

                <data:comment.timestamp/>



              </a>

              <b:include data='comment' name='commentDeleteIcon'/>



            </span>

          </dd>

        </b:loop>

      </dl>

kemudian tambahkan kode

<a href='#comment-form' rel='superbox[content][400x420]'>TINGGALKAN KOMENTAR</a>

Gunakan ukuran modal box yang sesuai. Pada kode di atas, [400x420] berarti modal box yang ditampilkan berukuran panjang 400px dan lebar 420px. Kemudian tambahkan kode tersebut tepat setelah kode:

</b:loop>

Secara keseluruhan, kode tersebut adalah:

<dl id='comments-block'>



        <b:loop values='data:post.comments' var='comment'>

          <dt expr:class='&quot;comment-author &quot; + data:comment.authorClass' expr:id='data:comment.anchorName'>



            <b:if cond='data:comment.favicon'>

              <img expr:src='data:comment.favicon' height='16px' style='margin-bottom:-2px;' width='16px'/>



            </b:if>

            <a expr:name='data:comment.anchorName'/>

            <b:if cond='data:comment.authorUrl'>



              <a expr:href='data:comment.authorUrl'><data:comment.author/></a>

            <b:else/>



              <data:comment.author/>

            </b:if>

            <data:commentPostedByMsg/>

          </dt>



          <dd class='comment-body'>

            <b:if cond='data:comment.isDeleted'>

              <span class='deleted-comment'><data:comment.body/></span>



            <b:else/>

              <p><data:comment.body/></p>

            </b:if>



          </dd>

          <dd class='comment-footer'>

            <span class='comment-timestamp'>



              <a expr:href='data:comment.url' title='comment permalink'>

                <data:comment.timestamp/>



              </a>

              <b:include data='comment' name='commentDeleteIcon'/>



            </span>

          </dd>

        </b:loop>



        <a href='#comment-form' rel='superbox[content][400x420]'>TINGGALKAN KOMENTAR</a>



      </dl>

4. Kesimpulan

Sampai saat ini saya belum begitu mengetahui apakah penerapan lightbox effect pada form komentar akan meningkatkan minat pengunjung untuk berkomentar atau malah sebaliknya. Tetapi menurut saya ini cukup fungsional terutama untuk plattform blogspot yang memiliki kotak komentar yang sangat kaku dan tidak fleksibel. Perlu diingat bahwa ini hanyalah sebuah contoh metode. Kita tidak diharuskan menggunakan jQuery Superbox atau copas mentah-mentah kode di atas. Karena saya merasa kita dapat lebih kreatif untuk membuat sesuatu menjadi lebih baik.

Selamat mencoba!