Blogger İletişim Formu Nasıl Yapılır ?

Blog kullanan çoğu arkadaşta fark ettiğim bir eksiklik var. O eksiklik ne derseniz iletişime geçebileceğimiz herhangi bir yer yok tabi yorum kısmı falan var ama özel bir şekilde konuşabilmek için bir alan yok. O yüzden bugün sizlere blogunuza nasıl iletişim formu ekleyebileceğinizi anlatacağım. Kullanacağımız iletişim formuna göz atmak isterseniz buraya tıklamanız yeterli.

Öncelikle blogumuzun kontrol paneline gelip sayfalar kısmından yeni bir sayfa oluşturalım. Oluşturduğunuz sayfanın hemen sol en üstünden html görünümüne geçiş yapalım ve alttaki kodları oraya yapıştıralım. Eğer ayrı bir sayfada değilde blogunuzun ana sayfasında bir yerde gözükmesini istiyorsanız blogunuzun kontrol panelinden düzen kısmına gelip nereye eklemek istiyorsanız gadget ekle diyerek HTML/JavaScript gadgetini seçtikten sonra alttaki kodları oraya yapıştırabilirsiniz.

 <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>Adınız</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 Adresiniz</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>Mesajınız</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'] = '8201961285847089455';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8201961285847089455','//canuzunyool.blogspot.com/','8201961285847089455');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': '<span style="padding:5px 10px">Gönderiliyor...</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': '8201961285847089455', '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>

Kodları ekledikten sonra **8201961285847089455 ve canuzunyool.blogspot.com** yazan yerleri kendi blogunuzun id si ve adresi ile değiştirmeniz gerekiyor. Blog idnizi blogunuzun kontrol paneline girip arama çubuğundan kopyalayabilirsiniz. Aklınıza takılan herhangi bir şey olursa yorum bölümünde belirtirseniz seve seve yardımcı olurum.