Blogger iletişim formu nasıl eklenir ? iletişim sayfasını kolayca oluşturun 2022

BLOGGER İLETİŞİM FORMU EKLEME NASIL YAPILIR 2022


bloggeriletişimformu



Bu yazımızda; blog siteye canlı destek eklentisi nasıl eklenir? Onu göstereceğim. Haydi! Hemen öğrenelim :)
yapmanız gereken oldukça basit ben bunu yapmak için çok uğraştım sizler hızlıca yapacaksınız şimdi anlatıma geçelim
ilk önce blogger sitesine giriş yaptıktan sonra sayfalar sekmesine geliyoruz geldikten sonra sayfa oluşturuyoruz başlık yerine bize ulaşın, iletişim vs yazabilirsin açıklama yerine geçmeden resimdeki gibi HTML görünümü yerine basınca altaki kodu yazmanız gerekir

iletişim sayfası kodu

👇👇👇👇👇👇👇👇

<form name="contact-form"><div class="datainput"><input class="validate" id="ContactForm1_contact-form-name" name="name" required="" type="text" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Name</label> </div><div class="datainput"><input class="validate" id="ContactForm1_contact-form-email" name="email" required="" type="email" value="" /> <span class="highlight"></span> <span class="bar"></span> <label>Email</label> </div><div class="datainput"><textarea class="validate" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" required="" rows="5"></textarea> <span class="highlight"></span> <span class="bar"></span> <label>Message</label> </div><input id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> <div id="ContactForm1_contact-form-error-message"></div><div id="ContactForm1_contact-form-success-message"></div></form><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'] = 'BLOG ID';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dBLOG ID','//ALANADI.blogspot.com/','BLOG ID');

_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Sending...</span>', 'contactFormMessageSentMsg': '<span style="padding:5px 10px">Your message has been sent.</span>', 'contactFormMessageNotSentMsg': '<span style="padding:5px 10px">Message could not be sent. Please try again later.</span>', 'contactFormInvalidEmailMsg': '<span style="padding:5px 10px">A valid email address is required.</span>', 'contactFormEmptyMessageMsg': '<span style="padding:5px 10px">Message field cannot be empty.</span>', 'title': 'Contact Form', 'blogId': 'BLOG ID', 'contactFormNameMsg': 'İsim', 'contactFormEmailMsg': 'E-mail', 'contactFormMessageMsg': 'Mesajınız', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));

//]]>

</script> <style scoped="scoped">

.datainput{float:none;position:relative;margin-bottom:45px;margin-right:10px}.datainput input,.datainput textarea{font-size:15px;padding:15px 0;display:block;width:100%;border:none;border-bottom:1px solid #ddd}.datainput input:focus,.datainput textarea:focus{outline:none}.datainput label{color:#999;font-size:15px;font-weight:400;position:absolute;pointer-events:none;left:0;top:10px;transition:.2s ease all}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:14px;color:#5264AE}.bar{position:relative;display:block;width:100%}.bar:before,.bar:after{content:'';height:2px;width:0;bottom:1px;position:absolute;background:#07ACEC;transition:.2s ease all}.bar:before{left:50%}.bar:after{right:50%}.datainput input:focus ~ .bar:before,.datainput input:focus ~ .bar:after,.datainput textarea:focus ~ .bar:before,.datainput textarea:focus ~ .bar:after{width:50%}.highlight{position:absolute;height:50%;width:100px;top:25%;left:0;pointer-events:none;opacity:.5}.datainput input:focus ~ .highlight,.datainput textarea:focus ~ .highlight{animation:inputHighlighter .3s ease}.datainput input:focus ~ label,.datainput input:valid ~ label,.datainput textarea:focus ~ label,.datainput textarea:valid ~ label{top:-20px;font-size:13px;color:#07ACEC}

input#ContactForm1_contact-form-email-message{height:150px}

input#ContactForm1_contact-form-submit{color:#fff!important;background:#2196F3;padding:15px 25px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out;text-transform:uppercase;float:left;margin-top:15px}

input#ContactForm1_contact-form-submit:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}

#ContactForm1_contact-form-error-message{float:right;background:#D32F2F;color:#fff;font-size:13px;font-weight:700;border-radius:3px}#ContactForm1_contact-form-success-message{float:right;background:#4CAF50;color:#fff;font-size:13px;font-weight:700;border-radius:3px}

</style> <div class='clear'></div>

<div style='clear:both;'></div>


Kod karışık gelebilir ilk önce koyu rekle işaretlediğim yerleri değiştiriyorsunuz blog İD ve sitenizin adını yazıyorsunuz yazdıktan sonra kodu kopyalayıp yukardaki resimdeki gibi HTML görünümü yerine yapıştırınca altaki resim bizi karşılıyor

kodlamayı kayıt ettikten sonra oluşturma görünümüne basıyoruz yukardaki ekran açılıyor burda püf nokta vereceğim eğer ad soyad, e-posta bide mesajınızı girin ve gönder yazıları ingilizce olmasını istiyorsanız bunu yapmanıza gerek yok bende seninki gibi Türkçe olmasını istiyorum diyorsanız dediklerimi aynısını yapın biz buraya gelince ilk başta name yazacak o yazının m harfini silmeden diğer harfleri silin ve isim bu şekilde yazın bunun nedeni ise şudur önce ad soyad sonra yazı kutucuğu aşağı olması için bunu yapıyoruz yoksa bu şekilde olur

Mesajınızı girin 
isim 👍👍👍 bu şekilde olacağı için görünümü iyi olmayacaktır ben onun için imkan varsa tüm yazıları silmeden bu şekilde hata olmasını engeleyebilirsiniz sonra E-mail yazar onu elemeyebilirsiniz yada E-posta olarak yazabilirsiniz koyu rekle işaretlediğim yerleri silmiyorsunuz devamını ekliyorsunuz message şeklinde olan yazıyı ise mesajınız şeklinde yapabilirsin yaptıktan sonra önizleyin benim gibi 

Benim gibi gözükürse tamamdır ben bu şekilde yaptım güzel oldu gönder yazısını ben hal ettim ona karışmayın şimdi test yazı yazıp gönderelim bakalım mail geliyor mu? 

yazımı yazdım göndere bastım blogger sitesine üye olduğum mail adresime kod geldi onu aşağıda resim olarak bırakıyorum

bu şekilde bizlere kod geliyor ama şunu test ettim şuan bende ana bölümü gitmiş şimdi tekrar ekledim sizde kontrol edin ana sayfa silinse tekrar ekleyin ben ekledim sorun yok şuan birçok kişi daha güzel bir şekilde iletişim sayfası eklemeyi göstermiş ama hata oluşuyor ben onuda gösterdim benden bu kadar bizi takip etmeyi unutmayın

Şefik SOYKAL

web sitemize hoş geldiniz

Yorum Gönder

yorum yaparken gizlilik politikamızı ihlal etmemeye dikkat edin gizlilik politikamıza göz atmayı unutmayın

Daha yeni Daha eski