Blogger İletişim Formunu Sabit Sayfaya Eklemek

Kendinize ait bir iletişim sayfanızın olmasını istiyorsanız aşağıdaki adımları izleyerek kolayca yapabilirsiniz.
1. Adım
İlk olarak blogger'ın iletişim formunu blogunuzun sidebar, footer vs kısmına eklemelisiniz. Bunu Yerleşim > Gadget Ekle > Diğer Gadgetlar > İletişim Formu yolunu takip ederek yapabilirsiniz.

2. Adım
İletişim formunun blogumuzun sidebar, footer vs gibi kısımlarında görünmemesi için Tema > HTML'yi Düzenle bölümüne girip ister aşağıdaki kodu CTRL + F komutuyla bulabilirsiniz. İsterseniz de Widget'a Atla > ContactForm1 yolunu takip ederek ulaşabilirsiniz.

*

*


</span><br /><span style="color: red;"> <p/> </span><br /><span style="color: red;"> <input class='contact-form-button contact-form-button-submit' expr:id='data:widget.instanceId + "_contact-form-submit"' expr:value='data:contactFormSendMsg' type='button'/> </span><br /><span style="color: red;"> <p/> </span><br /><span style="color: red;"> <div style='text-align: center; max-width: 222px; width: 100%'> </span><br /><span style="color: red;"> <p class='contact-form-error-message' expr:id='data:widget.instanceId + "_contact-form-error-message"'/> </span><br /><span style="color: red;"> <p class='contact-form-success-message' expr:id='data:widget.instanceId + "_contact-form-success-message"'/> </span><br /><span style="color: red;"> </div> </span><br /><span style="color: red;"> </form> </span><br /><span style="color: red;"> </div> </span><br /><span style="color: red;"> </div> </span><br /><span style="color: red;"> <b:include name='quickedit'/> </span><br /></b:includable><br /> </b:widget></div><b>3. Adım</b><br />Yukarıda kırmızı renkle işaretlediğim kısımları siliyoruz.<br /><br /><b>4. Adım</b><br /><b>Blogger > Sayfalar > Yeni Sayfa</b> yolunu takip ederek yeni sayfa oluşturalım. Sayfayı ilk oluştururken sayfa başlığında Türkçe karakter kullanmamaya özen gösterelim. Daha sonra değiştirirsiniz. <b>İletişim</b> yerine <b>iletisim</b> yazalım. Daha sonra sayfa başlığını isterseniz kaldırabilirsiniz isterseniz de değiştirebilirsiniz. Sayfanızın adresi <b>http://blogadresi.blogspot.com.tr/p/iletisim.html</b> gibi olsun. Oluşturduğunuz sayfada <b>HTML</b> bölümüne gelip aşağıdaki kodları yapıştırın.<br /><div class="code4moblog"><style type="text/css"><br /><span style="color: blue;">#message-bg {</span><br /><span style="color: blue;"> background: #fffeef;</span><br /><span style="color: blue;"> color: #585858;</span><br /><span style="color: blue;"> padding: 10px;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;"> border: 1px solid #F3F3F3;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form {</span><br /><span style="color: blue;"> padding: 0px 0px 0 0px;</span><br /><span style="color: blue;"> border-radius: 0px;</span><br /><span style="color: blue;"> color: #1D1D1D;</span><br /><span style="color: blue;"> font-size: 15px;</span><br /><span style="color: blue;"> font-weight: bold;</span><br /><span style="color: blue;"> background:none;</span><br /><span style="color: blue;"> font-family: sans-serif;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form .wrap-me {</span><br /><span style="color: blue;"> margin: 0 auto;</span><br /><span style="color: blue;"> display: block;</span><br /><span style="color: blue;"> padding: 30px 20px;</span><br /><span style="color: blue;"> background: #f3f3f3;</span><br /><span style="color: blue;"> border-radius: 0px;</span><br /><span style="color: blue;"> max-width: 632px;</span><br /><span style="color: blue;"> width: 632px !important;</span><br /><span style="color: blue;"> border-top: 2px solid #d8d8d8;</span><br /><span style="color: blue;"> border-left: 1px solid #d8d8d8;</span><br /><span style="color: blue;"> border-right: 1px solid #d8d8d8;</span><br /><span style="color: blue;"> border-bottom: 1px solid #d8d8d8;</span><br /><span style="color: blue;"> box-sizing: border-box;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form .wrap-me:before {</span><br /><span style="color: blue;"> content:'\f0e0';</span><br /><span style="color: blue;"> position: absolute;</span><br /><span style="color: blue;"> font-family: FontAwesome;</span><br /><span style="color: blue;"> font-weight: blod;</span><br /><span style="color: blue;"> margin-top: -75px;</span><br /><span style="color: blue;"> margin-left: -35px;</span><br /><span style="color: blue;"> left: 50%;</span><br /><span style="color: blue;"> display: inline-block;</span><br /><span style="color: blue;"> font-size: 48px;</span><br /><span style="color: blue;"> width: 80px;</span><br /><span style="color: blue;"> height: 80px;</span><br /><span style="color: blue;"> background: #f9f9f9;</span><br /><span style="color: blue;"> border-radius: 50px;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;"> color: #999;</span><br /><span style="color: blue;"> box-sizing: border-box;</span><br /><span style="color: blue;"> border: 5px solid #d8d8d8;</span><br /><span style="color: blue;"> line-height: 70px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">input#ContactForm1_contact-form-name, #ContactForm1_contact-form-email, #ContactForm1_contact-form-email:hover, #ContactForm1_contact-form-email:active {</span><br /><span style="color: blue;"> padding: 6px;</span><br /><span style="color: blue;"> margin-top: 6px !important;</span><br /><span style="color: blue;"> box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;</span><br /><span style="color: blue;"> max-width: 100%;</span><br /><span style="color: blue;"> height: 45px;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;"> border: 1px solid #D2D2D2;</span><br /><span style="color: blue;"> border-radius: 0px;</span><br /><span style="color: blue;"> line-height: 1em;</span><br /><span style="color: blue;"> min-height: 31px;</span><br /><span style="color: blue;"> background: #fff;</span><br /><span style="color: blue;"> font-family: sans-serif;</span><br /><span style="color: blue;"> margin-bottom: 15px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">.contact-form-email-message, .contact-form-email-message:active, .contact-form-email-message:hover {</span><br /><span style="color: blue;"> padding: 6px;</span><br /><span style="color: blue;"> margin-top: 6px !important;</span><br /><span style="color: blue;"> box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;</span><br /><span style="color: blue;"> max-width: 100%;</span><br /><span style="color: blue;"> height: 200px;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;"> border: 1px solid #D2D2D2;</span><br /><span style="color: blue;"> border-radius: 0px;</span><br /><span style="color: blue;"> color: #1d1d1d;</span><br /><span style="color: blue;"> line-height: 1em;</span><br /><span style="color: blue;"> min-height: 80px;</span><br /><span style="color: blue;"> background: #fff;</span><br /><span style="color: blue;"> font-family: sans-serif;</span><br /><span style="color: blue;"> margin-bottom: 10px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">/*------[Focus]-------------------*/</span><br /><span style="color: blue;">#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus {</span><br /><span style="color: blue;"> outline: none;</span><br /><span style="color: blue;"> background: #FFFFFF !important;</span><br /><span style="color: blue;"> color: #444;</span><br /><span style="color: blue;"> border-color: rgb(236, 235, 235) !important;</span><br /><span style="color: blue;"> box-shadow: 0 0 5px rgba(241, 241, 241, 0.7) !important;</span><br /><span style="color: blue;"> transition: all 0.3s ease-in-out !important;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">/*----[Submit button style]-------------*/</span><br /><span style="color: blue;">.contact-form-button-submit:hover {</span><br /><span style="color: blue;"> color: #FFFFFF;</span><br /><span style="color: blue;"> background: #777 !important;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">.contact-form-button-submit {</span><br /><span style="color: blue;"> background: #444;</span><br /><span style="color: blue;"> display: table;</span><br /><span style="color: blue;"> font-size: 17px;</span><br /><span style="color: blue;"> margin: 0 !important;</span><br /><span style="color: blue;"> border-radius: 0px !important;</span><br /><span style="color: blue;"> max-width: 100%;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;"> min-width: 100%;</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;"> float: center;</span><br /><span style="color: blue;"> letter-spacing: 0.5px;</span><br /><span style="color: blue;"> font-family: sans-serif;</span><br /><span style="color: blue;"> font-weight: normal;</span><br /><span style="color: blue;"> cursor: pointer;</span><br /><span style="color: blue;"> outline: none!important;</span><br /><span style="color: blue;"> color: #FFFFFF;</span><br /><span style="color: blue;"> border: 0px solid #fff !important;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;"> padding: 0px 0px 0px 15px;</span><br /><span style="color: blue;"> text-transform: capitalize;</span><br /><span style="color: blue;"> transition: all 300ms ease-in-out;</span><br /><span style="color: blue;"> -webkit-transition: all 300ms ease-in-out;</span><br /><span style="color: blue;"> -moz-transition: all 300ms ease-in-out;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">/*----[Submit button on Focus]------------------*/</span><br /><span style="color: blue;">.contact-form-button-submit:focus, .contact-form-button-submit.focus {</span><br /><span style="color: blue;"> border-color: #FFFFFF;</span><br /><span style="color: blue;"> box-shadow: none !important;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">/*---[Error message]---------------------*/</span><br /><span style="color: blue;">.contact-form-error-message-with-border .contact-form-success-message {</span><br /><span style="color: blue;"> background: #f9edbe;</span><br /><span style="color: blue;"> border: 0px solid #d8d8d8;</span><br /><span style="color: blue;"> bottom: 0;</span><br /><span style="color: blue;"> box-shadow: 0 2px 4px rgba(0,0,0,.2);</span><br /><span style="color: blue;"> color: #666;</span><br /><span style="color: blue;"> font-size: 12px;</span><br /><span style="color: blue;"> font-weight: bold;</span><br /><span style="color: blue;"> padding-bottom: 10px;</span><br /><span style="color: blue;"> line-height: 19px;</span><br /><span style="color: blue;"> margin-left: 0;</span><br /><span style="color: blue;"> opacity: 1;</span><br /><span style="color: blue;"> position: static;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">/*---[Submit Button On Success Message]---------*/</span><br /><span style="color: blue;">.contact-form-button-submit.disabled, .contact-form-button-submit.disabled:hover, .contact-form-button-submit.disabled:active {</span><br /><span style="color: blue;"> opacity: 0.9;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">/*----[Success Message]---------*/</span><br /><span style="color: blue;">.contact-form-error-message-with-border {</span><br /><span style="color: blue;"> background: #f3f3f3;</span><br /><span style="color: blue;"> border: 1px solid #d8d8d8;</span><br /><span style="color: blue;"> border-radius: 0px !important;</span><br /><span style="color: blue;"> bottom: 0;</span><br /><span style="color: blue;"> box-shadow: none;</span><br /><span style="color: blue;"> color: #313131;</span><br /><span style="color: blue;"> font-size: 20px;</span><br /><span style="color: blue;"> font-weight: normal;</span><br /><span style="color: blue;"> line-height: 35px;</span><br /><span style="color: blue;"> margin-left: 0;</span><br /><span style="color: blue;"> opacity: 1;</span><br /><span style="color: blue;"> position: static;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;"> height: 35px;</span><br /><span style="color: blue;"> margin-top: 45px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">.contact-form-cross {</span><br /><span style="color: blue;"> height: 14px;</span><br /><span style="color: blue;"> margin: 5px;</span><br /><span style="color: blue;"> vertical-align: -8.5%;</span><br /><span style="color: blue;"> float: right;</span><br /><span style="color: blue;"> width: 14px;</span><br /><span style="color: blue;"> border-radius: 50px;</span><br /><span style="color: blue;"> border: 0 !important;</span><br /><span style="color: blue;"> cursor: pointer;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">.contact-form-success-message-with-border {</span><br /><span style="color: blue;"> font-weight: normal;</span><br /><span style="color: blue;"> background-color: #f3f3f3;</span><br /><span style="color: blue;"> border: 1px solid #d8d8d8;</span><br /><span style="color: blue;"> color: #313131;</span><br /><span style="color: blue;"> line-height: 35px;</span><br /><span style="color: blue;"> margin-left: 0;</span><br /><span style="color: blue;"> font-size: 20px;</span><br /><span style="color: blue;"> opacity: 1;</span><br /><span style="color: blue;"> position: static;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;"> height: 35px;</span><br /><span style="color: blue;"> margin-top: 45px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">/* Extra Stuff */</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.name-bg {</span><br /><span style="color: blue;"> background-color: none; #f5fce5;</span><br /><span style="color: blue;"> }</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.email-bg {</span><br /><span style="color: blue;"> background-color: none; #edfaf2;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.name-bg, div#blog-supporter_contct_form span.email-bg {</span><br /><span style="color: blue;"> display: inline-block;</span><br /><span style="color: blue;"> max-width: 550px;</span><br /><span style="color: blue;"> line-height: 21px;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;"> color: #696969;</span><br /><span style="color: blue;"> padding: 3px 5px;</span><br /><span style="color: blue;"> margin: 0px 0px 0px;</span><br /><span style="color: blue;"> box-sizing: border-box;</span><br /><span style="color: blue;"> height: 30px;</span><br /><span style="color: blue;"> border: 0px solid #E4E0E0;</span><br /><span style="color: blue;"> padding-left: 39px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.name-bg:before {</span><br /><span style="color: blue;"> content: '\f007';</span><br /><span style="color: blue;"> background-color: #286ab1;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.email-bg:before {</span><br /><span style="color: blue;"> content: '\f0e0 ';</span><br /><span style="color: blue;"> background-color: #286ab1;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.name-bg:before, div#blog-supporter_contct_form span.email-bg:before, div#blog-supporter_contct_form span.message-bg:before {</span><br /><span style="color: blue;"> font-family: FontAwesome;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;"> margin: -4px 0 0px 0px;</span><br /><span style="color: blue;"> font-weight: normal;</span><br /><span style="color: blue;"> padding: 0;</span><br /><span style="color: blue;"> line-height: 27px;</span><br /><span style="color: blue;"> width: 28px;</span><br /><span style="color: blue;"> height: 28px;</span><br /><span style="color: blue;"> display: table;</span><br /><span style="color: blue;"> position: absolute;</span><br /><span style="color: blue;"> margin-left: -40px !important;</span><br /><span style="color: blue;"> border: 0px solid rgba(0, 0, 0, 0.1);</span><br /><span style="color: blue;"> border-radius: 100px;</span><br /><span style="color: blue;"> border-right: 0 !important;</span><br /><span style="color: blue;"> color: #FFFFFF;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.message-bg {</span><br /><span style="color: blue;"> background-color: none; #EBFFE8;</span><br /><span style="color: blue;"> display: inline-block;</span><br /><span style="color: blue;"> max-width: 550px;</span><br /><span style="color: blue;"> height: 30px;</span><br /><span style="color: blue;"> line-height: 21px;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;"> border: 0px solid #E4E0E0;</span><br /><span style="color: blue;"> color: #696969;</span><br /><span style="color: blue;"> padding: 3px 5px;</span><br /><span style="color: blue;"> box-sizing: border-box;</span><br /><span style="color: blue;"> padding-left: 39px;</span><br /><span style="color: blue;"> margin: 0px 0px 4px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.message-bg:before {</span><br /><span style="color: blue;"> content: '\f044';</span><br /><span style="color: blue;"> background-color: #286ab1;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.send-bg {</span><br /><span style="color: blue;"> display: inline-block;</span><br /><span style="color: blue;"> background: #f8fff7;</span><br /><span style="color: blue;"> float: left;</span><br /><span style="color: blue;"> max-width: 40%;</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;"> margin-top: 15px;</span><br /><span style="color: blue;"> transition: all 0.4s ease-in-out !important;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.send-bg::before {</span><br /><span style="color: blue;"> content: '\f1d8';</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.send-bg::before, div#blog-supporter_contct_form span.clear-bg:before {</span><br /><span style="color: blue;"> font-family: FontAwesome;</span><br /><span style="color: blue;"> background-color: #286ab1;</span><br /><span style="color: blue;"> text-align: center;</span><br /><span style="color: blue;"> font-weight: normal;</span><br /><span style="color: blue;"> margin: 0px;</span><br /><span style="color: blue;"> padding: 0px;</span><br /><span style="color: blue;"> line-height:40px;</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;"> width: 40px;</span><br /><span style="color: blue;"> position: absolute;</span><br /><span style="color: blue;"> border: 0px solid #fff;</span><br /><span style="color: blue;"> border-radius: 0px 0px 0px 2px!important;</span><br /><span style="color: blue;"> display: inline-block;</span><br /><span style="color: blue;"> border-right: 0 !important;</span><br /><span style="color: blue;"> color: #FFFFFF;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.clear-bg {</span><br /><span style="color: blue;"> display: inline-block;</span><br /><span style="color: blue;"> float: right;</span><br /><span style="color: blue;"> margin-top: 15px;</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;"> border-radius: 0px!important;</span><br /><span style="color: blue;"> max-width: 40%;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form span.clear-bg:before {</span><br /><span style="color: blue;"> content: '\f021';</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;"> }</span><br /><span style="color: blue;">input.contact-form-button.contact-form-button-submit.clear-button:hover {</span><br /><span style="color: blue;"> background-color: #777 !important;</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#blog-supporter_contct_form .clear-button {</span><br /><span style="color: blue;"> color: #FFFFFF;</span><br /><span style="color: blue;"> border: 0px solid #FFF !important;</span><br /><span style="color: blue;"> background-color: #444444;</span><br /><span style="color: blue;"> border-radius: 2px!important;</span><br /><span style="color: blue;"> max-width: 100%;</span><br /><span style="color: blue;"> width: 100%;</span><br /><span style="color: blue;"> min-width: 100%;</span><br /><span style="color: blue;"> float: right;</span><br /><span style="color: blue;"> display: table;</span><br /><span style="color: blue;"> height: 40px;</span><br /><span style="color: blue;">}</span><br /><span style="color: blue;">div#ContactForm1 {display: none !important;}</span><br /></style><br /><br /><div id="blog-supporter_contct_form"><br /><div class="wrap-me"><br /><form name="contact-form"><br /><span class="name-bg"><span style="color: blue;">Adınız</span></span><br /><br /><input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" placeholder="<span style="color: blue;">Mustafa Aydın</span>" size="30" type="text" value="" /><br /><br /><br /><br /><span class="email-bg"><span style="color: blue;">Eposta Adresiniz</span> <span style="color: grey;"><b>*</b></span></span><br /><br /><input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" placeholder="<span style="color: blue;">birisi@example.com</span>" size="30" type="text" value="" /><br /><br /><br /><br /><span class="message-bg"><span style="color: blue;">Mesajınız</span> <span style="color: grey;"><b>*</b></span></span><br /><br /><textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="<span style="color: blue;">Mesajınızı buraya yazın...</span>" rows="5">



Gönder" />
Temizle" />

5. Adım
Mavi renk ile işaretlediğim yerleri kendinize göre özelleştirin ve kullanmaya başlayın.

Daha iyi bloglar için...

Önizleme

Adınız


Eposta Adresiniz *


Mesajınız *

Virüs bulunmuyor. www.avast.com