.post-thumbnail{float:left;margin-right:20px}
Pasang Iklan Anda

Friday, August 30, 2013
Contact Form Dengan Iframe Preloader

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.

52 comments

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

deleteX

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

deleteX

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

deleteX

tidak papa master yang ini keren sekali :D

deleteX

ahahaa gak juga :>)

deleteX

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

deleteX

Hebat nih mas jin :D

deleteX
avatar
Anonymous

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

deleteX

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

deleteX

saya masih belum berani coba mas, hehe ^_^

deleteX

Nice post master :)

deleteX

keren gan :)
thanks sharenya

comeback

deleteX

yups.. milik ane dulu mas

deleteX

ahahaa hebat bagaimana ?? gak juga mas

deleteX

duuh.. aman kok mas bro

deleteX

Semakin keren tampilannya gan.. Jago banget Desain :D

deleteX

ahahaa gak juga mas bro..

deleteX

keren mas, enak dilihat.. :D

deleteX

ahahaa makasih mas bro

deleteX
avatar
Anonymous

Kereeen mas. Jadi pengen nyoba...

deleteX

silahkan dicoba gan gratis :D

deleteX

nyimak aja sob,,,

deleteX

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

deleteX

mana gan? masih belum ada

deleteX

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

deleteX

DEMO nya mana gan?

deleteX

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

deleteX

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

deleteX

duh entar takutnya banyak yang pesen :D wkwkwk

deleteX
avatar
Anonymous

sip mas keren ni formnya :)
thanks

comeback

deleteX

ok gan memang contact tersebut memang keren :)

deleteX

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

deleteX

wkwk.. bentar2 yang pesen blom dateng lagi :)

deleteX

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

deleteX

Fontnya dapet dari mana mas (Font komentar) ? :D

deleteX

dari blog tetangga mas..

deleteX

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

deleteX

ahahaa makasih mas

deleteX

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

deleteX

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

deleteX

Tuker link yuk gan. Pasang link ane
> http://badaikagaku.blogspot.com < " Kazoku Anime Lover"
Ntar ane pasang link agan..
#Comment back ya

deleteX

Yang kayak gini nih saya cari2 .
Thanks Master :)

deleteX
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"

KONVERSI KODEEMOTICON
 
Back to Top