Popup Formulir Komentar Blog dengan JQuery

Jum’at, 24 Februari 2012

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

Mengingat cara ini sedikit sulit, Saya sudah membuat versi ringkasnya di sebuah artikel baru. Semoga cara yang satu ini lebih mudah: Menyelesaikan Masalah jQuery Popup Formulir Komentar Blogger

Saya mencuri desainnya dari panel kontrol Blogger hehe. Anda pasti selalu ingat saat sedang mengunggah gambar atau mengedit tema atau mengubah pengaturan blog. Seringkali Anda akan berhadapan dengan jendela munculan yang Saya rasa sangat menarik jika bisa kita terapkan pada formulir komentar sebuah blog.

Meski sedikit sulit, tapi sebenarnya ada beberapa hal yang umum ditemui dalam tema blogspot sehingga keseragaman itu bisa meringankan kerja kita.

Pertama-tama masuklah ke halaman editor HTML tema Anda kemudian cek Expand Tema Widget agar seluruh widget bisa dijabarkan.

Setelah itu temukan kode yang tampak seperti ini:

<div id='comment-form' class='comment-form'>

Atau mungkin Anda juga akan menemukan kode yang berbeda seperti ini:

<div id='respond'>

Tip: Tekan CTRL + F kemudian ketik 'comment-form' atau 'respond' untuk mempermudah pencarian.

Jika sudah ketemu, tambahkan kelas pop-form di samping kelas yang sudah ada seperti ini:

<div id='comment-form' class='comment-form pop-form'>

Atau jika tidak terdapat kelas tambahkan atribut class='pop-form' pada elemen tersebut seperti ini:

<div id='respond' class='pop-form'>

Fokuslah pada kode yang Anda temukan tersebut. Pada bagian atas tambahkan kode ini:

<button class='openform'>Poskan Komentar</button>

dan di bagian bawahnya sisipkan kode ini:

<a class='close' href='#'>&#215;</a>

Sehingga hasilnya menjadi seperti ini:

<button class='openform'>Poskan Komentar</button>
  <div id='comment-form' class='comment-form pop-form'>
    <a class='close' href='#'>&#215;</a>
    ...
    ...
    ...
  </div>

Lakukan hal yang sama pada elemen-elemen sejenis yang Anda temukan berikutnya.

Setelah itu temukan kode ini:

]]></b:skin>

Salin kode CSS di bawah ini kemudian letakkan tepat di atas kode ]]></b:skin>:

.pop-form {
  position:relative;
  width:470px;
  height:370px;
  padding:30px;
  background:white url('http://4.bp.blogspot.com/-WUW67PkelvY/T0ZiitlF2mI/AAAAAAAACMc/ppKAVJUatRU/s1600/loading-32-v1.gif') no-repeat 50% 50%;
  border:1px solid #ccc;
  -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;
}

.pop-form iframe {
  max-width:none !important;
  height:370px !important;
  background-color:white !important;
  background-image:none !important;
  overflow:auto !important;
}

.pop-form a.close {
  display:block;
  position:absolute;
  top:12px;
  right:17px;
  z-index:7;
  text-decoration:none;
  color:#666;
  font:normal bold 18px/normal Arial,Sans-Serif;
  background:none;
  border:none;
  outline:none;
}

#whitelay {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:0;
  width:100%;
  height:100%;
  background-color:white;
  opacity:.7;
  filter:alpha(opacity=70);
}

button.openform {
  cursor:pointer;
  border:1px solid #d8d8d8;
  padding:7px 12px;
  font:normal bold 11px/normal Arial,Sans-Serif;
  color:#555;
  background-color:#f5f5f5;
  background-image:-webkit-linear-gradient(#f4f4f4,#f1f1f1);
  background-image:-moz-linear-gradient(#f4f4f4,#f1f1f1);
  background-image:-ms-linear-gradient(#f4f4f4,#f1f1f1);
  background-image:-o-linear-gradient(#f4f4f4,#f1f1f1);
  background-image:linear-gradient(#f4f4f4,#f1f1f1);
  margin:15px 0;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}

button.openform::-moz-focus-inner {
  margin:0;
  padding:0;
  border:none;
  outline:none;
}

button.openform:hover {
  background-color:#f4f4f4;
  background-image:-webkit-linear-gradient(#f9f9f9,#f1f1f1);
  background-image:-moz-linear-gradient(#f9f9f9,#f1f1f1);
  background-image:-ms-linear-gradient(#f9f9f9,#f1f1f1);
  background-image:-o-linear-gradient(#f9f9f9,#f1f1f1);
  background-image:linear-gradient(#f9f9f9,#f1f1f1);
  border-color:#bbb;
  -webkit-box-shadow:0 2px 0 rgba(0,0,0,.04);
  -moz-box-shadow:0 2px 0 rgba(0,0,0,.04);
  box-shadow:0 2px 0 rgba(0,0,0,.04);
  -webkit-transition:all .26s ease-out;
  -moz-transition:all .26s ease-out;
  -ms-transition:all .26s ease-out;
  -o-transition:all .26s ease-out;
  transition:all .26s ease-out;
}

button.openform:focus,
button.openform:active {
  background-color:#ddd;
  background-image:none;
  -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
  -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.1);
}

Lalu 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[
$(document).ready(function() {

    // Atur posisi kotak dialog dengan JavaScript
    $('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'     :9999,
        'display'     :'none'
    }).find('iframe').hide();

    // Membuka kotak dialog
    $('button.openform').click(function() {
        $('body').append('<div id="whitelay"></div>');
        $('div.pop-form').fadeIn('fast', function() {
            $('iframe', this).delay(1600).fadeIn('fast');
        });
        return false;
    });

    // Menutup kotak dialog
    $('div.pop-form a.close').click(function() {
        $(this).parent().hide();
        $('#whitelay').remove();
        return false;
    });

});
//]]>
</script>

Kode yang Saya beri garis bawah adalah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan kode tersebut!

Klik Simpan Tema. Seharusnya sekarang sudah jadi.