Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Popup Formulir Komentar Blog dengan JQuery

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

Popup Formulir Komentar Blog dengan jQuery

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.

  

Berlangganan

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

 48 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!