Bloger Sabit Açılır İletişim Formu
Bloguna iletişim formu eklemek isteyen Blogger kullanıcıları için farklı ve güzel bir alternatif sunmak istiyorum. Blogger’ın kendi gadgetları arasında bulunan iletişim formu üzerinde biraz değişiklikler yaparak floating dediğimiz yüzen yani sayfayı yukarı aşağı kaydırsanız dahi belirlediğimiz pozisyonda sabit kalan bir iletişim butonu koyacağız ve bu butonun üzerine gelindiğinde şık bir iletişim formu açılacak.
Öncelikle şunu belirtmek isterim ki iletişim formu kesinlikle çalışıyor ve iletişim formu aracılığıyla gönderilen mesajlar blogunuza bağlı Gmail hesabınızdaki sosyal sekmesi altına geliyor.
Görmüş olduğunuz Blogger iletişim formunu blogunuza eklemek için öncelikle Yerleşim > Gadget Ekle > İletişim Formu diyerek Blogger’ın kendi iletişim formunu eklemelisiniz. Ardından aşağıdaki kodları HTML/JavaScript Gadget olarak ekleyeceksiniz ve iletişim formu eklediğiniz yerde değil de belirlediğimiz pozisyonda yüzen ve açılır şekilde, görünümünde de bazı değişikliklerle göreceksiniz.
Kodlarda hiçbir değişiklik yapmanıza gerek yok. Tabi gadget olarak eklediğiniz iletişim formunu da kaldırmamanız gerekiyor. Herkese iyi bloglar…
Öncelikle şunu belirtmek isterim ki iletişim formu kesinlikle çalışıyor ve iletişim formu aracılığıyla gönderilen mesajlar blogunuza bağlı Gmail hesabınızdaki sosyal sekmesi altına geliyor.
Görmüş olduğunuz Blogger iletişim formunu blogunuza eklemek için öncelikle Yerleşim > Gadget Ekle > İletişim Formu diyerek Blogger’ın kendi iletişim formunu eklemelisiniz. Ardından aşağıdaki kodları HTML/JavaScript Gadget olarak ekleyeceksiniz ve iletişim formu eklediğiniz yerde değil de belirlediğimiz pozisyonda yüzen ve açılır şekilde, görünümünde de bazı değişikliklerle göreceksiniz.
<style>
.form-parent {width:323px;height:auto;background: transparent url('http://i.hizliresim.com/5VQ4AL.png') no-repeat right 10px;position:fixed;top:240px;left: -275px;z-index:9999999;transition:all ease .6s;-moz-transition:all ease .6s;-webkit-transition:all ease .6s;-o-transition:all ease .6s;}
.form-parent:hover {left:0;}
.cc-float-form {background:-moz-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-webkit-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%);background:-o-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:-ms-linear-gradient(top, #2b2a2b 5%, #0a0a0a 100%); background:linear-gradient(to bottom, #2b2a2b 5%, #0a0a0a 100%);color:#fafafa;padding:10px; width:250px;border:2px solid #000; border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;}
#ContactForm1 {display:none;}
.contact-form-area {background: #222;width: 245px;padding: 10px 0px;border: 1px solid #111;box-shadow: 2px 2px 2px #111 inset; -webkit-box-shadow: 2px 2px 2px #111 inset;font-family:Verdana, Geneva, sans-serif;color:#fafafa;font-size: 12px;}
#cc {float:right;font-size:9px;margin-top:-10px;color:#777;}#cc a { color: #777;text-decoration:none;}
</style>
<div class='form-parent'>
<form name="contact-form" class="cc-float-form">
<p></p>
İsim:<br />
<input class="contact-form-area" id="ContactForm1_contact-form-name" name="name" size="30" value="" type="text" />
<p></p>
Email:
<span style="color:red;">*</span><br />
<input class="contact-form-area" id="ContactForm1_contact-form-email" name="email" size="30" value="" type="text" />
<p></p>
Mesaj: <span style="color:red;">*</span><br />
<textarea class="contact-form-area" id="ContactForm1_contact-form-email-message" name="email-message" cols="25" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" value="Gönder" type="button" />
<p></p>
<div style="text-align: center; max-width: 222px; width: 100%">
<p class="contact-form-error-message" id="ContactForm1_contact-form-error-message"></p>
<p class="contact-form-success-message" id="ContactForm1_contact-form-success-message"></p>
</div>
</form>
</div>
Kodlarda hiçbir değişiklik yapmanıza gerek yok. Tabi gadget olarak eklediğiniz iletişim formunu da kaldırmamanız gerekiyor. Herkese iyi bloglar…
guzel hoçam elinize salık
YanıtlaSilIyivarsin hocam omrune bereket versin rabbim
YanıtlaSilSerdar bey çok teşekkürler. Bunun bir de sosyal medya için olanları oluyor. Onlar içinde güzel bir içerik bekliyoruz. :)
YanıtlaSilHocam güzel.Ama yeni başlayanlar için gelişim bloglarınız bulunuyormu?Saygılarımla
YanıtlaSilİletişim sayfasını olumsuz etkileyecektir :D
YanıtlaSilwww.zompir.com
Teşekkürler, güzel bir eklenti.
YanıtlaSilÇok güzel Serdar Bey çok teşekkür ederim. Ayrıca bu tarz blogger eklenti tarzı yazıları bekliyorum :)
YanıtlaSilÇok güzel yararlı bir paylaşım olmuş.Bu açılır pencere her tarayıcıda açılır umarım.
YanıtlaSilKod çalışıyor ama gönderdiğim mesaj gitmiyor malesef.Sebebi ne,hocam?
YanıtlaSilMerhaba,
YanıtlaSilKod çalışıyor. Eklediğiniz gadgeti kaldırmayın. Zaten sola eklendiğinde diğeri kalkıyor.
Teşekkür ederim.
Kodu kendi sitem için denedim sorunsuz şekilde çalışıyor. Teşekkürler!
YanıtlaSilFloating iletişim formunu siteme eklemek istiyorum ama bazı sıkıntılar yaşıyorum yardım eder misiniz?
YanıtlaSilGünümüzde bu tarz formlar çok kullanılmıyor ama site tasarımına göre oldukça kaliteli oluyor bazen. teşekkürler :)
YanıtlaSilSorun yaşayan olursa yardımcı olabilirim.
YanıtlaSilPaylaşım için sağolun hocam, kesinlikle güzel bir anlatım.
YanıtlaSilbenim anlamadığım konu bu kodları nereye yapıştırmamız gerekiyor ?
YanıtlaSilÇok hoş durdu elinize sağlık
YanıtlaSilCok başarılı teşekkürler
YanıtlaSilhocam blogger konusunda ciddi anlamda Türkiye'de teksin :)
YanıtlaSilElinize sağlık hocam!
YanıtlaSilsanalkariyer.blogspot.com
Teşekkürler işime yaradı
YanıtlaSilhocam bende çalışmadı mesajı göndermiyor bi çözümü varmı
YanıtlaSiluzun zamandır bilgi birikiminiz ve paylaşımlarınızdan faydalanmaya çalışıyorum. Bu iletişim formunu ekledim bloğuma ve gayet güzel durdu. Fakat ad soyad ya da mail adresi girip mesaj yazmaya çalıştığım zaman hiç bir sonuç alamadım. Yazı yazma imkanım yok. Yani çalışmıyor. Sebebi ne olabilir acaba?
YanıtlaSilBloggerin kendi iletişim formu çalışmıyor. Sorun bundan kaynaklı sanırım. Sizin paylaştığınız iletişim formu çok hoşuma gitmişti. Sanıyorum onda bir sorun yok. Yerleşimden iletişim formunu kaldırıp terar ekledim. Ekleme esnasında hiç bir bilgi girişi istemeden sadece kaydet seçeneği çıkıyor. Kaydettikten sonra ayarları kaydedip sayfayı kontrol ettiğimde iletişim kutusu var, fakat bilgi girişi yapılamıyor. Bana ne önerebilirsin?
SilElinize sağlık hocam
YanıtlaSilsagolun hocam yaptık sonunda çalışıyor sorunsuz
YanıtlaSilSaol Hacam Çok Güzel Oldu.Sorunsuz Çalışıyor
YanıtlaSilSelam kendi mailime nasıl yönlendireceğim
YanıtlaSilbu formdan gönderilen mesajı nereden göreceğiz ben ekledim oldu ama biri bi şey yazınca nereden okuyacagız
YanıtlaSilBlog hesabını açtığın e-posta adresine gelecektir mesajlar.
Silarkadaşlar ben ekledim ana ekranda çıkıyor bunda sorun yok ama göndere bastığımda gönder tuşu aktif olamıyor gitmiyor ne yaptıysam olmadı ne yapabilirim
YanıtlaSilnormal sayfa iletişimim çalışıyor email ama bunu bir türlü yapamadım kodu kopyalayıp yapıştırdım
YanıtlaSil