Blogger Resmi İletişim Formunu Pop-up Açılır Şekilde Yapmak

Blogger sitelerinde yer alan en önemli şey iletişimdir.İletişim sitenizi takip eden veya yazılarınızı okuyan bir kullanıcının size anında ulaşmasına yardımcı olacak önemli bir unsurdur.

Blogger için farklı stillerde iletişim sayfası oluşturmak kısıtlı olsa da,biraz araştırma yaparak kendi istediğiniz bir iletişim sayfası yapmak mümkün.Her neyse Blogger sitenizin sağ alt veya solunda Contact Form sayesinde açılır kapanır şekilde dizayn edilmiş bir iletişim eklentisine sahip olmanız için öncelikle aşağıda ki işlemleri yapmanız gerekmekdedir.

1. Kumanda panelinden Şablon - HTML Düzenle tıklıyoruz.
2. CTRL+F tuşları ile kodu aradın.

<head>

3. Bulmuş olduğunuz kodun hemen altına altta ki kodları ekleyin.

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

4. Daha sonra tekrar CTRL+F tuşları ile şu kodu aradın.

]]></b:skin>

5. 4.adımda ki kodu bulduktan sonra hemen üst kısmına aşağıda ki kodları ekleyin.

#ContactForm1 h2{background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUWcGRASmV6V_7Drg33Rw7ft3mV7D2kcmVOAzbz9H8Y4JR33fZCuyOiFwfxd9GF7BwOYhiqFDWFFyGYxM6fCETEiRyaot444MuFnoCatCCS5Fehc8BlTZ46jIEupljVO4CKNZ58AY-QFo/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;
}

6. Son olarak eklentinin çalışabilmesi için Javascript kodunu ekliyecez.Bunun için altta ki kodu aratarak bulun.

</head>

7. Bulduğunuz kodun hemen üst kısmına aşağıda ki kodu ekleyin.

<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>

Blogumuza Abone Olun
Yeni Yazılar e-posta Adresinize Gelsin

Milan Tomic

Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.