Home » » Blogger İletişim Formu Gadgeti (Widgeti,Eklentisi) ve Ayarları

Blogger İletişim Formu Gadgeti (Widgeti,Eklentisi) ve Ayarları

Blogger nihayet iletişim formu gadgetini devreye soktu.
yeni  gadgetimizi biraz inceledim  ve iyice araştırdım,nasıl düzenleyebiliriz,nasıl kullanabiliriz iyi bir araştırma  yaptım ve yabancı sitelerden çok faydalanabileceğimiz seçenekler keşfettim.
bunları tek tek  sıralayacağım.

1. Seçenek :Kenar çubuğunda veya anasayfada herhangi  bir yere yerleştirebiliriz.

fakat iletişim  formunun ana sayfada  olması biraz can sıkıcı  olabilir.ve zaten pek tercih edilmeyen bir yerleşim ama isteyen ekleyebilir tabi.

ilk olarak Yerleşim-Gadget ekle diyoruz ve aşağıdaki resimdeki gibi adımları izliyoruz.
gadgeti nereye yerleştireceğiniz  size  kalmış.

2. Seçenek:Açılır bir butonla yerleştirebiliriz.butona tıkladığımızda iletişim formu  açılır,tekrar butona tıkladığımızda iletişim  formu kapanır.


demo: http://oyunkolikim.blogspot.com/
bunu yapmak için önce yerleşim-gadget  ekle diyip iletişim  formumuzu herhangi  bir yere yerleştiriyoruz.daha sonra şablonumuzda bir kaç değişikliklik yapmalıyız.bu yüzden şablon-HTML'yi düzenle diyip aşağıdaki adımları izliyoruz.
Adım  1: ]]></b:skin> kodunu buluyoruz ve bu  kodun  üstüne aşağıdaki kodları ekliyoruz:

/*ilitisim formu kodu muyuta.com*/
.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: right;
}
.floating-ct-body .ContactForm {
 margin: 0;
 display: block!important;
}

Yukarıdaki kodlarda renk,boyut,font kodlarını istediğiniz gibi değiştirebilirsiniz.
Adım 2: </body>  kodunu bulup bu kodun üstüne aşağıdaki kodları ekliyoruz.
<script type='text/javascript'>
//<![CDATA[
$('body').append('<div class="floating-ct"><div class="floating-ct-head"><a href="#no-move">Contact</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>
şablonu kaydet diyip çıkıyoruz.olay tamamdır.görüntü resimdeki gibi olacaktır.

3.Seçenek: İletişim Formu Sayfası Oluşturabiliriz.

demo: http://medikolik.blogspot.com/p/hakkmzda.html
bunun içinde diğer tüm seçeneklerdeki gibi önce yerleşim-gadget ekle-iletişim formu  yolunu izliyoruz.fakat bu defa gadgetimizi blog kayıtları altına yerleştiriyoruz.aşağıdaki resimdeki gibi.daha sonra iletişim formunu gizleyip sadece  istediğimiz sayfada görünmesi için bir kaç kod kullanacağız.





Adım1:önce gadgetimizi ekliyoruz




Adım 2:gadgetimizi blog kayıtları altına yerleştiriyoruz.









Adım 3: ]]></b:skin> kodunu bulup bu kodun üstüne aşağıdaki kodları ekliyoruz.

.widget.ContactForm {
 display: none;
 }
şablonu kaydet diyip çıkıyoruz.
Adım 4: blogumuzun  sayfalar sekmesine gelip yeni boş  sayfa  oluşturuyoruz  ve aşağıdaki kodları  kopyalayıp resimdeki gibi sayfamıza yapıştırıyoruz.adımları  tek  tek takip edin.
<style type="text/css">
 .widget.ContactForm {
 display: block;
 }
 .post-footer {
 display: none;
 }
 #blog-pager {
 display: none;
 }
 .blog-feeds {
 display: none;
 }
 .widget.ContactForm .title {
 display: none;
 }
 .widget.ContactForm * {
 max-width: 100%;
 }
 </style>

İltişim formu Sayfamız  Tamamlanmıştır.

4.Seçenek: bu seçenekte 3.seçenekteki gibi iletişim formu sayfası oluşturacağız.aradaki fark ise bazı  kodlar.




Adım1:önce gadgetimizi ekliyoruz












Adım 2:gadgetimizi blog kayıtları altına yerleştiriyoruz.











Adım 3: ]]></b:skin> kodunu bulup bu kodun üstüne aşağıdaki kodları ekliyoruz.
.ContactForm {
 display: none;
}
.blogger-items-contact .ContactForm {
 display: block;
}
.widget.ContactForm .title {
 display: none;
}
.widget.ContactForm * {
 max-width: 100%;
}
Adım 4: </body>  kodunu bulup bu kodun üstüne aşağıdaki kodları ekliyoruz.
<script type='text/javascript'>
//<![CDATA[
$('.ContactForm').appendTo('.blogger-items-contact');
//]]>
</script>
Adım 5:blogumuzun  sayfalar sekmesine gelip yeni boşsayfa oluşturup aşağıdaki kodu yeni sayfamıza kopyalayacağız,ardından  resimdeki adımları izleyin.
<div class="blogger-items-contact"></div>
demo: http://medikolik.blogspot.com/p/hakkmzda.html
NOT1:
İletişim Formu Gadgetinin kodları aşağıdaki gibidir ,bukodları düzenleyip formun görünümünü değiştirebilirsiniz.
<form name="contact-form">
<p></p>Name
<br>
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="">
<p></p>
Email
<span style="font-weight: bolder;">*</span>
<br>
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="">
<p></p>Message
<span style="font-weight: bolder;">*</span>
<br>
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<p></p>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Send">
<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>
NOT2:
Eğer çalışmayan birşey olursa aşağıdaki adımları izleyin.
blogunuzda javascript sorunları yaşayabilirsiniz bu sorunları gidermek için ;
şablon-HTML'yi düzenle deyip </head>  kodunu buluyoruz ve bu kodun üzerine aşağıdaki kodu ekleyip şablonu kaydet diyoruz.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Kaynak:muyuta.com (Bloggeritems.com sayfasından  yararlanılarak hazırlanmıştır.)

En güvenilir ve en çok kazandıran PTC siteleri 2015

8 yorum:

  1. Merhaba Ben bu iletişim formunu "Tumbrl" a eklemek istiyorum bunu nasıl yapabılırım arkadaşlar...

    YanıtlaSil
    Yanıtlar
    1. tumblra eklenemez diye bliom

      Sil
    2. Jotform diye bir sistem var google'de aratırsan onu uygulayabilirsin tumblr'ye. Bu sadece blogger'a özeldir.

      Sil
    3. yakup usta bloguna baktımda jony teması kullanıon.acabasende jony ribet temasının png jpg resimleri varmı?

      Sil
    4. Malesef kardeşim sadece bu tema var bende. Ama aynı sorunlarla bende karşılaştığım için mümkün mertebe blog temalarını direk yedekliyorum sonradan bir acizliğe uğramamak için.

      Sil
  2. peki hocam doldurulan iletişim formları nereye gidiyor bulamıyorum

    YanıtlaSil
  3. gmail hesabına e-posta olarak geliyor

    YanıtlaSil