Textual description of firstImageUrl

Membuat Komentar Lightbox

Kotak Komentar

Membuat Komentar Lightbox dengan Jquery ini memang jarang digunakan oleh kebanyakan blogger. Dikarenakan dapat menimbulkan error di Google web Master Tool. Akan tetapi tampilan akan semakin memancing orang untuk berkomentar di blog kita.
Sejuta trik tidak menjamin dengan membuat komentar lightbox di blogger akan menambah trafik atau membuat banyak pengunjung. So semua terserah pada sahabat semua. 
Bagi yang belum tahu apa itu lightbox, bisa berkunjung di Cara membuat Lightbox dengan Jquery. Jika sudah membaca? Sekarang sebagai contoh membuat komentar lightbox ini.
Lightbox

Lihat gambar di atas! Bagaimana sahabat? itulah yang disebut komentar lightbox dengan Jquery. Mau membuatnya?

Baiklah, kita mulai saja pembahasan tentang membuat komentar lightbox ini. Kometar lightbox ini menggunakan jquery sebagai dasar pembuatannya. Silakan lakukan dengan runtut langkah-langkah  berikut :
Langkah 1: Pemasangan CSS
Copy dan Paste kode di bawah ini :


#superbox-overlay{position:fixed;top:0;left:0;z-index:9998;width:100%;height:100%;background:#111;}
#superbox-wrapper{position:fixed;z-index:9999;top:0;display:table;width:100%;height:100%;}
#superbox-container{position:relative;display:table-cell;width:100%;height:100%;vertical-align:middle;margin:0;padding:0;}
#superbox{background:#fff;border:5px solid #ca1717;margin:0 auto;padding:10px;}
#superbox-container .loading{text-align:center;width:32px;height:32px;text-indent:-9999px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjy4ljHYTSrY-GheRNAil91IBLGMA_cyBx7suVT-WFoJTsrQ1jtdLYiE8gRBPUHCuYjhATXbsBxPopk3azsztcQrbH5opjD6aB5oPGznAVJF5X0kIIHWQSGGnjl_UkroX203g7FQydljaPI/s320/loader.gif) no-repeat 0 0;margin:0 auto;}
* html #superbox-overlay{position:absolute;height:expression(document.body.scrollHeight>document.body.offsetHeight?document.body.scrollHeight+'px':document.body.offsetHeight+'px');}
* html #superbox-wrapper{position:absolute;margin-top:expression(0-parseInt(this.offsetHeight/2) 0 (document.documentElement&&document.documentElement.scrollTop||document.body.scrollTop) 0 px);}
#superbox-innerbox{padding:10px 0;}
#superbox.image{text-align:center;}
#superbox .close a{float:right;line-height:20px;background:#333;cursor:pointer;padding:0 5px;}
#superbox .close a span{color:#fff;}
#superbox .nextprev a{float:left;margin-right:5px;line-height:20px;background:#333;cursor:pointer;color:#fff;padding:0 5px;}
#superbox .nextprev .disabled{background:#ccc;cursor:default;}
.author-comments{color:#0000ff;background:#ffffff;border:2px solid #0000ff;padding:3px;}
.status-msg-wrap,.feed-links,.comment-form{display:none;}
.post a:hover img,#searchform #s:focus{border:1px solid #999;}
#comments-block .comment-author,.profile-datablock{margin:.5em 0;}
:first-child+html #superbox-container,* html #superbox-container{position:absolute;top:50%;display:block;height:auto;}
:first-child+html #superbox,* html #superbox{position:relative;top:-50%;display:block;}

Letakkan kode tersebut di atas ]]></b:skin>
Untuk kode aslinya anda bisa melihat sumber di Official Websitenya Superbox : Jquery Superbox
Dalam web tersebut sudah memuat javascript, jquery dan CSS yang digunakan untuk memanipulasi atau menampilkan efek lightbox pada form. Kita fokuskan pada kotak komentar.

Langkah 2: Menampilkan Link Komentar
Yang perlu kita lakukan adalah membuat sebuah link yang berfungsi menampilkan <div>#comment-form (Pemanggilan form kotak komentar) dalam bentuk modal Lightbox. 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. (Kode ini menampilkan ajakan untuk berkomentar). Kalau diblog saya berupa gambar bertuliskan "Klick here to leave comment" Kemudian tambahkan kode tersebut tepat setelah kode:

</b:loop>

Langkah 3: Pemasangan Script Lightbox
Kemudian pasang javascript berikut di bawah </head> atau di atas </body> terserah sahabat mau memasang di mana.

<script src='http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js' type='text/javascript'/>
<script src='http://viemonsta.googlecode.com/files/dev_mobile_for_blogger.js' type='text/javascript'/>
<script src='http://viemonsta.googlecode.com/files/devbook.js' type='text/javascript'/>
<script src='http://viemonsta.googlecode.com/files/jquery.superbox-min.js' type='text/javascript'/>

