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

Monday, July 08, 2013
Modifikasi Contact Form Blogger Keren

Sekian lama Master Jin terhenti untuk update Posting, membalas Komentar serta berkunjung di Blog sobat ternyata cukup menumbuhkan rasa rindu akan mendalami Blogger kembali. Kesibukan menyambut Marhaban Ya Ramadhan juga salah satu tanggung jawab Master Jin di suatu tempat tinggal saya. Dengan terus mengarungi pengalaman semoga juga akan bermanfaat bagi saya.

Cukup lama Master Jin tidak membahas mengenai Tutorial Blogger, karena diluar sana banyak sekali ahli Blogger yang mungkin kalian sudah mengerti. Jadi, Master Jin hanya bisa memberikan support semoga sukses akan Blog kalian. Terlalu lamanya Master Jin tidak update mengenai Tutorial Blogger, kali ini saya akan munculkan kembali. Dan posting ini, jujur saya terinspirasi dari Bloggertut.

Modifikasi Contact Form Blogger Keren. Tentunya kalian sudah mengenal Contact Form, fitur dari Blogger yang baru. Nah, kali ini saya akan sedikit memodifikasinya yang sebelumnya sudah ada di Bloggertut. Bisa kalian lihat pada gambar di atas bisa sebagai Preview Modifikasi Contact Form Blogger Keren.

CSS Contact Form Cerah
/* CSS Contact Form Cerah by Master Jin */
#ContactForm1{
display:none;
}
#contact_wrap {
margin: 10px;
width: 320px;
height: 340px;
padding: 25px;
background-color:#cccccc;
border: 2px solid #333;
box-shadow: 0 0 20px #F0F0F0 inset,0 1px 4px rgba(0,0,0,0.1),0 1px 2px rgba(0,0,0,0.3);
}
#contact_wrap h3{ width: 296px;color:#fff; font-size:20px; margin: -37px -15px 10px; padding:7px 3px; text-align:center; font-weight:bold; position:relative; border-bottom-right-radius:10px; border-bottom-left-radius:10px; background-color:#0CAA32;box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,0 1px 1px #C8C3B9;}
#contact_wrap h3:before { content:' '; position:absolute; top:0; left:-10px; width:0; height:0; border-style:solid; border-width:0 0 10px 10px; border-color:transparent transparent #cccccc transparent }
#contact_wrap h3:after { content:' '; position:absolute; top:0; right:-10px; width:0; height:0; border-style:solid; border-width:10px 0 0 10px; border-color:transparent transparent transparent #cccccc }
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 10px;
color:#777;
background: #f6f6f6 center;
border:1px solid #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 10px;
background: #f6f6f6 center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 10px;
font-family:Arial, sans-serif;
background: #f6f6f6 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 25px; 
margin-top:3px;
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
border-radius:2px;
text-shadow: 1px 0 0 #1f4962;
background-color:#0CAA32;
box-shadow:0 1px 1px rgba(0,0,0,0.4);
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
box-shadow:0 1px 1px #000 inset;background-color:#00902E
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

CSS Contact Form Gelap
/* CSS Contact Form Gelap by Master Jin */
#ContactForm1{
display:none;
}
#contact_wrap {
margin: 10px;
width: 320px;
height: 340px;
padding: 25px;
background-color:#555;
border: 2px solid #333;
box-shadow: 0 0 2px #C8C3B9 inset;
}
#contact_wrap h3{ width: 296px;color:#fff; font-size:20px; margin: -37px -15px 10px; padding:7px 3px; text-align:center; font-weight:bold; position:relative; border-bottom-right-radius:10px; border-bottom-left-radius:10px; background-color:#AD3000;box-shadow: 0 1px 0 rgba(255,255,255,0.1) inset,0 1px 0 #444;}
#contact_wrap h3:before { content:' '; position:absolute; top:0; left:-10px; width:0; height:0; border-style:solid; border-width:0 0 10px 10px; border-color:transparent transparent #555 transparent }
#contact_wrap h3:after { content:' '; position:absolute; top:0; right:-10px; width:0; height:0; border-style:solid; border-width:10px 0 0 10px; border-color:transparent transparent transparent #555 }
#ContactForm1_contact-form-name{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 10px;
color:#777;
background: #f6f6f6 center;
border:1px solid #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ContactForm1_contact-form-email{
width: 270px; 
height:auto;
margin: 5px auto; 
padding: 10px 10px 10px 10px;
background: #f6f6f6 center; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ContactForm1_contact-form-email-message{
width: 270px; 
height: 150px; 
margin: 5px auto; 
padding: 10px 10px 10px 10px;
font-family:Arial, sans-serif;
background: #f6f6f6 10px 10px; 
color:#777;
border:1px solid #ccc;
-webkit-border-radius: 4px;
border-radius: 4px;
}
#ContactForm1_contact-form-submit {
width: 95px; 
height: 25px; 
margin-top:3px;
float: right; 
color: #FFF;
padding: 0; 
cursor:pointer;
border-radius:2px;
text-shadow: 1px 0 0 #1f4962;
background-color:#A73C3C;
box-shadow:0 1px 1px rgba(0,0,0,0.4);
border:1px solid #194f6d;
}
#ContactForm1_contact-form-submit:hover {
box-shadow:0 1px 1px #000 inset;background-color:#AD3000
}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{
width: 320px;
margin-top:35px;
}

