Blogger İletişim Formunu Sabit Sayfaya Ekleme

Merhaba arkadaşlar, bugün blog siteme iletişim sayfamı eklemiş bulunmaktayım. Aslında sağ kenar çubuğundan iletişim formu mevcuttu ama sütun uzadığı için güzel görünmüyordu.
Şimdi o iletişim formunu sayfaya taşıdım hem daha şık hemde daha az yer kaplamış oldu.

Blogger kullananlar için basit ve kullanışlı bir iletişim sayfası buldum arkadaşlar. Kodlarını sizlerle paylaşacağım. Kullanmak isteyenler kullanabilir.

İletişim Sayfası ‘nın Önemi

Sitenize gelen ziyaretçilerin fikirleri her zaman ön planda olan kişilerin ilk işi sitelerine bir iletişim kısmı eklemek olmalı. Ziyaretçilerin eleştirileri, soruları, tebrik mesajları ve görüşleri bizleri hep bir adım ileriye taşıyacaktır düşüncesindeyim. Zaten blog sitemi açar açmaz iletişim formunu eklemiştim. Bugün bu formu, iletişim sayfasına taşıdım bu kadar.

• İlk olarak blog panelinize giriniz.
• Sayfalar kısmına geliniz. Oradan ” Yeni sayfa ” tıklayınız.
• Sol üstten ” HTML ” ye geçiş yapınız. Alttakı kodu oraya yapıştırınız.

<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>İsminiz</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>Mesajınız</label> </div>
<input id=”ContactForm1_contact-form-submit” type=”button” value=”Gonder” /> <br />
<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’] = ‘2288468270396016034‘;BLOG_attachCsiOnload(”); }_WidgetManager._Init(‘//www.blogger.com/rearrange?blogIDx3d3247702708061337910’,’//profesorungunlugu.com/’,’2288468270396016034‘);
_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’: ‘2288468270396016034‘, ‘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> <br />
<div class=”clear”>
</div>
<div style=”clear: both;”>
</div>

Değiştirmeniz gereken yerler
Kodu yapıştırdıktan sonra. Kod içinde ki koyu rekle belirttiğim yerlere kendi ID blog numaranızı yazacaksınız. Blog ID ‘zi öğrenmek için blog paneliz açıkken adres çubuğundan öğrenebilirsiniz.