Tutorial ini sudah tidak terlalu efektif lagi untuk diterapkan pada tema Blogger standar ketika ini mengingat formulir komentar bisa berpindah-pindah posisi.
Saya sudah membaca beberapa keluhan dari para blogger wacana cara manual untuk membuat formulir komentar model jendela munculan yang pernah Saya tuliskan di sini. Sampai Saya pikir, mungkin problem ini bisa dengan gampang diatasi dengan cara menerapkan beberapa manipulasi jQuery .wrap(), .wrapInner(), .append() dan .before() untuk menyisipkan elemen secara tidak eksklusif pada sasaran sasaran. Dan ya, ternyata memang jauh lebih gampang dari apa yang Saya bayangkan sebelumnya:
Pada pada dasarnya cara kerja skrip ini yaitu akan mencari elemen yang telah ditentukan, kemudian secara otomatis akan membungkus elemen tersebut dengan kerangka yang diharapkan untuk membuat kotak komentar tersembunyi.
Untuk membuatnya, pertama-tama masuklah ke halaman editor HTML tema Anda kemudian segera temukan instruksi ini:
]]></b:skin>
Salin instruksi CSS ini dan letakkan di atasnya:
div.pop-form { position:relative; width:470px; height:auto; background-color:white; border:1px solid #acacac; -webkit-box-shadow:0 1px 17px -3px rgba(0,0,0,.4); -moz-box-shadow:0 1px 17px -3px rgba(0,0,0,.4); box-shadow:0 1px 17px -3px rgba(0,0,0,.4); overflow:hidden; } div.pop-form div.innerpop { padding:30px; overflow:auto; overflow-y:scroll; width:auto; height:370px; } div.pop-form a.close { display:block; position:absolute; top:12px; right:32px; z-index:7; text-decoration:none; color:#666; font:normal bold 18px/normal Arial,Sans-Serif; background:none; border:none; outline:none; } #poplay { position:fixed !important; position:absolute; top:0; right:0; bottom:0; left:0; width:100%; height:100%; background-color:black; opacity:.7; filter:alpha(opacity=70); } a.openform, div.pop-form a.closebutton { cursor:pointer; background-color:#359135; border:1px solid #175A17; padding:5px 10px; font:normal bold 11px/normal Arial,Sans-Serif; color:white; margin:15px 0; text-decoration:none; text-shadow:0 -1px 0 rgba(0,0,0,.4); -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.4); -moz-box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.4); box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,0,0,.4); -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; } a.openform:hover, div.pop-form a.closebutton:hover { background-color:#D0141B; border-color:#B42A21; text-decoration:none; } a.openform:focus, a.openform:active, div.pop-form a.closebutton:focus, div.pop-form a.closebutton:active { -webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.4); -moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.4); box-shadow:inset 0 1px 1px rgba(0,0,0,.4); } div.pop-form a.closebutton { position:absolute; bottom:15px; right:30px; margin:0; }Setelah itu temukan instruksi ini:
</head>
Salin instruksi ini dan letakkan di atasnya:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script><script> //<![CDATA[ var popSelector = "#comment-editor", openformText = "Poskan Komentar", popCloseButtonText = "Tutup", popFadeSpeed = 600; //]]> </script> <script src='http://dte-project.googlecode.com/svn/trunk/blogger-popform.js'></script>Kode yang Saya beri garis bawah yaitu jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan instruksi tersebut!
Klik Simpan Tema.
Bukankah ini jauh lebih gampang dari cara sebelumnya?
Lebih Jauh Lagi
Selektor #comment-editor berasal dari elemen formulir komentar Blogger yang umumnya berbentuk ibarat ini:
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' height='410' id='comment-editor' name='comment-editor' src='' width='100%'></iframe>Dan skrip blogger-popform.js berfungsi untuk memanipulasi elemen formulir komentar tersebut dengan elemen-elemen yang akan diproduksi secara otomatis oleh jQuery:
jQuery(function() { // Membungkus elemen sasaran dengan `div.pop-form` jQuery(popSelector).wrap('<div class="pop-form"></div>'); // Menyembunyikan elemen `div.pop-form` dan menyisipkan elemen kulit bab dalam (`div.innerpop`) ... // ... kemudian menyisipkan elemen `a.close` dan `a.closebutton` ke dalam elemen `div.pop-form` jQuery('div.pop-form').hide().wrapInner('<div class="innerpop"></div>').append('<a href="#" class="close">×</a><a class="closebutton">' + popCloseButtonText + '</a>'); // Set posisi elemen jQuery('div.pop-form').css({ 'position' :'fixed', 'top' :'50%', 'left' :'50%', 'margin-left' :-($('div.pop-form').outerWidth()/2), 'margin-top' :-($('div.pop-form').outerHeight()/2), 'z-index' :999, 'display' :'none' }).before('<a class="openform" href="#">' + openformText + '</a>'); // Membuka kotak dialog... jQuery('a.openform').live("click", function() { jQuery('body').append('<div id="poplay"></div>'); jQuery('div.pop-form').fadeIn(popFadeSpeed); return false; }); // Menutup kotak dialog... jQuery('div.pop-form a.close, div.pop-form a.closebutton').live("click", function() { jQuery(this).parents('div.pop-form').hide(); jQuery('#poplay').remove(); return false; }); });Itu juga berarti bahwa skrip ini tidak hanya sebatas mempunyai kemampuan untuk mengubah elemen <iframe> komentar Blogger menjadi jendela munculan, tetapi juga bisa dipakai untuk memanipulasi elemen lain. Cukup dengan menganti nilai popSelector menjadi elemen lain, maka jendela munculan akan diterapkan pada elemen lain pula.
Coba Anda ganti selektor #comment-editor pada variabel popSelector menjadi #comments dan lihat apa yang akan terjadi.
Variabel openformText dipakai untuk memilih label tombol pembuka formulir komentar sedangkan variabel popCloseButtonText dipakai untuk memilih label tombol epilog formulir komentar.
Tentukan kecepatan imbas .fadeIn() pada variabel popFadeSpeed.