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
X ✓ada banyak sebenarnya..kalau mau edit sendiri :D heeh
X ✓walaupun ngk pertama,,kedua ajha dech..lansung ane coba master... :)
X ✓keren nih sob..
X ✓ijin mau coba sob ..
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
X ✓Dishare juga ternyata :D
X ✓Aku mau nih templatenya yang kayak mas Jin ... Gimana cara buatnya yaa ? :D
X ✓wah asik nih, nanti saya copy yah mas, untuk menambah form di blog saya. thks sudah berbagi.
X ✓di gandakan sama floating tambah oke pokoknya mas..hehe
X ✓silahkan aja..hehe
X ✓cara membuat kotak hijau seperti konversi kode, emoticon dll. itu mas ??
X ✓hehe ya itung-itung update mas..
X ✓kerangkanya milik mdf kok mas.. ini juga dari mdf lalu saya full modifikasi
X ✓silahkan mas..hehe sama-sama
X ✓oklah nanti dikolaborasikan lagi biar lebih muantap master...
X ✓oke2.. nanti kalau longgar lagi, saya perbarui atau mungkin mas.nya juga bisa :)
X ✓jadi tambah keren Contact Form nya gan.. thanks ya
X ✓makasih gan.hehe
X ✓kalo dimodif lagi pasti Tambah keren form kontaknya mas,,
X ✓Okelah ini keren sob, saya simpan dulu scriptnya sob
X ✓terimakasih atas sharingnya, saya menggunakan jasa dari EMF.
X ✓masih bisa ditambah lebih oke lagi kok mas..
X ✓silahkan mas..boleh boleh
X ✓wah bagus tuh.. keren kok dari EMF :)
X ✓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?
X ✓iya bro betul, gimana caranye
X ✓bisa di pelajari disini mas dan langsung langkah ketiga :
X ✓http://ksks-blog.blogspot.com/2013/06/membuat-tombol-modif-didalam-pesan.html
model judul posting milik mdf lalu saya modifikasi + blog pagernya (posting lama) milik dte
X ✓wuuiiih, keren bnget contact formnya. kapan2 aku mau coba,,,, :)
X ✓Wah keren nih kotak formnya...boleh dicoba
X ✓wah keren mas.. seperti situs situs profesional dech tampilannya.. makasih mas. ijin save tutornya...
X ✓lha, email kita letakkin dimana di dalam script?
X ✓keren sob tampilan form kontaknya , ada dua pilihan lagi.. pilih yang mana ya hehehe... :D
X ✓wah keren ni tutor, layak untuk ane coba. terimakasih banyak mas sudah berbagi trik luar biasa ini.
X ✓Asyik nih mas Jin..selain keliat ok..bisa kita sesuaim juga warnanya sesuai template kita ya..
X ✓Kapan2 pengen juga masang :)
Simpennya...di tempat yg sejuk ya mas..hehe :D
X ✓Wah ijin nyoba modif ah mas :D
X ✓Saya belum coba. Heheh
X ✓wah thanks ya mas jin :D akan saya coba nih :p
X ✓wah form komentarnya jadi seperti tampilan di wordpress ya mas
X ✓kawai contact form nya
X ✓nyimak aj sob, gak nyoba :D
X ✓kulkas dong mas..wkwk
X ✓silahkan mas :>)
X ✓boleh banget dah..
X ✓hehe silahkan deh mas (o)
X ✓sebelumnya pasang widget contact formnya terlebih dahulu mas.. nanti sudah otomatis ter-indeks ke email
X ✓hehe yang mana hayoo :D
X ✓hehe makasih banyak mas..
X ✓hehe boleh boleh :)
X ✓wah silahkan mas.. modif yang lebih keren yah ?? hehe
X ✓dicoba dong :D
X ✓coba coba aja..wkwkkwk
X ✓hehe hampir mirip dikitlah..
X ✓beres dah..
X ✓waduh :-?
X ✓Waw ... mantap bener .... makasih banyak ya ... ?
X ✓sama-sama mas..
X ✓sippp deh :D mampir dong gan
X ✓hehe pastinya gan :) maaf soalnya masih agak sibuk
X ✓iya dech... keren dech...! heheh.., :>)
X ✓gak ikhlas banget deh.wkwkwkwkk
X ✓eh gan bantu saya dong, mau tanya nih, ko bullets dan numbering di blog saya tidak muncul ya :-?
X ✓Weh bagus mas jadi kelihatan lebih menarik, lalu kl mau bikin itu yg disamping gimana kl di scrol ada percentnya mas?
X ✓mantep2
X ✓letakkan diatas ]]></b:skin>
X ✓#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>
hehe makasih makasih :)
X ✓artikelnya bermanfaat sob,,,thanks for share,,
X ✓sama-sama sob..
X ✓thanks udah sharing mas,,saya coba dulu..
X ✓ditunggu kehadirannya di blog saya
oke.. tunggu saja mas..
X ✓weih mantap mantap
X ✓artikelnya bermanfaat sekali gan...sukses selalu :)
X ✓hehe makasih mas..
X ✓hehe jos dah..
X ✓ya sama sama
X ✓uwalaah mantap bener nih mas jin :-d
X ✓hehe hatur nuwun kang :D
X ✓hadehh saya aja nggak ngerti bhs pemrograman :D mas
X ✓makin super mantap tampilan MJ mas (h)
X ✓makin mantab aja tampilan blognya sob, 4 JEMPOL dah ... :D
X ✓hehe pasti bisa mas sedikit2 :)
X ✓cuman perubahan sedikit kok mas :>)
X ✓ah gak juga sob.. masih bagusan punya ente :D
X ✓Wah mantab... kapan2 kalo koneksi dah stabil sy mo tjoba akh variasi2 di atas...
X ✓silahkan mas.. ane tunggu dah :)
X ✓kunjungan malem gan :)
X ✓owh iya ada yg mau ditanyain nih gan.. ko bullet dan numbering diblog saya ngga muncul ya? tahu ga gan?
mas ,, mau tanya itu htmlnya langsung itu bisa fungsi kan ??? nggk usah nambah widget contact html lgi kan mas ??? :) maklum newbie
X ✓yups.. sudah bisa mas. silahkan dicoba :)
X ✓kurang tau ane gan..
X ✓berarti klo kita ngirim otomatis langsung menuju email blogger kita ??? saya coba kok nggk bisa mas ??? kenapa yah ?? :)
X ✓coba tambahkan widgetnya mas..
X ✓itu karna dah ada kode :
#ContactForm1{
display:none;
}
sorry.. ane yang salah.hehe
top markotop gan :D
X ✓makasih gan.. :)
X ✓tampilannya simpel tapi elegan mas..mantap.
X ✓makasih-makasih..
X ✓yg biru nggak ada ya gan ?
X ✓CSSnya bisa di edit sendiri mas..
X ✓Keren masss.. bermanfaat buat sy :)
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