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

9 Yorum Yazılmış
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 :)

9 yorum:

  1. Bende yorum yapayım mı :D
    Ama sen biliyosun ne diyeceğimi :))
    Öğrenene kadar seni sinir etmekle yetiyorum :D
    Şaka bi yana da çok güzel anlatıyosun ben korktuğumdan yapmıyorum :)

    YanıtlaSil
    Yanıtlar
    1. yahu neyden korkuyorsun blog seni isirmaz ha gayret yapmayi dene yapamasan yardim edicem tamam mi

      Sil
  2. Bu benim aklıma nasıl gelmedi bilmiyorum ama fikir gayet güzel. Emeğin için teşekkürler :)

    YanıtlaSil
  3. :D Teşekkürler kardeşim daha önceden bunu kullandım ama pek hoşuma gitmedi :D

    YanıtlaSil
  4. ben bunları yapmakta çok üşengeçim :)

    YanıtlaSil
  5. Ben mi göremiyorum,blogunda nerede bu? :/

    YanıtlaSil
    Yanıtlar
    1. yorumlariniz icin tesekkurler arkadaslar

      @mien blogumdan kaldirdim cunku benim farkli bi iletisim bolumum var iki tane olmasi mantiksizdi ama 1 gunlugune bloguma yerlestirmistim onrek olarak gormeniz icin :) sen ekle bloguna gayet guzeldir

      Sil
  6. bu iletişim formunu sağ alt köşe değilde sol orta köşeye nasıl koyarız hangi kodların değişmesi gerekir acaba yardımcı olurmusunuz ?

    YanıtlaSil
Yorum yaparken dikkat edilmesi gerekenler:

* Yaptığınız yorumun tamamı büyük harf olmamasına özen gösteriniz
* Yorumlarınız da argo içeren kelimeler kullanmayınız
* Reklam amaçlı yorumlarda bulunmayınız
* Konu dışında iletmek istediğiniz bir şey varsa iletişim formunu kullanın
* Yorumlarınızdan dolayı sizlere teşekkür ediyorum