Blogger İletişim formu sağ alt köşeye eklemek

Bloggerin iletişim formu nasıl sağ alt köşeye sabit bir şekilde eklenir

merhaba arkadaslar daha once bildiginiz gibi bu konuda sizlere bloggerin resmi iletisim formunu nasil ozellestirebildigimizi anlattmistim tasarim bayablara ozledi

bugunku konumda ise daha bi profesyonellesicez :) bloggerin iletisim formunu nasil sabit  acilir kapanir bir sekilde blogun sag alt kosesine ekleyecegimizi  anlaticam

oncelikle yapmamiz gereken bloggerin resmi iletisim formunu blogumuza eklemektir bunu gasget ekle kismindan diger gadgetler bolumunden iletisim formunu secip ekliyoruz daha once iletisim formunu blogunuza eklediyseniz tamamdir :)

gelelim ikinci isleme 

simdi  blogumuzun kumanda panelinden sablon bolumune geciyoruz ve htmlyi duzenle butonuna tikliyoruz acilan pencerede  ctrl ve f tuslarini ayni anda basili tutarak arama kutusu acilicak o arama kutusunun icinde css kodunu eklememiz  skin  aratiyoruz yani altaki kodu

</b:skin>

kodu bulduktan sonra hemen bir satir uzerine gelicek sekilde altaki css kodunu ekliyoruz

/* CSS Contact Form */
.ContactForm, .ContactForm .title {
 display:none;
}
.floating-ai {
 position:fixed;
 width:250px;
 right:0;
 bottom:0;
 z-index:999;
}
.floating-ai-head a {
 padding:5px 10px;
 background:#2997e0;
 color:#fff;
 font-weight:400;
 display:inline-block;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 *display:block;
 zoom:1;
 transition:all 0.3s linear;
}
.floating-ai-head a:hover {
 background:#2588ca;
 color:#fff;
}
.floating-ai-body {
 height:285px;
 background:#fff;
 padding:10px;
 display:none;
 box-shadow:0 0 5px 0 rgba(0,0,0,0.2);
}
.floating-ai-head {
 text-align:left;
}
.floating-ai-body .ContactForm {
 margin:0;
 display:block!important;
}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 padding:2px;
 width:75%;
}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {
 background:#f5f5f5;
 transition:all 0.3s linear;
}
#ContactForm1_contact-form-email-message {
 background:#eee;
 margin-bottom:10px;
 border:none;
 color:#8f8f8f;
 font-family:Oswald,sans-serif;
 padding:5px;
 width:95%;
}
#ContactForm1_contact-form-submit {
 width:100px;
 color:#fff;
 font-family:Oswald,sans-serif;
 text-transform:uppercase;
 font-weight:400;
 font-size:14px;
 cursor:pointer;
 background:#57ad68;
 border:none;
 float:left;
 transition:background 0.3s linear;
}
#ContactForm1_contact-form-submit:hover {
 background:#468a53;
}

usteki kodu ekledikten sonra ikinci kodumuz olan script kodunu eklememiz icin yine ayni sekilde htmlyi duzenle bolumunden ctrl ve f tuslarini ayni anda basili tutarak acilan arama kutusunda bu defa

body kodunu yani altaki kodu aratiyoruz

</body> 

body kodunu bulduktan sonra buldugumuz kodun yine bir ust satir uzerine gelicek sekilde altaki kodu ekliyoruz

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ai"><div class="floating-ai-head"><a href="#no-move">Bana Bir Mesaj Gönder</a></div><div class="floating-ai-body"></div></div>');
$('.ContactForm').appendTo('.floating-ai-body');
var slide_up_ai = false;
$('.floating-ai-head a').click(function(){
 if (!slide_up_ai) {
 slide_up_ai = true;
 $('.floating-ai-body').slideDown();
 } else {
 slide_up_ai = false;
 $('.floating-ai-body').slideUp();
 }
});
//]]>
</script>

ve sablonu kaydet diyoruz islem tamam :)

Takıldığınız bir yer varsa sorabilirsiniz

gordugunuz gibi ben script kodunun icine bana bir mesaj gonder diye yazdim siz oraya isterseniz iletisim yazabilir yada iletisim formu veya farkli bisey artik size kalmis :)


yorumlarinizi eksik etmeyin iletisim formunu gule gule kullanin :)