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.
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/AVvXsEhoJkWAQNE7a1KxaZCB0KUqxaeBMpIr8OlAB42PoXU2fkM5U2lWQmZA3hPqK49h2UQIqwBOLmpXfi9Ae_o6dKwOP5Evw2RTQ0sf-m3IomdMLWTWO1Dl6qH91fALkzUpsGNOLvs5LP8sB5-o/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 SuperboxDalam 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 KomentarYang 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='"comment-author " + 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 LightboxKemudian 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!
JS Code by :
www.Devbook.net
