Blog Javascript İletişim Sayfası

5/26/2016
Blogger sitelerinde iletişim javascript ile ücretsiz iletişim sayfası oluşturmak için, yani daha önceleri üçüncü şahıslar tarafından sağlanan iletişim formlarını artık kendi kişisel bloglarımızda kullabiliyoruz.

Blog Javascript İletişim Sayfası

İletileri sayısı ve form hakkında endişe edecek hiç bir kusur olmadığı gibi blogunuza tamamen ait olan iletişim sayfası daha sağlıklı işler olacaktır. Bu iletişim formu kurulumunda blog sitelerini hızlandırmak için gizli js dosyaları kullanılarak Blogger İletişim Widget'i oluşturulduğunu bilmenizde fayda olacaktır.

Blogger İletişim Sayfası Widget'i Nasıl Oluşturulur?

1. Blogger hesabınıza giriş yapın blogunuzun kumanda panelinden Sayfalar > Yeni sayfa butonuna tıklayarak açılan sayfanın HTML kısmına aşağıdaki kodları ekleyin.
<style scoped="scoped" type="text/css">
.contact-form-box{width:100%;margin:20px auto;padding:0;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email{width:100%;height:auto;margin: 5px auto 15px;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#777;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-name:focus, #ContactForm1_contact-form-email:focus, #ContactForm1_contact-form-email-message:focus{background: #ffffff;outline:none}
#ContactForm1_contact-form-email-message{width:100%;height:100px;margin: 5px auto;padding: 10px;background: #ebebeb;border: 1px solid #ccc;color:#666;font-family:Arial, sans-serif;border-radius:3px;box-shadow: 0px 4px 0px 0px #c7c5c7;}
#ContactForm1_contact-form-submit {display:block;height: 35px;float: left;color:#FFF;padding: 0 20px;margin: 10px 0 5px 0;cursor: pointer;background-color:#f4836a;box-shadow: 0px 4px 0px 0px #c65b45;border:1px solid #eb6d57;border-radius:3px;text-shadow:0px 1px 0px #de4129;}
#ContactForm1_contact-form-submit:hover {background-color:#f4786f;}
#ContactForm1_contact-form-submit:active {position:relative;top:2px;box-shadow: 0px 2px 0px 0px #c65b35;}
#ContactForm1_contact-form-submit:focus{outline:none}
#ContactForm1_contact-form-error-message, #ContactForm1_contact-form-success-message{width: 100%;margin-top:35px;text-align:left}
@media screen and (max-width: 768px){
.contact-form-box{width:100%;}
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 96%;}
}
@media screen and (max-width: 480px){
#ContactForm1_contact-form-name, #ContactForm1_contact-form-email,#ContactForm1_contact-form-email-message{width: 94%;}
}
</style>

<div class="contact-form-box">
<div style="text-align: justify;">
Daha fazla bilgi almak için blog yöneticisi ile iletişime geçin. Aşağıdaki iletişim formunu doldurarak yöneticiyle iletişime geçebilirsiniz.
</div>
<br />
<form name="contact-form">
<input id="ContactForm1_contact-form-name" name="name" placeholder="Name" size="30" type="text" value="" /><br />
<input id="ContactForm1_contact-form-email" name="email" placeholder="Email" size="30" type="text" value="" /><br />
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder="Message" rows="5"></textarea><br />
<input id="ContactForm1_contact-form-submit" type="button" value="Gönder" /><br />
<div style="max-width: 223px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</form>
</div>
<script type="text/javascript">
//<![CDATA[
if (window.jstiming) window.jstiming.load.tick('widgetJsBefore');
//]]>
</script>
<script src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '6092920000009420089';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x6092920000009420089','//bloggereklentileri.blogspot.com/','6092920000009420089');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Gönderiliyor...', 'contactFormMessageSentMsg': 'Mesajınız gönderildi.', 'contactFormMessageNotSentMsg': 'Mesaj gönderilemedi. Lütfen daha sonra tekrar deneyin.', 'contactFormInvalidEmailMsg': 'Geçerli bir e-posta adresi gereklidir.', 'contactFormEmptyMessageMsg': 'İleti alanı boş olamaz.', 'title': 'İletişim Formu', 'blogId': '6092920000009420089', 'contactFormNameMsg': 'Adınız', 'contactFormEmailMsg': 'Eposta adresiniz', 'contactFormMessageMsg': 'Mesajınız', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>
2. Blogger iletişim sayfası oluşturulurken dikkat edilmesi gerekenler;

Kod içerisinde yer alan window['blogger_blog_id'] = '6092920000009420089' blog ID numaranızı renkli alanlar ile değitirin.

_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d2583045784323695327','//bloggereklentileri.blogspot.com/','6092920000009420089') kodu içerisinde yer alan //bloggereklentileri.blogspot.com/ blog URL'niz ve 6092920000009420089 blog ID numaranız ile değiştirin.

'blogId': '6092920000009420089' kodu içerisindeki ID numarasını da kendi blog ID numaranız ile değiştirin.

 Slayt Tarzı Birden Fazla Sayfa Oluşturma

Kategori İçerikleri



Blogger
Disqus
Yorum Ekle

1 yorum

çalışmalarınız çok güzel başarılar

Cevap