Pilih HTML
<div id="contact_wrap">
<h3>
Hubungi Kami</h3>
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Nama" size="30" type="text" value="" />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Pesan" rows="5"></textarea>
<input id="ContactForm1_contact-form-submit" type="button" value="Kirim" />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>

<style type="text/css">
#comments, #blog-pager, .breadcrumbs, .post-footer{display:none}
</style>

Silahkan kalian tinggal pilih sesuai selera kalian, pilih yang bertemakan gelap atau cerah sesuai tema template blogger kalian. Mungkin, kalian juga bisa mengubah warnanya sendiri.

Nah, semoga dengan tutorial blogger dari Master Jin ini akan sedikit membantu untuk memodifikasi tampilan Blogger kalian bagian contact. Untuk tutorial yang lebih unik lagi silahkan tunggu atau kalian bisa request melalui komentar dibawah.

Tambahan, pada kode HTML silahkan lihat pada Hubungi Kami. Nah, kata itu bisa kalian edit pula sesuai selera kalian sendiri. Selamat Mencoba :)

99 comments

wew :D keren mas :) ada dua pilihan warna :-d

deleteX

ada banyak sebenarnya..kalau mau edit sendiri :D heeh

deleteX

walaupun ngk pertama,,kedua ajha dech..lansung ane coba master... :)

deleteX

keren nih sob..
ijin mau coba sob ..

deleteX
avatar
Anonymous

halo masjin, cara agar diatas form komentar terdapat kotak seperti punya ente gimana ya? soalnya saya pengen pasang banyak emoticon. contohnya kayak ada beberapa kotak hijaunya

deleteX

Dishare juga ternyata :D

deleteX
avatar
Anonymous

Aku mau nih templatenya yang kayak mas Jin ... Gimana cara buatnya yaa ? :D

deleteX

wah asik nih, nanti saya copy yah mas, untuk menambah form di blog saya. thks sudah berbagi.

deleteX

di gandakan sama floating tambah oke pokoknya mas..hehe

deleteX

silahkan aja..hehe

deleteX

cara membuat kotak hijau seperti konversi kode, emoticon dll. itu mas ??

deleteX

hehe ya itung-itung update mas..

deleteX

kerangkanya milik mdf kok mas.. ini juga dari mdf lalu saya full modifikasi

deleteX

silahkan mas..hehe sama-sama

deleteX

oklah nanti dikolaborasikan lagi biar lebih muantap master...

deleteX

oke2.. nanti kalau longgar lagi, saya perbarui atau mungkin mas.nya juga bisa :)

deleteX

jadi tambah keren Contact Form nya gan.. thanks ya

deleteX

makasih gan.hehe

deleteX

kalo dimodif lagi pasti Tambah keren form kontaknya mas,,

deleteX

Okelah ini keren sob, saya simpan dulu scriptnya sob

deleteX

terimakasih atas sharingnya, saya menggunakan jasa dari EMF.

deleteX

masih bisa ditambah lebih oke lagi kok mas..

deleteX

silahkan mas..boleh boleh

deleteX

wah bagus tuh.. keren kok dari EMF :)

deleteX
avatar
Anonymous

Ntar saya coba kalau template buatan saya sudah rampung. Oh iya mas, halaman depan blog ini (post) menggunakan bawaan template atau menggunakan daftar isi navigasi by DTE?

deleteX
avatar
Anonymous

iya bro betul, gimana caranye

deleteX

bisa di pelajari disini mas dan langsung langkah ketiga :
http://ksks-blog.blogspot.com/2013/06/membuat-tombol-modif-didalam-pesan.html

deleteX

model judul posting milik mdf lalu saya modifikasi + blog pagernya (posting lama) milik dte

deleteX

wuuiiih, keren bnget contact formnya. kapan2 aku mau coba,,,, :)

deleteX

Wah keren nih kotak formnya...boleh dicoba

deleteX

wah keren mas.. seperti situs situs profesional dech tampilannya.. makasih mas. ijin save tutornya...

deleteX

lha, email kita letakkin dimana di dalam script?

deleteX

keren sob tampilan form kontaknya , ada dua pilihan lagi.. pilih yang mana ya hehehe... :D

deleteX

wah keren ni tutor, layak untuk ane coba. terimakasih banyak mas sudah berbagi trik luar biasa ini.

deleteX

Asyik nih mas Jin..selain keliat ok..bisa kita sesuaim juga warnanya sesuai template kita ya..
Kapan2 pengen juga masang :)

deleteX

Simpennya...di tempat yg sejuk ya mas..hehe :D

deleteX
avatar
Anonymous

Wah ijin nyoba modif ah mas :D

deleteX
avatar
Anonymous

Saya belum coba. Heheh

deleteX

wah thanks ya mas jin :D akan saya coba nih :p

