Menyelesaikan Masalah JQuery Popup Formulir Komentar Blogger

Tabel Konten
  1. Lebih Jauh Lagi 

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.

53 Komentar

  • Unknown

    ini nih keren segera aku coba, oh iya misalx klik poskan komentar perlu load lagi gak untuk komen form nya. . . .?

  • Taufik Nurrohman

    @system of blog Formulir komentar harus tetap diupdate, karena setiap URL iframe harus menyesuaikan posting dan letak komentar. Masalahnya, kalau URL iframe tetap sama, saat kita nulis komentar di posting ini, bisa-bisa nanti hasil terbitan komentarnya keluar di posting yang lain. Setiap komentar itu kan harus ada IDnya masing-masing, jadi pasti harus tetap terload sedikit, untuk mengupdate URL iframenya saja.

  • Unknown

    Coba Anda ganti nilai "#comment-editor" pada variabel popSelector menjadi "#comments" dan lihat apa yang akan terjadi.???
    yg terjadi ,Blank ngak ada tombol poskan komentar ya mas.....

  • Taufik Nurrohman

    @ANGGA CAH PARE Harusnya sih nggak blank, tapi keseluruhan komentar akan menjadi kotak dialog. Coba ganti jadi "div.comments"

  • Putra

    nah, kalo mau rubah tempat pemanggil postkan komentar gmn bang??
    di doble lah maksudku

  • Taufik Nurrohman

    @Alam Perwira Saya menyisipkan tombol pemicu secara otomatis seperti ini:

    jQuery('div.pop-form').css({
    ...
    }).before('<a class="openform" href="#">' + openformText + '</a>');

    nah, di situ kan ada elemen <a class="openform" href="#">Poskan Komentar</a>, berhubung di sini kita memakai class, jadi kita bisa buat lagi elemen lain yang sama. Caranya biasa saja. Cukup buat elemen ini:

    <a class="openform" href="#">Poskan Komentar</a>

    Taruh di mana saja, sesuka hati. Nanti fungsinya akan sama saja, karena kelasnya sama. Bedanya cuma kalau yang di atas menyisipkan elemen secara otomatis, kalau yang bawah menyisipkan elemen secara manual.

  • admin

    mas kalau antar POP Komentar yang ini , yang kemarin , sama yang slide panel .

    lebih ringan yang mana ???
    trus , kasih donk tutorial buat bikin modif kotak komentar , minimal seperti ini ...:D

  • Taufik Nurrohman

    @admin POP komentar yang ini lebih ringan dari yang kemarin dari segi instalasi, namun dari segi cara kerja sama saja. Kalau dengan versi slide panel tidak ada bedanya. Lagipula bukan cuma modifikasi komentar saja kok yang menentukan berat tidaknya sebuah blog. Penulisan kode yang rapi dan mudah dibaca oleh komputer (bisa juga berarti: mudah dibaca oleh kita) juga menentukan. Simpanlah semua file eksternal pada direktori yang memiliki kecepatan akses halaman yang ringan (misalnya Google Code) sehingga proses pemanggilan data eksternal tidak terlalu berat.

    Kotak komentar yang ini nggak ada bedanya kok sama yang lain (??)

  • Putra

    @Taufik Nurrohmansudah berhasil mas :)
    cekidottt alam-perwira.blogspot.com

  • admin

    @Taufik Nurrohmanterimakasih mas :D sangat membantu penjelasanya

    mas mau tnya lagi , apa java script dan jquery bisa di compress ?

  • Taufik Nurrohman

    @admin Bisa, coba saja cari di Google: JavaScript compressor. Tapi untuk JQuery lebih baik tidak usah dikompres, karena dari namanya saja juga sudah memiliki arti "telah dikompres" (misal: jquery.min.js)
    min berarti minified.

    Ada juga metode packer, tapi biasanya itu cuma buat para pembuat script yang kodenya tidak mau diubah-ubah oleh pemakai.

    http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js
    http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

  • Unknown

    Oh gitu ya, tapi aku pake modal enggak kok bang, gak perlu Load tapi untuk komentarX ya tetep di postingan itu juga, jadi gak keseluruhan post mempunyai komentar yang sama

  • Putra

    masih membutuhkan bantuan lagi mas :(
    saya sudah pasang Threaded Comment dan saya ingin memasang ini, tapi cukup form comentar nya saja, setelah saya coba2 beberapa kali kenapa gak muncul form komentarnya yah?? :'(
    kalo mau liyat hasil kerjaku di blog dummy saya

  • Putra

    sory doble, udah saya coba di blog dummy saya mas
    alam-perwira.blogspot.com

  • Taufik Nurrohman

    @Alam Perwira Coba hilangkan kelas pop-form dari elemen ini:

    <div class='comment-form pop-form'>
  • Putra

    @Taufik Nurrohmantetep gak ada form isiannya tuh mas :(

  • Taufik Nurrohman

    @Alam Perwira Dulu Saya sudah pernah menulis pada komentar di posting sebelumnya kalau cara ini memang sedikit susah untuk diterapkan pada template berfitur thread comment.

  • Unknown

    Mas, tutorial yang keren banget efeknya....
    saya berhasil mengaplikasikannya di blog toko online saya...
    tapi saya mau tanya mas, bisa ga teknik ini dipake buat efek posting dengan efek yang sama seperti comment ini. jadi ketika di homepage sekian banyak artikel muncul, dan ketika visitor hendak membaca salaah satu artikelnya, visitor tidak perlu meload blog tersebut kembali, melainkan cukup klik link, maka akan muncul efek bukaan pop seperti efek comment ini. lebih jelasnya seperti blog http://go-blogtips.blogspot.com. mohon infonya ya mas... thanks...
    saya sudah jadikan blog mas sebagai rujukan favorit...

  • orange.net

    selamat siang mas,,
    dah lama ga ngunjungin hompimpa,,
    pas berkunjung ktemu postingan keren ini,,
    emm,, gini mas saya mau tanya mungkin ga nyambung sama artikel'a ya,,
    abis saya bingung mo nanya'a dmn,,
    saya mau tanya tentang iframe,,
    gimana cara'a memunculkan url iframe mas?
    contohnya saya buat html "hompimpakerenabis.html"
    saya meletakan html tersebut di menu "artikel" (di menu ini saya menggunakan iframe)
    saat di run
    di url saya yg muncul hanya "www.blabla.com/artikel"
    gimana cara'a biar jadi "www.blabla.com/artikel/hompimpakerenabis.html"

    terimakasih mas,, ditunggu jawaban'a,, :)
    oiea kl bisa kasih widget YM dong mas di website'a,, biar kl mau nanya gampang,, ^_^

  • Taufik Nurrohman

    @orange.net Sebenarnya iframe itu bisa digambarkan sebagai jendela browser seperti biasa. Saat URL dituliskan di address bar, maka halaman tersebut akan terakses. Untuk mengakses URL di dalam <iframe> cukup dengan menuliskan URL sepenuhnya seperti ini:

    <iframe src="http://www.blabla.com/artikel/hompimpakerenabis.html" width="300" height="200" frameborder="0"></iframe>

    oiea kl bisa kasih widget YM dong mas di website'a,, biar kl mau nanya gampang,,

    Saya punya banyak pertimbangan untuk menambahkan fasilitas-fasilitas pihak ke tiga seperti itu. Kebanyakan itu hanya akan membuat blog bertambah lambat ~x(

  • Taufik Nurrohman

    @@w Store Oh, itu template bawaan dari Blogger sendiri kok, namanya Dynamic View. Kalau mau menggunakan model itu harus pindah dulu ke dasbor Blogger yang baru, lalu pilih model template seperti biasa saat memilih template Blogger :)

  • orange.net

    @@Taufik Nurrohman
    ga bisa juga mas,, :(
    coba cek web belajar saya di www.rumahsehat-alami.com
    coba mas pilih layanan trus refleksi,,
    di address bar keluar'a tetep www.rumahsehat-alami.com/layanan.html :(
    gimana cara'a biar jadi www.rumahsehat-alami.com/layanan/artikel/refleksi.html

    maaf saya kasih link web belajar saya,, bukan maksud promosi,,
    terimakasih,, dtunggu ya mas jawaban'a,, ^_^

  • Taufik Nurrohman

    @orange.net Maksudnya bagaimana ya? Kalau URL iframe memang tidak akan mempengaruhi address bar. Coba dicek pada iframe-nya. Klik kanan, lalu pilih This Frame.. ⇒ Show only This Frame. Dari situ baru akan keluar URL aslinya.

  • orange.net

    @Taufik Nurrohman
    owh jadi ga bisa ya,, :(
    maksud saya biar bisa langsung ngelink ke artikel refleksi,,

    emm satu pertanyaan lagi mas,,
    kenapa ya web saya itu kl abis saya edit di webhost'a saya refresh hasli'a ga berubah,,
    history browser'a hrs dihapus dulu baru dia berubah,,
    itu knp ya?
    web-web yang lain ga bgitu cm web saya aja yg bgitu,, :(

  • Taufik Nurrohman

    @orange.net Pakai browser apa? Saya biasanya pakai Firefox juga begitu. Kalau sudah begitu biasanya Saya pindah ke browser lain dulu hehe...
    Saya kurang tahu soal itu, mungkin beberapa browser memiliki kemampuan untuk menyimpan halaman yang sudah pernah diunduh. Imbas baiknya, kita bisa mengakses halaman yang sama lebih cepat, meskipun tetap saja kesan utama yang terjadi akan terasa seperti kembali ke masa lalu :Ozz

  • Miftachudin

    mas taufik jquery na dah fungsi tapi form dan comment body nya g nampil,,saya dh ikuti cara diatas,,kira2 salahnya dimana mas,,tlng pncrahannya...

  • Taufik Nurrohman

    @Miftachudin Kalau tetap tidak bisa, berarti JQuery telah salah membungkus elemen. Coba ganti bagian ini:

    var popSelector        = "#comment-editor",
    ...

    dengan ini:

    var popSelector        = "div.comments",
    ...

    Jika tetap tidak bisa, berarti selektor elemen komentarmu memiliki kelas/ID yang berbeda. Bukan id='comments' dan juga bukan class='comments'.
    Coba diperiksa.

  • Miftachudin

    @Taufik Nurrohman5f mas g bisa,,sat ini saya mnngunakan slide comments,,dan mmanggilnya pun mnggunakan #comments,dan #comments-body,,tp dah saya cba smua itu ttp g mau mas,,y sdah mksh mas 5f dh ngreptin,,salam..:D

  • Miftachudin

    @Miftachudinalhmdulillah akhirnya jd juga stlah mmbuat mata panas dan kpala nyut2an,,,mksih mas tofik,,,

  • Unknown

    klau membuat artikel/ daftar isinya seperti tampilan google itu gmna yaa ??? mohon di bantu :)

  • Taufik Nurrohman

    @Dwix Ciolist Daftar isi yang seperti apa ya? Mungkin komentarnya salah tempat hehe... :p

  • X-Batim

    Bang kalo menyimpan nya melayang gimana ??

  • Taufik Nurrohman

    @Vicky Bzone Melayang apanya ya?

  • X-Batim

    @Taufik Nurrohman Eh maksud saya kan ada dua tombol poskan comentar nah yang dulu saya mau hapus tapi gak tau code nya coba liat di blog saya http://vickybzone.blogspot.com/

  • Taufik Nurrohman

    @Vicky Bzone Klik Expand Template Widget. Tekan tombol CTRL + F lalu ketik class='openform'

  • Putra

    @Taufik Nurrohman mungkin sehati sama pertanyaan saya juga :D
    kan ada tombol asli dari scriptnya, trus saya mau mindahin tombol pembuka itu sesuka hati saya, yang penting cuman 1 tombol? caranya gmn bang? :D

  • X-Batim

    @Taufik NurrohmanCuman ada satu bang

  • Taufik Nurrohman

    @Vicky Bzone Hapus!

  • Taufik Nurrohman

    @Alam Perwira Tambahkan kode CSS ini:

    a.from-js {
    display:none !important;
    }
  • X-Batim

    @Taufik Nurrohman Kok di hapus kan itu kode yang aku simpen di tempat yang tepat nah aku mau nya nge hapus yang ada di bawah postingan

  • Taufik Nurrohman

    @Vicky Bzone Kalau gitu pakai jawaban di atas (jawaban Saya ke Alam Perwira) ^:D

  • X-Batim

    @Taufik Nurrohman nambahin nya di mana di atas ]]> ??

  • Taufik Nurrohman

    @Vicky Bzone Ya, di atas ]]></b:skin> atau </style> :)

  • Anonim

    kang kalo untuk fitur replay koment bisa kah ?

  • Unknown

    Keren gan artikel-artikelnya...
    Kalau mau diterapkan di readmore blogger bisa gak ya?
    jadi klo misal orang klik readmore di blogspot, keluar pop up potingannya aja..
    persis kaya template dinamic bawaan blogspot....

  • Unknown

    kalau komentar-komentarnya ditampilkan segaligus sama formnya gimana? saya pernah nemuin gitu, entah di blog ini entah mana lupa :'(
    tolong bantuannya

  • Unknown

    Mas mas, Cara menambahkan pesan atau teks tulisan di atas form komentarnya gimana caranya ya? pas uda di klik tombol "poskan komentar"???

    Buat toko online ku soalnya. buat testimonialnya.

    Karna ku pikir form komentar blogger ini lebih ribet saat mau masukan komentar, dan membutuhkan akun pula, sangat sangat tidak terbuka untk pengunjung yang tidak memiliki akun apapun, berbeda kali dengan wordpress. Jadi aku pikir untuk menambahkan tulisan yang berisi "panduan" menuliskan komentar (testimonial), dan mengarahkan pengunjung untuk memilih opsi "Name/URL" saat berkomentar jika mereka tidak memiliki akun google, wordpress, Typepad atau AIM.

    • Taufik Nurrohman

      Pengaturan pesan bisa dilakukan melalui dasbor. Ganti selektor ini:

      var popSelector = "#comment-editor";

      menjadi seperti ini:

      var popSelector = ".comment-form,.threaded-comment-form";
      • Unknown

        Sip sip :-bd . Terimakasih nih mas Taufik bantuannya. Sudah bisa sekarang.

  • Unknown

    Kalau misalnya kita tekan suatu tombol maka muncul popup, popupnya telah diatur oleh jquerry dan css sebelumnya , cuma bagaimana javascript untuk memunculkan popup saat suatu tombol di klik ?

Komentar telah ditutup.