Blogger İletişim Formu kodları Blogger Contact Form Code

Blogger İletişim Formu kodları Blogger Contact Form Code

Merhaba Arkadaşlar

Bugün Sizlere Bloggerin Orjinal İletişim Formu olan küçük iletişim kutusunu Görsel Anlamda ve Daha iyi bir görünüm sağlayıp

Nasıl Kendi belirlediğimiz bir üst İletişim Sayfasına yerleştiririz bu konumda onu anlatıcam.

Öncelikle eğerki blogumuzda iletişim Gadgeti ekli değilse blogumuzun Yerleşim kısmına geliyoruz ve Gadget Ekle yazan herhangi bir yere tıklıyoruz neresi olduğu önemli değil çünkü yaptığımız işlemler sonunda Eklediğimiz İletişim Formu Gadgeti eklediğimiz yerde değil Bizim Belirlediğimiz Bir üst İletişim sayfasında Görünecektir. Bunun için Bir Gif resim yaptım oradanda bakabilirsiniz

Ayrıca Kodları blogunuza uygulamadan önce Mutlaka Blogger Şablonunuzu Yedekle / Geri Yükle kısmından Bir yedeğini alın kodların bir hata vermesi sonucunda Tekrardan Eski Şablonunuzu Geri

Yükleyebilmek için.

Şimdi Başlayalım Arkadaşlar Blogger kontrol Paneline girip Şablon kısmına tıklıyoruz Şablon kısmına girdikten sonra HTML'yi Düzenle Seçeneğine Tıklıyoruz html'yi düzenle seçeneğine tıkladıktan sonra karşımıza gelen Kod penceresinden Üst kısımda Şablonu Kaydet Seçeneğinin Hemen yan tarafında Widget'a atla Seçeneği var ona tıklıyoruz ona tıkladığımız zaman önümüze küçük bir liste açılacak ve O listeden ContactForm1 isimli olanı seçiyoruz ve Karşımıza Gelen Kodlardan ▶ ContactForm1 isimli kodumuzun başındaki şu Gördüğümüz küçük Ok işaretine tıklayıp kodlarımızı genişletiyoruz Karşımıza Gelen şu alt kısımdaki kodların kırmızıyla işaretlemiş olduğum yerlerini siliyoruz ve orada sadece Mavi olarak işaretlemiş olduğum kodlar kalıyor.

 
     
   
    


 
  







         
        
 
         
        


         * 
        
 
         
        


         * 
        
 
         <br />        <p/> <br />        <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> <br />        <p/> <br />        <div style='text-align: center; max-width: 222px; width: 100%'>
 <br />          <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/>
