Berhubung masih sangat hangat membicarakan soal Contact Form Blogger, kali ini Master Jin akan sharekan Contact Form Dengan Iframe Preloader yang dulunya pernah digunakan Master Jin (disebelah kanan kredit link Fajrin Ilham H). Tentunya masih ingat, karena saya blok warna kuning emas.
Sebelumnya silahkan kalian pasang dulu widgetnya, lalu masuk pada postingan Modifikasi Contact Form Blogger Keren yang saya share minggu lalu jika ingin tampilannya makin oke. Selesai tahap ini lanjut ke finishnya.
Pertama kode
CSS
#bungkus { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); -moz-transition:all 1s linear; -o-transition:all 1s linear; -webkit-transition:all 1s linear; transition:all 1s linear; z-index:9999; }
#bungkus iframe { border:0; position:absolute; top:20px; left:0; right:0; bottom:0; width:100%; height:96%; }
#bungkus .hilang { text-align:center; cursor:pointer; background:#252424; color:#E00; }
.tampil { visibility:visible; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; -webkit-transform:scale(1) rotate(0deg); -moz-transform:scale(1) rotate(0deg); -ms-transform:scale(1) rotate(0deg); -o-transform:scale(1) rotate(0deg); transform:scale(1) rotate(0deg); }
.hidden { visibility:hidden; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; -webkit-transform:scale(0) rotate(90deg); -moz-transform:scale(0) rotate(90deg); -ms-transform:scale(0) rotate(90deg); -o-transform:scale(0) rotate(90deg); transform:scale(0) rotate(90deg); }
.awal { display:none; }
.lanjut { display:block; }
Kedua letakkan dibawah
<body>
<div id='bungkus' class='hidden'>
<div class='hilang' onclick='sembunyi();'>✖</div>
<iframe id='iframe' class='awal'></iframe>
</div>
Ketiga
Javascript
<script type="text/javascript">
//<![CDATA[
function tampil(obj){
var p = document.getElementById('bungkus'),
b = document.getElementById('iframe');
p.className = 'tampil';
b.className = 'lanjut';
b.src = obj.href;
}
function sembunyi(){
var p = document.getElementById('bungkus'),
b = document.getElementById('iframe');
b.className = 'awal';
b.src = '';
p.className = 'hidden';
}
//]]>
</script>
Keempat yaitu pemanggilnya
<a href="http://link-satu.com" onclick="tampil(this);return false;">Satu</a>
Ini hanya gabungan antara Iframe milik Zhinto, lalu memanfaatkan laman sebagai wadah Contact Formnya :D jadi selamat mencoba.
52 comments
Pertama mas.. :D
X ✓izin untuk coba.. (y)
silahkan aja :)
X ✓keren,,keren,,keren banget dach master :)
X ✓ahahaa..yang kemaren sorry mas lupa id nya :D hehe
X ✓tidak papa master yang ini keren sekali :D
X ✓ahahaa gak juga :>)
X ✓tutor contact form dengan iframe preloader sangat simple / praktis... ijin praktek in mas
X ✓Hebat nih mas jin :D
X ✓saya mau coba sob, moga cocok dengan template (walau kenyataan kurang pas hehehe) good post!
X ✓Ini kontak form milik mas fajrin ya? :D :D
X ✓saya masih belum berani coba mas, hehe ^_^
X ✓Nice post master :)
X ✓keren gan :)
X ✓thanks sharenya
comeback
yups.. milik ane dulu mas
X ✓silahkan mas..
X ✓ahahaa hebat bagaimana ?? gak juga mas
X ✓pasti cocok deh
X ✓duuh.. aman kok mas bro
X ✓sama-sama..
X ✓oke oke..
X ✓Semakin keren tampilannya gan.. Jago banget Desain :D
X ✓ahahaa gak juga mas bro..
X ✓keren mas, enak dilihat.. :D
X ✓ahahaa makasih mas bro
X ✓Kereeen mas. Jadi pengen nyoba...
X ✓silahkan dicoba gan gratis :D
X ✓nyimak aja sob,,,
X ✓keren gan :)
X ✓bro,folow blog ane,sama g-plus ane yah :D makasih :D
ahahaa :-d
X ✓oke sob
X ✓oke tunggu aja
X ✓mana gan? masih belum ada
X ✓masih ngoding template soalnya.. invite aja dulu ntar ane invite balik
X ✓DEMO nya mana gan?
X ✓masih ingat kontak yang ada di kredit link (samping kanan) tulisan Fajrin Ilham H ??
X ✓efek Iframe Preloadernya ada disini : http://zhinto.blogspot.com/2013/06/iframe-preloader-with-css3-and.html
heheh kereeen mas, cuma penulisan css nya (bungkus) kok tidak ditambahin aja bungkus nasi goreng mas heheheh ^_^
X ✓duh entar takutnya banyak yang pesen :D wkwkwk
X ✓sip mas keren ni formnya :)
X ✓thanks
comeback
ok gan memang contact tersebut memang keren :)
X ✓hahaha :D kalau banyak yang pesan pedesin ajha mas biar perutnya sakit :D
X ✓wkwk.. bentar2 yang pesen blom dateng lagi :)
X ✓waduh.. jgn terlalu memuji mas. hehe jadi gak enak hehe
X ✓Fontnya dapet dari mana mas (Font komentar) ? :D
X ✓dari blog tetangga mas..
X ✓weis keren punya nih mas ........
X ✓ahahaa makasih mas
X ✓silahkan di chek emailnya mas fajrin yang mas minta sudah saya kirimin.. :)
X ✓yups.. sudah saya terima mas.. coba saya pelajari dulu :)
X ✓silahkan mas..
X ✓Tuker link yuk gan. Pasang link ane
X ✓> http://badaikagaku.blogspot.com < " Kazoku Anime Lover"
Ntar ane pasang link agan..
#Comment back ya
Yang kayak gini nih saya cari2 .
X ✓Thanks Master :)
sama-sama..
X ✓1. Dilarang menanamkan link aktif
2. Dilarang promosi / meng-iklankan suatu produk dll.
3. Berkomentar dengan bahasa yang sopan
4. Untuk memasukkan gambar : copy url gambar lalu paste di form komentar
Tambahan :
✓ Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "KONVERSI KODE"
KONVERSI KODEEMOTICON