Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

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.

Formulir Komentar Blogger
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.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 53 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!