<br />          <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/>
<br />        </div>
<br />      </form>
<br />    </div>
<br />  </div>
<br />  <b:include name='quickedit'/> </span><span style="color: #666666;"><br /></span><span style="color: #3d85c6;"></b:includable> <br />  </b:widget></span><span style="color: #666666;"><br /></span></code></span></pre>
<br /><span style="color: #666666;"><br /></span> <span style="color: #666666;"><br /><span style="color: #666666;">Bu Kırmızı işaretlenmiş kodlarımızı sildikten sonra Şablonumuzu Kayıt edip çıkıyoruz ve </span><span style="color: #cc0000;">Sayfalar</span><span style="color: #666666;"> kısmına Geliyoruz Üst kısımdaki </span><span style="color: #cc0000;">Yeni Sayfa</span><span style="color: #666666;"> Seçeneğine Tıklayıp </span><span style="color: #cc0000;">İletisim</span><span style="color: #666666;"> İsimli Bir Sayfa oluşturuyoruz Oluşturduğumuz iletişim isimli sayfamıza alt kısımdaki vermiş olduğum İletişim Formu Kodlarından Herhangi birini ekleyip Kullanabilirsiniz</span><br /><span style="color: #666666;"><br /></span><span style="color: #666666;"><b><span style="font-size: large;">        Mavi Şeritli İletişim Formu 1</span></b><br /></span></span><br /><div class="separator" style="clear: both; text-align: center;">
<span style="color: #666666;"><span style="color: #666666;"><span style="color: #666666;"><a href="https://2.bp.blogspot.com/-ZHYg6bzwiQI/V9SQqUSLfVI/AAAAAAAABRo/MT3mJzFjuy8h_BmgU4XyhxuvHcYlHeuLgCLcB/s1600/Blogdan-indir.blogspot.com.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="iletişim formu" border="0" height="222" src="https://2.bp.blogspot.com/-ZHYg6bzwiQI/V9SQqUSLfVI/AAAAAAAABRo/MT3mJzFjuy8h_BmgU4XyhxuvHcYlHeuLgCLcB/s320/Blogdan-indir.blogspot.com.png" title="Mavi şeritli iletişim formu" width="320" /></a></span></span></span></div>
<span style="color: #666666;"><span style="color: #666666;"></span></span></div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><div style="text-align: left;">
<b><span style="color: #444444; font-size: large;">Mavi Şeritli İletişim Formu Kodu 1</span></b></div>
<pre style="background-color: #eeeeee; border: 1px dashed rgb(153, 153, 153); font-family: "andale mono", "lucida console", monaco, fixed, monospace; font-size: 12px; line-height: 14px; overflow: auto; padding: 5px; width: 100%;"><code><style type="text/css"><br />#ContactForm1{display:none;}<br />#contact_wrap{<span style="color: red;">width:700</span>px;<span style="color: red;">height:490</span>px;border-radius:1em;border-top:1px solid #dbdbdb;border-right:1px solid #b2b2b2;border-left:1px solid #dbdbdb;border-bottom:1px solid #9d9d9d;background-color:#ccc;filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#f2f2f2',endColorstr='#cccccc');background-image:linear-gradient(top,#f2f2f20%,#e6e6e650%,#cccccc100%);box-shadow:1px 1px 5px #ccc;margin:auto;padding:25px;}<br />#contact_wrap h3{color:#e8f3f9;font-family:"Microsoft Sans Serif",Georgia,arial;font-size:20px;font-weight:400;text-align:center;text-shadow:2px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 25px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;position:relative;margin:0 -36px 20px;padding:12px;}<br />#contact_wrap h3:before{content:' ';position:absolute;bottom:-10px;left:0;width:0;height:0;border-color:#333 transparent transparent;border-style:solid;border-width:10px 0 0 10px;}<br />#contact_wrap h3:after{content:' ';position:absolute;bottom:-10px;right:0;width:0;height:0;border-color:transparent transparent transparent #333;border-style:solid;border-width:0 0 10px 10px;}<br />#ContactForm1_contact-form-name{<span style="color: red;">width:270</span>px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2wsOqGbZvM7NqZQy-tqGKeBtOhH6agw1ZrsqHUhhWYPP51zGktQ5W1mOZcQpoUQkZOXZg9oIxnPh0XQJMLWvismVl1_QLyWUiRgIXulukAIgDL90JJqWcoxJYb_yjodRoFHXG2ZyBCXs/s1600/user.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}<br />#ContactForm1_contact-form-email{<span style="color: red;">width:370</span>px;height:auto;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTJ0_C4WdHZQRp_AvvsuX105WNMX88n6AocrE4C3N3A6J4_b_B9p1CZX2Njbeu6S-fzl9-k5dOu6pLtPKA-lBysQwkO67XXrkxYxzchHGVULa176lO4W6-JmfFtTJm-Hob6OBukRvrAAY/s1600/msg2.png)no-repeat 10px center;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}<br />#ContactForm1_contact-form-email-message{<span style="color: red;">width:650</span>px;<span style="color: red;">height:250</span>px;font-family:Arial, sans-serif;background:#f6f6f6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRtP3b62ttucZgYwKLaly1Oyr3NmVhrnM4JBMwkqgytuSaYTVkAZZ0iHtabXT_wziwcnV37O_vqztrNm6fznvXRZ4iWCyvZPq81Eh5mkKkEIakx3hmipWVOrqJ-4-lpFHI_gFxgFYgMBA/s1600/pen.png)no-repeat 10px 10px;color:#777;border:1px solid #ccc;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;box-shadow:rgba(0,0,0,0.247059) 0 1px 3px inset, #f5f5f5 0 1px 0;margin:5px auto;padding:10px 10px 10px 40px;}<br />#ContactForm1_contact-form-submit{width:95px;height:30px;float:right;color:#FFF;cursor:pointer;border-radius:4px;text-shadow:1px 0 0 #1f4962;-webkit-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;-moz-box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;box-shadow:inset 0 0 35px rgba(0,0,0,0.3),0px 1px 5px #666;background-color:#3689b9;border:1px solid #194f6d;margin:10px 0;padding:0;}<br />#ContactForm1_contact-form-submit:hover{background:#4c9bc9;}<br />#ContactForm1_contact-form-error-message,#ContactForm1_contact-form-success-message{width:320px;margin-top:35px;}<br /></style><br /><br /><br /><br /><div id="contact_wrap">
<br /><h3>
<br />İletişim</h3>
<br /><form name="contact-form">
<br /><input id="ContactForm1_contact-form-name" name="name" placeholder="İsim" size="30" type="text" value="" /><br /><input id="ContactForm1_contact-form-email" name="email" placeholder="E-Posta" size="30" type="text" value="" /><br /><textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Mesaj" rows="5">

Yukarıdaki kodların içinde gördüğünüz kırmızı yerler genişlik ve yükseklik ayarlarıdır o kısımları kendinize göre ayarlayabilirsiniz.




Normal Geliştirilmiş İletişim Formu 2

Normal Geliştirilmiş İletişim Formu Kodu 2

  









İsim



  E-Posta *



 Mesaj *



rows="15</span>">  

Yukarıda gördüğünüz kırmızı yer iletişim kutusunun çerçeve yüksekliğinin ayarıdır width:95 ise genişlik ayarıdır rows 15 kısmı ise mesaj kısmının ayarıdır Turuncu kısımı Gönder butonun Turuncu rengidir mavi kısım ise Gönder butonunun Mavi kısmıdır...
Şimdiden kolay gelsin arkadaşlar...

 Düzenleyen : Serhat Baran

Kodları indirmek için indir butonuna tıklayın kodlar metin belgesinde kayıtlıdır.