Blogger Resmi İletişim Formunu Pop Up Açılır Hale Getirin

İletişim formu blog sahibine ulaşılması adına bir blogda olmazsa olmazlar arasındadır.Çünkü yazı ile ilgili olsun, siteye erişim problemi olsun ya da blogunuzu reklam vermek isteyenler olsun okuyucularınız bir şekilde size ulaşmak isterler ve bu isteklerine olabildiğince hızlı cevap almayı beklerler.İletişim aracı bu kadar önemli olduğu için bizler bazen bir iletişim sayfası oluşturup mail hesabı vererek ya da harici iletişim formu oluşturma araçlarını kullanarak bu eksikliği tamamlıyorduk.Ancak blogger son günlerde yeni bir gadget duyurarak iletişim formu ekleyebilmemize imkan tanıdı.Bu işlemi kolaylıkla html/gadget ekle >>> iletişim formu yolunu izleyerek yapabilirsiniz.Bu yazımda ise bu iletişim formunu daha şık hale getirerek pop up açılır şekilde nasıl blogumuza ekleyebiliriz onu paylaşacağım:

>>Contactme ile Bloggerda İletişim Formu Oluşturun

DEMO

    İlk olarak blogger ın bu yeni gadget ını blogunuza ekleyin. Daha sonra şablon>>>Edit Html yolunu izleyerek aşağıdaki kodu bulun :

<head>

    Hemen altına aşağıdaki kodu ekleyin :

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'/>

    Daha sonra aşağıdaki kodu arayın:

]]></b:skin>

    Hemen üzerine aşağıdaki kodu ekleyin :

#ContactForm1 h2{background: url("http://4.bp.blogspot.com/-Twdrq4mEsTk/UgE3eMH99zI/AAAAAAAAAmk/Gisl5cio3KA/s1600/contact-icon-netoopsblog.jpg") no-repeat scroll 94% center #363636;
    border: 1px solid #333333;
    border-radius: 3px 3px 3px 3px;
    color: #FFFFFF;
    font: 14px arial;
    left: 0;
    padding: 6px 34px 6px 7px;
    position: absolute;
    text-align: left;
    top: -30px;}
/* Powered by blogger Text*/
.contact-form-widget:after {
    border-top: 1px solid #636363;
    box-shadow: 0 -1px 0 #000000;
    content: "Powered by Blogger";
    padding-top: 4px;
}
/* Powered by blogger Text*/
.widget.ContactForm {
    background: none repeat scroll 0 0 #444444;
    border: 1px solid #333333;
    bottom: -327px;
    color: #FFFFFF;
    left: 8px;
    margin-bottom: 0;
    padding: 16px;
    position: fixed;
    text-align: center;
    z-index: 999;
}

    Son bir adım olarak javascript kodunu ekleyeceğiz.</head> kodunun hemen üzerine aşağıdaki kodu ekleyip şablonunuzu kaydedin.

<script type="text/javascript">
$(function(){
$(&quot;.ContactForm&quot;).hover(function(){
              $(this).stop().animate({&quot;bottom&quot;:&quot;-15&quot;},&quot;slow&quot;);}
              ,function(){$(this).stop().animate({&quot;bottom&quot;:&quot;-327&quot;},&quot;slow&quot;);
              });
             
      });
</script>

 

Evet tüm bu adımları doğru bir şekilde yaptıysanız blogunuzun sol alt köşesinde fare ile üzerine gelindiğinde açılan iletişim formu ile karşılaşacaksınız.

Ozan Başer

Merhaba ben Ozan Başer. EhliBlog'da ve elbette Ehliforum (Blogculara Özel Forum)'da yazıyorum. Blogger, seo, adsense, sosyal medya ve google ürünleri hakkında faydalı ve kaliteli içeriği okuyucularıma sunmaya çalışıyorum. C#, PHP, Javascript gibi uğraşılarım var. Web ve online teknolojiler ile ilgili birçok konuda fikirlerimi sizlerle paylaşıyorum.

4 yorum:

  1. Hem alan kaplamıyor hemde kullanışlı. Çok güzel bir şey bu :)

    YanıtlaSil
  2. Bu site güzel buraya da bekleriz: subway surf oyna

    YanıtlaSil
  3. Güzel bir eklentiymiş gerçekten hoşuma gitti.Yakın zamanda kullanabilirim de.

    YanıtlaSil
  4. sağ tarafa nasıl alıcaz

    YanıtlaSil

Yorumunuza gelecek cevabı takip etmek "beni bilgilendir" kutucuğuna işaretleyebilirsiniz.