Membuat Komentar Lightbox

Membuat Komentar Lightbox dengan Jquery ini memang jarang digunakan oleh kebanyakan blogger. Dikarenakan dapat menimbulkan error di Google ...

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(http://2.bp.blogspot.com/_yspTDFyFW2Q/TAfGqh8ilkI/AAAAAAAAASQ/H1WknFavBO4/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
Name

About US,1,activate,1,ADDMEFAST,1,AdLinkFly,1,Adsense,2,ANALISA WEB,1,android,1,Artikel,11,Backlink,5,Backlinks,18,Backup,1,Best 140+ Do-follow Web 2.0,1,Best 59+ Free Ping Submission Sites For Faster Indexing,1,Best High DA Dofollow Blog Commenting,1,BIN,1,Blog,2,Blog Design,2,Blogger,1,Bounce Rate,1,CDN,1,Copy Artikel,1,cPanel,1,crack,2,Desain,1,DIGITAL MARKETING,1,Disposable E-mail Free,1,domain,1,DropMyLink,1,Dunia Kampus,1,EDU BACKLINKS,5,Express Vpn Premium Account,1,FAQ SCHEME PAGE,1,followers tool,1,Footer,1,free,1,Free Image Submission Sites,1,Free Profile Creations Sites List 2020-2021,1,Free Video Submission Sites List 2020-2021,1,Gmail,1,Google,3,GOOGLE ADS,1,Google Adsense,1,GOOGLE ANALYTICS,1,google drive,2,Google My Business Customer Reviews,1,GOOGLE SEARCH ENGINE,1,GoogleNews,1,Header,3,High Authority Blog Submission Sites List,1,High DA/PA PPT Submission Sites List 2020-2021 for SEO,1,hosting,1,Hotstar Premium,1,How To,1,How to Activate,3,HTML,5,IDM,1,Info Blog,11,Info Google,13,Inspirasi,5,Instagram,2,Instagram Likes,1,Jejaring Sosial,12,JNews,1,JSON-LD,1,Kapita Selekta,3,Komentar,8,Kurikulum 2013,2,Label,3,Link,14,Lynda.com,1,MENINGKATKAN SEO WORDPRESS,1,Menu,2,MICRODATA SEO,1,MyThemeShop,1,Netflix Accounts,1,News,38,newsmag,1,newspaper,1,Noor theme,1,Nord Vpn Premium Account In April 2020,1,NORD VPN PREMIUM ACCOUNTS,1,On Page SEO,8,online shop,1,Opini,10,Page Speed,1,Pagerank,8,PDF Submission,3,PDF Submission Sites,1,Pembelajaran,4,Pixelyoursite,1,plugin,1,plugins,2,post views,1,Posting,10,Privacy Policy,1,Produk,1,PVANISH PREMIUM ACCOUNT,1,RSS,1,RSS Feed Submission Sites List 2020-2021,1,Schema,1,Search Engine,4,SEARCH QUALITY RATERS,1,Secret Hacks,1,SEF,8,seo,93,SEO WORDPRESS,1,Settings,1,Shopping,1,Shortcode,1,Sidebar,2,Spotify,1,Spotify Premium Accounts,1,tagdiv,1,Template,9,themes,2,Tips,2,Tips & Tricks,3,TIPS DAN TRIK,2,Tokoh,1,Tools,10,Tricks,9,Trik,1,Web 2.O Sites List 2020,1,Web Hosting,2,Webmaster Tools,5,Website,3,Widget,10,wordpress,13,WORDPRESS & WOOCOMMERCE TUTORIALS,1,WP Rocket,1,youtube,1,
ltr
item
Trik.My.ID - Trik dan Tips Untuk Semuanya: Membuat Komentar Lightbox
Membuat Komentar Lightbox
http://3.bp.blogspot.com/_naeF4y2pCAw/TStDtvP3_ZI/AAAAAAAAAM0/EgUYomxchJo/s320/Kotak+Komentar.gif
http://3.bp.blogspot.com/_naeF4y2pCAw/TStDtvP3_ZI/AAAAAAAAAM0/EgUYomxchJo/s72-c/Kotak+Komentar.gif
Trik.My.ID - Trik dan Tips Untuk Semuanya
https://www.trik.my.id/2012/01/membuat-komentar-lightbox.html
https://www.trik.my.id/
https://www.trik.my.id/
https://www.trik.my.id/2012/01/membuat-komentar-lightbox.html
true
3610684226484108978
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content