Tutorial ini sudah tidak terlalu efektif lagi untuk diterapkan pada tema Blogger standar ketika ini mengingat formulir komentar sanggup berpindah-pindah posisi.
Mengingat cara ini sedikit sulit, Saya sudah menciptakan 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 niscaya selalu ingat ketika sedang mengunggah gambar atau mengedit tema atau mengubah pengaturan blog. Seringkali Anda akan berhadapan dengan jendela munculan yang Saya rasa sangat menarik bila sanggup kita terapkan pada formulir komentar sebuah blog.
Meski sedikit sulit, tapi bahu-membahu ada beberapa hal yang umum ditemui dalam tema blogspot sehingga keseragaman itu sanggup meringankan kerja kita.
Pertama-tama masuklah ke halaman editor HTML tema Anda kemudian cek Expand Tema Widget biar seluruh widget sanggup dijabarkan.
Setelah itu temukan arahan yang tampak menyerupai ini:
<div id='comment-form' class='comment-form'>
Atau mungkin Anda juga akan menemukan arahan yang berbeda menyerupai 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 menyerupai ini:
<div id='comment-form' class='comment-form pop-form'>Atau bila tidak terdapat kelas tambahkan atribut class='pop-form' pada elemen tersebut menyerupai ini:
<div id='respond' class='pop-form'>Fokuslah pada arahan yang Anda temukan tersebut. Pada bab atas tambahkan arahan ini:
<button class='openform'>Poskan Komentar</button>dan di bab bawahnya sisipkan arahan ini:
<a class='close' href='#'>×</a>Sehingga kesannya menjadi menyerupai ini:
<button class='openform'>Poskan Komentar</button> <div id='comment-form' class='comment-form pop-form'> <a class='close' href='#'>×</a> ... ... ... </div>Lakukan hal yang sama pada elemen-elemen sejenis yang Anda temukan berikutnya.
Setelah itu temukan arahan ini:
]]></b:skin>
Salin arahan CSS di bawah ini kemudian letakkan sempurna di atas arahan ]]></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 arahan ini:
</head>
Salin arahan 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 obrolan 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 obrolan $('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 obrolan $('div.pop-form a.close').click(function() { $(this).parent().hide(); $('#whitelay').remove(); return false; }); }); //]]> </script>Kode yang Saya beri garis bawah ialah jQuery. Jika tema Anda sudah dilengkapi dengan jQuery, singkirkan arahan tersebut!
Klik Simpan Tema. Seharusnya kini sudah jadi.
Sumber https://www.dte.web.id/