Contact Form Dengan Iframe Preloader ~ Master Jin

Friday, August 30, 2013

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();'>&#10006;</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.

49 comments

Masiki

30/8/13 11:04 PM

Pertama mas.. :D
izin untuk coba.. (y)

silahkan aja :)

keren,,keren,,keren banget dach master :)

30/8/13 11:09 PM

ahahaa..yang kemaren sorry mas lupa id nya :D hehe

30/8/13 11:16 PM

tidak papa master yang ini keren sekali :D

30/8/13 11:17 PM

ahahaa gak juga :>)

Taufik

30/8/13 11:58 PM

tutor contact form dengan iframe preloader sangat simple / praktis... ijin praktek in mas

Ahlun Nazar

31/8/13 1:25 AM

Hebat nih mas jin :D

Anonymous

31/8/13 4:15 AM

saya mau coba sob, moga cocok dengan template (walau kenyataan kurang pas hehehe) good post!

Wawan

31/8/13 5:13 AM

Ini kontak form milik mas fajrin ya? :D :D

31/8/13 10:03 AM

saya masih belum berani coba mas, hehe ^_^

31/8/13 12:54 PM

keren gan :)
thanks sharenya

comeback

31/8/13 1:20 PM

yups.. milik ane dulu mas

silahkan mas..

31/8/13 1:21 PM

ahahaa hebat bagaimana ?? gak juga mas

pasti cocok deh

duuh.. aman kok mas bro

31/8/13 1:22 PM

sama-sama..

oke oke..

Unknown

31/8/13 1:40 PM

Semakin keren tampilannya gan.. Jago banget Desain :D

31/8/13 1:44 PM

ahahaa gak juga mas bro..

31/8/13 2:06 PM

keren mas, enak dilihat.. :D

31/8/13 2:08 PM

ahahaa makasih mas bro

31/8/13 8:38 PM

Kereeen mas. Jadi pengen nyoba...

31/8/13 9:30 PM

silahkan dicoba gan gratis :D

31/8/13 10:54 PM

nyimak aja sob,,,

Bima A.

1/9/13 8:39 AM

keren gan :)
bro,folow blog ane,sama g-plus ane yah :D makasih :D

1/9/13 8:58 AM

ahahaa :-d

oke sob

1/9/13 8:59 AM

oke tunggu aja

1/9/13 10:34 AM

mana gan? masih belum ada

1/9/13 10:39 AM

masih ngoding template soalnya.. invite aja dulu ntar ane invite balik

1/9/13 10:41 AM

DEMO nya mana gan?

1/9/13 10:43 AM

masih ingat kontak yang ada di kredit link (samping kanan) tulisan Fajrin Ilham H ??
efek Iframe Preloadernya ada disini : http://zhinto.blogspot.com/2013/06/iframe-preloader-with-css3-and.html

Admin

1/9/13 1:06 PM

heheh kereeen mas, cuma penulisan css nya (bungkus) kok tidak ditambahin aja bungkus nasi goreng mas heheheh ^_^

1/9/13 2:22 PM

duh entar takutnya banyak yang pesen :D wkwkwk

1/9/13 2:27 PM

sip mas keren ni formnya :)
thanks

comeback

1/9/13 2:37 PM

ok gan memang contact tersebut memang keren :)

1/9/13 2:38 PM

hahaha :D kalau banyak yang pesan pedesin ajha mas biar perutnya sakit :D

1/9/13 3:41 PM

wkwk.. bentar2 yang pesen blom dateng lagi :)

1/9/13 3:42 PM

waduh.. jgn terlalu memuji mas. hehe jadi gak enak hehe

1/9/13 5:36 PM

dari blog tetangga mas..

Kandaga Lante

2/9/13 3:28 PM

weis keren punya nih mas ........

2/9/13 3:36 PM

ahahaa makasih mas

2/9/13 8:37 PM

silahkan di chek emailnya mas fajrin yang mas minta sudah saya kirimin.. :)

2/9/13 9:49 PM

yups.. sudah saya terima mas.. coba saya pelajari dulu :)

2/9/13 10:43 PM

8/9/13 6:46 AM

Yang kayak gini nih saya cari2 .
Thanks Master :)

8/9/13 9:06 AM

Catatan :
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"