Membuat Komentar Lightbox dengan Jquery ini memang jarang dipakai oleh kebanyakan blogger. Dikarenakan sanggup menjadikan error di Google web Master Tool. Akan tetapi tampilan akan semakin memancing orang untuk berkomentar di blog kita.
Sejuta trik tidak menjamin dengan mem.buat komentar lightbox di blogger akan menambah trafik atau mem.buat banyak pengunjung. So semua terserah pada sahabat semua.
Bagi yg belum tahu apa itu lightbox, bis,a berkunjung di Cara mem.buat Lightbox dengan Jquery. Jika sudah membaca? Sekarang sebagai pola mem.buat komentar lightbox ini.
Lihat gambar di atas! Bagaimana sahabat? itulah yg disebut komentar lightbox dengan Jquery. Mau mem.buatnya?
Lihat gambar di atas! Bagaimana sahabat? itulah yg disebut komentar lightbox dengan Jquery. Mau mem.buatnya?
Baiklah, kita mulai saja pembahasan perihal mem.buat komentar lightbox ini. Kometar lightbox ini memakai jquery sebagai dasar pembuatannya. Silakan lsayakan dengan runtut langkah-langkah berikut :
Langkah 1: Pemasangan CSS
Copy dan Paste instruksi 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/AVvXsEhY1ywptqQdXWpnWaXyW4celU9ECSCgC3AIY6CVjRsj-pBt9_xPJFbjrQoJTKtIB0-SkUB-8wOq35GWBXUljsjEeVVKEBMIBGNubCNEnhIQ-KrCOiMyEboXPjNcDnb2-pqqnD-W6jjzC702/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 instruksi tersebut di atas ]]></b:skin>
Untuk instruksi aslinya anda bis,a melihat sumber di Official Websitenya Superbox : Jquery Superbox
Dalam web tersebut sudah memuat javascript, jquery dan CSS yg dipakai untuk memanipulasi atau menampilkan imbas lightbox pada form. Kita fokuskan pada kotak komentar.
Langkah 2: Menampilkan Link Komentar
Yang perlu kita lsayakan yaitu mem.buat sebuah link yg berfungsi menampilkan <div>#comment-form (Pemanggilan form kotak komentar) dalam bentuk modal Lightbox. Pertama-tama, carilah instruksi 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>
lalu tambahkan kode
<a href='#comment-form' rel='superbox[content][400x420]'>TINGGALKAN KOMENTAR</a>
Gunakan ukuran modal box yg sesuai. Pada instruksi di atas, [400x420] berarti modal box yg ditampilkan berukuran panjang 400px dan lebar 420px. (Kode ini menampilkan seruan untuk berkomentar). Kalau diblog aku berupa gambar bertuliskan "Klick here to leave comment" Kemudian tambahkan instruksi tersebut sempurna 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 instruksi no 1, di hapus saja instruksi tersebut.
b. Kode JS tersebut sudah terpasang banyak sekali macam fungsi, menyerupai JS Back to Top, Mobile Template, dll.
c. Untuk di blog ini, aku hanya mengaktifkan superbox on form. Makara pergunakan dengan sebaik-baiknya!
Langkah 4 : Menyembunyikan Kotak Komentar (Comment Form)
Jika sudah simpan template sobat. Jika semua berjalan dengan baik dan sudah bis,a digunakan, langkah terakhir yaitu menyembunyikan kotak komentar. Langkah ini yaitu langkah yg paling sulit. Untuk komentar yg sudah dimodifikasi kadang perlu ketelitian. Gunakan dengan tips yg aku berikan di Cara Menyembunyikan Kotak Komentar 2. Lihat balasannya dan biar dalam mem.buat komenta lightbox sukses dan berjalan dengan baik. Jika ada hambatan malasah efek lightbox pada komentar blogspot, Silakan tinggalkan pesan!
Happy Blogging! by. Sejuta Trik Blogger
JS Code by : www.Devbook.net