deleteX

wah form komentarnya jadi seperti tampilan di wordpress ya mas

deleteX
avatar
Anonymous

kawai contact form nya

deleteX
avatar
Anonymous

nyimak aj sob, gak nyoba :D

deleteX

kulkas dong mas..wkwk

deleteX

silahkan mas :>)

deleteX

boleh banget dah..

deleteX

hehe silahkan deh mas (o)

deleteX

sebelumnya pasang widget contact formnya terlebih dahulu mas.. nanti sudah otomatis ter-indeks ke email

deleteX

hehe yang mana hayoo :D

deleteX

hehe makasih banyak mas..

deleteX

hehe boleh boleh :)

deleteX

wah silahkan mas.. modif yang lebih keren yah ?? hehe

deleteX

coba coba aja..wkwkkwk

deleteX

hehe hampir mirip dikitlah..

deleteX

Waw ... mantap bener .... makasih banyak ya ... ?

deleteX

sama-sama mas..

deleteX

sippp deh :D mampir dong gan

deleteX

hehe pastinya gan :) maaf soalnya masih agak sibuk

deleteX

iya dech... keren dech...! heheh.., :>)

deleteX

gak ikhlas banget deh.wkwkwkwkk

deleteX

eh gan bantu saya dong, mau tanya nih, ko bullets dan numbering di blog saya tidak muncul ya :-?

deleteX

Weh bagus mas jadi kelihatan lebih menarik, lalu kl mau bikin itu yg disamping gimana kl di scrol ada percentnya mas?

deleteX

letakkan diatas ]]></b:skin>
#scroll {
display: none;
position: fixed;
top: 0;
right: 20px;
z-index: 500;
padding: 3px 8px;
background-color: #2187e7;
color: #fff;
border-radius: 3px;
}
#scroll:after {
content: " ";
position: absolute;
top: 50%;
right: -8px;
height: 0;
width: 0;
margin-top: -4px;
border: 4px solid transparent;
border-left-color: #2187e7;
}


letakkan dibawah </head>
<div id='scroll'></div>

letakkan di atas </body>
<script type='text/javascript'>
//<![CDATA[
var scrollTimer = null;
$(window).scroll(function() {
var viewportHeight = $(this).height(),
scrollbarHeight = viewportHeight / $(document).height() * viewportHeight,
progress = $(this).scrollTop() / ($(document).height() - viewportHeight),
distance = progress * (viewportHeight - scrollbarHeight) + scrollbarHeight / 2 - $('#scroll').height() / 2;
$('#scroll')
.css('top', distance)
.text(' (' + Math.round(progress * 100) + '%)')
.fadeIn(100);
if (scrollTimer !== null) {
clearTimeout(scrollTimer);
}
scrollTimer = setTimeout(function() {
$('#scroll').fadeOut();
}, 1500);
});
//]]>
</script>

deleteX

hehe makasih makasih :)

deleteX

artikelnya bermanfaat sob,,,thanks for share,,

deleteX

thanks udah sharing mas,,saya coba dulu..
ditunggu kehadirannya di blog saya

deleteX

oke.. tunggu saja mas..

deleteX

artikelnya bermanfaat sekali gan...sukses selalu :)

deleteX

hehe makasih mas..

deleteX

uwalaah mantap bener nih mas jin :-d

deleteX

hehe hatur nuwun kang :D

deleteX
avatar
Anonymous

hadehh saya aja nggak ngerti bhs pemrograman :D mas

deleteX

makin super mantap tampilan MJ mas (h)

deleteX

makin mantab aja tampilan blognya sob, 4 JEMPOL dah ... :D

deleteX

hehe pasti bisa mas sedikit2 :)

deleteX

cuman perubahan sedikit kok mas :>)

deleteX

ah gak juga sob.. masih bagusan punya ente :D

deleteX

Wah mantab... kapan2 kalo koneksi dah stabil sy mo tjoba akh variasi2 di atas...

deleteX

silahkan mas.. ane tunggu dah :)

deleteX

kunjungan malem gan :)
owh iya ada yg mau ditanyain nih gan.. ko bullet dan numbering diblog saya ngga muncul ya? tahu ga gan?

deleteX

mas ,, mau tanya itu htmlnya langsung itu bisa fungsi kan ??? nggk usah nambah widget contact html lgi kan mas ??? :) maklum newbie

deleteX

yups.. sudah bisa mas. silahkan dicoba :)

deleteX

kurang tau ane gan..

deleteX

berarti klo kita ngirim otomatis langsung menuju email blogger kita ??? saya coba kok nggk bisa mas ??? kenapa yah ?? :)

deleteX

coba tambahkan widgetnya mas..
itu karna dah ada kode :
#ContactForm1{
display:none;
}


sorry.. ane yang salah.hehe

deleteX

top markotop gan :D

deleteX

tampilannya simpel tapi elegan mas..mantap.

deleteX

makasih-makasih..

deleteX

yg biru nggak ada ya gan ?

deleteX

CSSnya bisa di edit sendiri mas..

deleteX

Keren masss.. bermanfaat buat sy :)

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