Catatan :
a. Jika kalian sudah memasang kode no 1, di hapus saja kode tersebut.
b. Kode JS tersebut sudah terpasang berbagai macam fungsi, seperti JS Back to Top, Mobile Template, dll.
c. Untuk di blog ini, saya hanya mengaktifkan superbox on form. Jadi pergunakan dengan sebaik-baiknya!

Langkah 4 : Menyembunyikan Kotak Komentar (Comment Form)
Jika sudah simpan template sobat. Jika semua berjalan dengan baik dan sudah bisa digunakan, langkah terakhir adalah menyembunyikan kotak komentar. Langkah ini adalah langkah yang paling sulit. Untuk komentar yang sudah dimodifikasi kadang perlu ketelitian. Gunakan dengan cara yang saya berikan di Cara Menyembunyikan Kotak Komentar 2. Lihat hasilnya dan semoga dalam membuat komenta lightbox sukses dan berjalan dengan baik. Jika ada kendala malasah efek lightbox pada komentar blogspot, Silakan tinggalkan pesan!

Happy Blogging! by. Sejuta Trik Blogger

JS Code by : www.Devbook.net

20 comments:

  1. Wah Akhirnya di share juga thanks gan

    ReplyDelete
  2. iya gan, maaf baru selesai, untuk lebih gamblangnya akan saya update lagi.

    ReplyDelete
  3. alhamdulillah.. thanks yoo sobb.. :)

    ReplyDelete
  4. Ketika klik form komen tampillah seperti yg punya sobat ini, membuat saya mau tidak mau berkomentar. Saya itu adalah salah satu fungsi membuat komentar lightbox.. hehe

    ReplyDelete
  5. # Alam Perwira
    Makasih juga kunjungannya
    # M. Endi
    Iya gan, ane bukan pencuri devbook.net, tapi itu kreatifitas sendiri.

    ReplyDelete
  6. kok gak muncul form komentarnya yah gan.. :(

    http://underground404.blogspot.com/

    ReplyDelete
  7. @ alam perwira
    komentar box yang tampil kurang lebih 490x270 aj gan, selebihnya gak akan muncul, kalau diperlebar CSSnya mungkin bsa. Id comment sdh benar belum? ada 2 soalnya, 1 blog yang satunya versi mobile

    ReplyDelete
  8. bingung dah gua.. :(
    TeamViewer ane aja gan... :D

    udah ane lepas lagi nuh.. :'(
    susah bangets sich... :'(

    ReplyDelete
  9. Bagus sob emang menarik,,,
    [CTRL][D] dulu saja kapan2 bisa say praktekkan,,,

    happy blogging

    ReplyDelete
  10. Trik yang bagus . comment back yah ^^.

    ReplyDelete
  11. # DeeJayHan-Blog
    Matur thanks gan, makasih banyak dah mampir

    ReplyDelete
  12. Gan KodeX gak mempan kotak komenX masih tetep muncul, gmn donk . . .??

    ReplyDelete
  13. # SOB
    itu karena id commentnya beda gan, agan cari id kotak commentnya dulu. punya saya .comment form bukan #comment-form jadi id itu yang disembunyikan. kalau gak bisa emang it pake script. ukuran normal kira-kira 410 x 400 gan, kalau lebih mungkin dah di edit. oke!

    ReplyDelete
  14. Ohhhhhhhhh ya ya ya aku gak perhatiin kode css nya tadi kirain kode css nya cuman untuk membangun tampilan lighbox nya aja padahal disitu ada kode penghilang elemenX juga ok entar aku coba lagi

    ReplyDelete
  15. Gan PopUp nya bisa muncul seperti puX agan ini tapi, untuk kotak komentarX gak muncul jadi kosong gak ada isiX

    ReplyDelete
  16. dibaca lgi postnya gan, itu ukuran iframe dan lightbox harus sama, misal ukuran css 410x400 trus kode pemanggilnya jg gak melebihi. ok

    ReplyDelete
  17. wah,,kalau saya malas lagi kalau ngedit CSS ini takut error lagi :)

    ReplyDelete
  18. terimakasih dah share artikel yang bagus ini, langsung pasang ke TKP : http://kostum-brebes.blogspot.com/

    ditunggu share artikel baru nya

    ReplyDelete
  19. seperti gambar lightbox, keren :)

    ReplyDelete
  20. dulu saya pernah pakek nih. :)

    ReplyDelete

Silahkan berkomentar sesuai artikel. Setiap komentar adalah tanggung jawab anda. Komentar spam akan dihapus, baik secara otomatis dengan javascript ataupun manual. Saya sudah menyediakan nama/url jadi link aktif di komentar tidak perlu lagi disertakan. Jadilah blogger Indonesia yang bijak. Anda berkomentar saya berkunjung!