Blogger Floating İletişim Formu Ekleme

Blog yazarları için en önemli konulardan biride okuyucularının kendileri ile iletişime geçmeleri kolaylaştırmaktır. Blogger alt yapısını kullanan blog yazarları için blogger hazır bir iletişim formunu sunmaktadır.

Statik bir sayfa oluşturarak bir eletişim sayfası hazırlamak istemiyorsanız ya da kenar çubuğunuz gibi blogunuzun belli alanlarını iletişim formu eklentisi ile doldurmak istemiyorsanız sayfanızın altına sabit ve sayfa ile hareket eden bir iletişim formu eklemek mükemmel bir çözüm olabilir.

Blogumuza sabit bir iletişim formu eklemek için kodlarımızı yerleştirmeden önce blogumuza iletişim formu gadgetini eklemiş olmamız gerekmektedir.

Blogumuzda bir iletişim formu gadgeti ekli ise Blogger Kontrol Paneli > Şablon > HTML'yi Düzenle yolunu takip ederek açılan kod sayfasında CTRL+F kombinasyonu yardımı ile ]]></b:skin> kodunu aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıdaki Css kodlarını yerleştiriyoruz.

.ContactForm, .ContactForm .title {
 display: none;
}
.floating-ct {
 position: fixed;
 width: 250px;
 right: 0;
 bottom: 0;
 z-index: 999;
}
.floating-ct-head a {
 padding: 5px 10px;
 background: #09f;
 color: white;
 font-weight: bold;
 display: inline-block;
 *display: block;
 zoom: 1;
}
.floating-ct-body {
 height: 285px;
 background: white;
 border: 1px solid #09f;
 padding: 10px;
 display: none;
}
.floating-ct-head {
 text-align: left;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Css kodlarımızı yerleştirdikten sonra, yeniden CTRL+F kombinasyonu ile </body> kodunu aratıp buluyoruz. Bulduğumuz kodun hemen üzerine aşağıdaki kodları yerleştiriyoruz.

<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">İletişim</a></div><div class="floating-ct-body"></div></div>');
$('.ContactForm').appendTo('.floating-ct-body');
var slide_up_ct = false;
$('.floating-ct-head a').click(function(){
 if (!slide_up_ct) {
 slide_up_ct = true;
 $('.floating-ct-body').slideDown();
 } else {
 slide_up_ct = false;
 $('.floating-ct-body').slideUp();
 }
});
//]]>
</script>

Eklediğimiz kodlar arasında bulunan Kırmızı ile belirtilmiş iletişim yazısını istediğiniz bir yazı ile değiştirebilirsiniz.

Blogger floating iletişim formu eklentisinin demosunu aşağıdaki videodan izleyebilirsiniz.