Menyelesaikan Masalah JQuery Popup Formulir Komentar Blogger

Tutorial ini sudah tidak terlalu efektif lagi untuk diterapkan pada tema Blogger standar saat ini mengingat formulir komentar bisa berpindah-pindah posisi.

Revisi untuk jQuery Popup Formulir Komentar Blogger

Saya sudah membaca beberapa keluhan dari para blogger tentang cara manual untuk menciptakan formulir komentar model jendela munculan yang pernah Saya tuliskan di sini. Sampai Saya pikir, mungkin masalah ini bisa dengan mudah diatasi dengan cara menerapkan beberapa manipulasi jQuery .wrap(), .wrapInner(), .append() dan .before() untuk menyisipkan elemen secara tidak langsung pada target sasaran. Dan ya, ternyata memang jauh lebih mudah dari apa yang Saya bayangkan sebelumnya:

Lihat Demo

Pada intinya cara kerja skrip ini adalah akan mencari elemen yang telah ditentukan, kemudian secara otomatis akan membungkus elemen tersebut dengan kerangka yang dibutuhkan untuk menciptakan kotak komentar tersembunyi.

Untuk membuatnya, pertama-tama masuklah ke halaman editor HTML tema Anda kemudian segera temukan kode ini:

]]></b:skin>

Salin kode 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 kode ini:

</head>

Salin kode 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 adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!

Klik Simpan Tema.

Bukankah ini jauh lebih mudah dari cara sebelumnya?

---

Lebih Jauh Lagi

Selektor #comment-editor berasal dari elemen formulir komentar Blogger yang umumnya berbentuk seperti 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 bagian dalam (`div.innerpop`) ...
    // ... lalu 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 memiliki kemampuan untuk mengubah elemen <iframe> komentar Blogger menjadi jendela munculan, tetapi juga bisa digunakan 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 digunakan untuk menentukan label tombol pembuka formulir komentar sedangkan variabel popCloseButtonText digunakan untuk menentukan label tombol penutup formulir komentar.

Tentukan kecepatan efek .fadeIn() pada variabel popFadeSpeed.