/*
Created by Taufik Nurrohman (http://www.dte.web.id)
Modified by Taufik Karim (http://topsmedia.blogspot.com)
code-start
*/
.sub-dialog,.dialog-contact{
width:300px;
height:200px;
background-color:#352E2A;
position:fixed!important;
position:absolute;
top:50%;
left:50%;
margin-top:-122px;
margin-left:-172px;
z-index:99;
border:1px solid #fff;
-moz-box-shadow:0 0 10px black;
box-shadow:0 0 10px black;
padding:20px;
overflow:auto;
display:none
}
.sub-dialog li{
margin:0 0 0 1em;
list-style:disc outside
}
.sub-dialog a,.dialog-contact a{
display:inline;
line-height:normal
}
.sub-dialog a:hover,.dialog-contact a:hover{
background:none;
text-decoration:underline
}
.sub-dialog h3,.dialog-contact h3{
margin:0 0 10px;
font-size:130%
}
a.close-btn,
.dialog-contact a.close-btn {
color:inherit;
text-decoration:none!important;
font-size:120%;
font-weight:bold;
position:absolute;
top:8px;
right:10px
}
.dialog-contact{
height:auto
}
#ContactForm1_contact-form-error-message,
#ContactForm1_contact-form-success-message {
background-color:#900;
color:white;
line-height:2
}
#ContactForm1_contact-form-success-message{
background-color:#070
}
/* Contact Form */
#ContactForm1 form {
margin:0;
padding:0 5px 5px
}
#ContactForm1 input,#ContactForm1 textarea{
width:100%;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
#ContactForm1 textarea{
height:50px
}
#ContactForm1 input.contact-form-button{
width:auto
}
#ContactForm1 .contact-form-cross{
cursor:pointer
}kode html di pasang di bawah <body>
<!-- Start Contact Form -->
<b:if cond='data:blog.pageType != "index"'>
<b:if cond='data:blog.pageType != "archive"'>
<div class='dialog-contact'>
<b:section id='extra-stuff'>
<b:widget id='ContactForm1' locked='true' title='Kontak Kami' type='ContactForm'>
<b:includable id='main'>
<!-- b:if cond='data:title != ""'>
<h4><data:title/></h4>
</b:if -->
<div class='contact-form-widget'>
<div class='form'>
<form name='contact-form'>
<label>
<data:contactFormNameMsg/><br/>
<input class='contact-form-name' expr:id='data:widget.instanceId + "_contact-form-name"' name='name' size='30' type='text' value=''/>
</label>
<label>
<data:contactFormEmailMsg/> <span style='color:red;'>*</span><br/>
<input class='contact-form-email' expr:id='data:widget.instanceId + "_contact-form-email"' name='email' size='30' type='text' value=''/>
</label>
<label>
<data:contactFormMessageMsg/> <span style='color:red;'>*</span><br/>
<textarea class='contact-form-email-message' expr:id='data:widget.instanceId + "_contact-form-email-message"' name='email-message'/>
</label>
<input class='btn contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/>
<div class='text-center'>
<div class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<div class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
</div>
</form>
</div>
</div>
<!-- b:include name='quickedit'/ -->
</b:includable>
</b:widget>
</b:section>
</div>
</b:if>
</b:if>
<!-- End Contact Form --><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script>
<script>
//<![CDATA[
(function($) {
var c_m = $('.category-menu'),
s_d = $('.sub-dialog,.dialog-contact'),
c_o = $('.contact-open'),
d_c = $('.dialog-contact');
s_d.prepend('<h3>
</h3>
');
$('<a class="close-btn" href="#">×</a>').on("click", function() {
$(this).parent().fadeOut(600);
return false;
}).appendTo(s_d);
c_m.find('a').filter(function() {
return $(this).next().is('.sub-dialog');
}).on("click", function() {
s_d.hide();
$(this).next().fadeIn(200).find('h3:first').text($(this).html());
return false;
});
c_o.on("click", function() {
d_c.fadeIn(600).find('h3:first').text($(this).html());
return false;
});
})(jQuery);
//]]>
</script>silahkan di edit lagi sesuai warna template anda biar serasi
Untuk pemasangan tombol nya kurang lebih seperti di bawah ini,
<a class='small-btn contact-open' href='#' rel='nofollow'>Kontak Kami</a>small-btn samakan dengan class tombol yang ada pada template anda
bila mau menyebar luaskan post ini, tolong jangan lupa link sumber nya... terima kasih...
wach akhirnya dibuat juga tutornya om..
BalasHapushabis nya banyak yang minta lewat email mas
Hapuskwkwkwkw termasuk saya om...
BalasHapussaya bingung dengan kode HTMLnya mas. saya coba nggak bisa, saya otak-atik juga nggak bisa. itu kode HTMLnya hampir mirip dengan kode widget, tapi widget formulir contactnya nggak dimunculin kan ??
BalasHapusea emang di hidden... itu contact form bawaan blogger, coba ganti javascrpit yang terbaru, kalau masih gagal coba copot dulu scrol to top ( kalau emang pake )
BalasHapussaya juga bingung dicoba2tpi ngk berhasil om...
BalasHapusdengan kode kode di atas saya sudah paraktek kan pada 4 template termasuk 1 template bawaan blogger, ga ada kendala...
BalasHapuskapan-kapan diterapin nih mas, oh iya widget follow-nya mana ya? hehehe pengen follow terus nih blog :)
BalasHapusrencananya bikin follow versi popup mas, biar simple
Hapussaya pengen nanya nih mas taufik, bisa tidak halaman kontak ini di pages? jadi bukan di tombol pesan komentar..
Hapusbravoseo.blogspot.com
saya belum bisa mas, maklum tahap belajar nih
Hapusijin bookmark dulu ah,siapa tahu bermanfaat.
BalasHapushttp://planktoon.blogspot.com/2013/07/cara-gampang-daftar-PPC-adrewa-terbaru-2013.html
trims... sudah mampir gan.
Hapussanngat bermanfaat
BalasHapussalam kenal,jangan lupa mampir : http://bmaster23.blogspot.com/
wew .. sangat bermanfaat sekali mas :) ,, salam kenal dari De5ain Blog ^_^
BalasHapussalam kenal balik mas... terima kasih sudah berkunjung di blog yang minim ini :-d
Hapusminim apa mas ??? :D blog ini bagus untuk referensi dan inspirasi :) :) :) ( pembelajaran blogspot )
Hapuswah mas ega bisa aja... saya juga kagun sama blog nya mas ega, saya pengen yang kaya begitu, tapi ga bisa bisa bikin nya mas @@,
Hapuskayak gimana mksd.nya mas ??? :D
Hapuspada model nya mas
Hapus