Her açıdan kullanışlı bir blogspot sayfanızın olmasını istiyorsanız bu bloga sadece içerik eklemeniz yetmez.
Bu içerikleri okuyan ve siteniz ile ilgili görüş belirtmek isteyen kimselerin ya da bir konu hakkında bilgi almak isteyen kişilere yardımcı olmak adına bir iletişim aracı oluşturmanız gerekiyor.
Bu bazen bir mail hesabı,bazen de bir iletişim formu oluşturma yöntemi ile sağlanabilir.
Şimdi sizlere bizim de bu yolla yararlandığımız gayet kullanışlı bir iletişim formu nasıl oluşturulur bunu anlatacağız.
Öncelikle Blogger Panelinde yer alan Yerleşim kısmından iletişim Formu Widgeti oluşturma yöntemiyle de siteniz için bir iletişim formu oluşturabileceğinizi belirtmek isteriz.
Bu sıkça başvurulan ve karmaşık bir yöntem olduğu için çoğu blogger kullanıcısı tarafından tavsiye edilmiyor.
Bunun yerine çok fazla zamanınızı almayacak bir yöntem üzerinde duracağız. Hadi başlayalım.
Sabit İletişim Sayfası Oluşturma
Blogger kullanıcıları bilir. Blogger Kumanda Paneline giriş yaptığınızda sol menüde Sayfalar sekmesi yer alır. Bu sekmeye giriş yaparak sitenize ait bir iletişim sayfası oluşturabilirsiniz .
Oluşturmuş olduğunuz bu iletişim sayfasına giriş yaparak aşağıda vereceğimiz HTML kodlarını doğru bir şekilde yerleştiriniz.
Kod ekleme sırasını atlamadan düzgün bir şekilde yerleştiriniz. Kod Ekleme sırası 1-2-3
1- HTML Kodu
<p>İletişim sayfanız için bir açıklama ekleyin.</p> <form name="contact-form"> <div class='contact_form-1'> <input id="ContactForm1_contact-form-name" name="name" placeholder='Adınız' size="30" type="text" value="" /> </div> <div class='contact_form-2'> <input id="ContactForm1_contact-form-email" name="email" placeholder='E-posta adresiniz' size="30" type="text" value="" /> </div> <div class='contact_form-3'> <textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Mesajınız' rows="7"></textarea> </div> <div class='contact_form-4'> <input class="ripplelink" id="ContactForm1_contact-form-submit" type="button" value="Gönder" /> </div> <div style="max-width: 100%; text-align: center; width: 100%;"> <div id="ContactForm1_contact-form-error-message"> </div> <div id="ContactForm1_contact-form-success-message"> </div> </div> </form>
Not: İletişim sayfanız için bir açıklama ekleyin yazan kısıma istediğiniz gibi bir karşılama mesajı yazabilirsiniz.
Örnek :Sayfamıza Hoş Geldiniz! gibi.
2- CSS Kodu
<style type="text/css"> #comments,#ContactForm1{display:none} #ContactForm1_contact-form-email,#ContactForm1_contact-form-name{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#f4f7f8;color:#222;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-email-message{background:#f4f7f8;color:#222;font-family:'Roboto', sans-serif;width:100%;height:250px;margin:10px auto;padding:14px;border:0;border-bottom:1px solid #c6cbcc;transition:all .6s} #ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email-message:focus{background:#f4f7f8;border-color:#f24a4a;outline:none} #ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;margin:10px 0 3px 5px;padding:0 0 0 20px;border:none;border-radius:24px;cursor:pointer;box-shadow:0 1px 2px 0 rgba(60,64,67,0.302),0 1px 3px 1px rgba(60,64,67,0.149);transition:box-shadow .08s linear,min-width .15s cubic-bezier(0.4,0.0,0.2,1)} .contact_form-4{position:relative} .contact_form-4:before{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAAElBMVEVHcExChfTqQzXyui80qFOWZJRFkkmAAAAAAXRSTlMAQObYZgAAAC5JREFUCNdjYEAFSkpUYjIbGxsrqQoKCgpAmIFwJkgQygyEMEHAxQVuAuVMCAAACWsKY1KWucsAAAAASUVORK5CYII=);background-position:center;background-repeat:no-repeat;background-size:20px;content:'';display:block;height:63px;width:32px;position:absolute;z-index:1;left:15px;top:0} #ContactForm1_contact-form-submit:hover{background:#fafafb;box-shadow:0 1px 3px 0 rgba(60,64,67,0.302),0 4px 8px 3px rgba(60,64,67,0.149)} #ContactForm1_contact-form-success-message,#ContactForm1_contact-form-error-message{margin-top:35px} form{color:#666} .contact_form-1,.contact_form-2{float:left;width:50%} .contact_form-1,.contact_form-2{margin:0 0 10px 0;padding:0 10px 0 0} .contact_form-2{padding:0 0 0 10px} @media only screen and (max-width:640px){.contact_form-1,.contact_form-2{width:100%;padding:0}} </style>
Not: Burada herhangi bir değişiklik yapmanıza gerek yok.
3- Javascript Kodu
<script defer='defer' onload='loadDIWComments();' src="https://www.blogger.com/static/v1/widgets/2271878333-widgets.js" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ function loadDIWComments(){ if (typeof(BLOG_attachCsiOnload) != 'undefined' && BLOG_attachCsiOnload != null) { window['blogger_templates_experiment_id'] = "templatesV1";window['blogger_blog_id'] = '226659892034912369';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d6286115367912778324','//blogsavar.blogspot.com/','226659892034912369'); _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 deneyiniz.', 'contactFormInvalidEmailMsg': 'Geçerli bir e-posta adresi gereklidir.', 'contactFormEmptyMessageMsg': 'Mesaj alanı boş bırakılamaz.', 'title': 'İletişim Formu', 'blogId': '226659892034912369', 'contactFormNameMsg': 'Adınız', 'contactFormEmailMsg': 'E-posta adresiniz', 'contactFormMessageMsg': 'Mesajınız', 'contactFormSendMsg': 'Gönder', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));} //]]> </script>
Not: Yukarıda blogsavar.blogspot.com yazan yere kendi sitenizin adını yazıyorsunuz. Ayrıca BlogID bölümünde yazan ve 226659892034912369 ile başlayan numaralar yerine kendi sitenizin BlogID numarasını yazacaksınız.
BlogID numaranızı öğrenmek için Blogger Kumanda Paneline giriş yapıp link kısmında yer alan ve sitenizin BLogID numarasını gösteren numarayı kopyalayınız.
Son Haliyle İletişim Formu Görüntüsü
