Blogger İletişim Formu
Bloğunuzda bir iletişim sayfası olması, okuyucuların görüşlerini veya
isteklerini size iletebilmesi için gereklidir. Facebook sayfamı koydum,
oradan mesaj atabilirler diye düşünüyorsanız bu fikri birkez daha gözden
geçirin. Çünkü bazı insanlar mail ile iletişim kurmayı severler ve
sosyal medya kullanmazlar. Bu yüzden herkesle iletişime geçebilmek için
bloğunuzda bir iletişim sayfası olması gerekir. Bu yazımızda gadget
olarak değil de Html kod olarak bir sayfaya iletişim formu eklemeyi
göstereceğiz.
1- Bloğunuzun yönetim panelinden ''Sayfalar > Yeni Sayfa'' açın. Bu sayfanın başlığına ''İletişim Sayfası'' yazın.
2- Html bölümünden aşağıdaki kodu yapıştırın.
3- Kod içerisinde ''Buraya Blog ID numarası'' yazan yere kendi
bloğunuzun ID numarasını yazın. Bu numarayı bloğunuzun yönetim
panelindeyken link bölümünde görebilirsiniz. Oradan numarayı alın ve kod
içerisine yapıştırın.
4- Kendi blog adresinizi ''Buraya blog adresi'' yazan yere ekleyin. Böylece bloğu açtığınız mail adresine iletiler gelecektir.
Blogger İletişim formu 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'] = 'BURAYA BLOG ID NUMARASI';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3dBURAYA BLOG ID NUMARASI','//BURAYA BLOG ADRESİ/','BURAYA BLOG ID NUMARASI');
_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': 'BURAYA BLOG ID NUMARASI',
'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email',
'contactFormMessageMsg': 'Message', '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>
Yukarıdaki kodu olduğu gibi kopyalayın ve içerisine kendi bilgilerinizi yazın. İletişim sayfanız hayırlı olsun.
Labels:
Blogger Destek