Blogger İletişim Formu Eklentisi - Blogger Eklentileri

 Blogunuza şık bir görünüm katacak ve ziyaretçilerinizin sizle iletişime geçmesi için mail yazmak yerine direk sizin blogunudan sizinle iletişime geçmelerini sağlayacak iletişim formu eklentisini sizlerle paylaşıyorum.

Nasıl Eklenir ?

• Öncelikle Blogger paneline giriş yapın. Yerleşim → Gadget Ekle → İletişim Formu yolunu izleyerek İletişim Formunu ekleyin ve Düzenlemeyi kaydet butonuna basın. (Önceden eklediyseniz bu adımı atlayın.)
• Eklentinin görünürlüğünü kaldırmak için Tema → HTML'yi Düzenle yolunu izleyin. Kodların içerisine her hangi bir yere bir kere tıklayın, Ctrl + F yardımı ile </head> kapanış etiketini aratın ve aşağıdaki kodu etiketin hemen üzerine ekleyip Temayı kaydet butonuna basıp değişiklikleri kaydedin.

<style type='text/css'>
#ContactForm1,#ContactForm1 br{display:none}
</style>

• Ardından Sayfalar → Yeni Sayfa yolunu izleyin ve aşağıda verilen iki kodu ard arda görselde gözüktüğü gibi sayfanın HTML bölümüne ekleyin.

<form name="contact-form">
<div class='formcolumn1'>
<input id="ContactForm1_contact-form-name" name="name" placeholder='İsminiz' size="30" type="text" value="" />
</div>
<div class='formcolumn2'>
<input id="ContactForm1_contact-form-email" name="email" placeholder='Eposta Adresiniz' size="30" type="text" value="" />
</div>
<div class='formcolumn3'>
<textarea cols="25" id="ContactForm1_contact-form-email-message" name="email-message" placeholder='Mesajınız' rows="7"></textarea>
</div>
<div class='formcolumn4'>
<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>

<style scoped="" type="text/css">
#ContactForm1,#comments{display:none}
#ContactForm1_contact-form-name,#ContactForm1_contact-form-email{display:inline-block;width:100%;height:auto;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-email-message{font-family:'Roboto';width:100%;height:250px;margin:10px auto;padding:14px;background:#fff;color:#222;border:1px solid rgba(0,0,0,0.08)}
#ContactForm1_contact-form-name:focus,#ContactForm1_contact-form-email:focus,#ContactForm1_contact-form-email-message:focus{background:#fff;outline:none;border-color:rgba(0,0,0,0.18)}
#ContactForm1_contact-form-submit{background:#fff;color:#5f6368;font-size:16px;width:161px;height:45px;float:left;padding:0 0 0 20px;margin:10px 0 3px 5px;cursor:pointer;border:none;border-radius:24px;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)}
.formcolumn4{position:relative}
.formcolumn4:before{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxEpoQPnS6nQmQxFqoitN8HEvuaCY7sOru1xdDr1hRbmwnM8YuhBLKRHafREiYRAa6BFDKfPBHbcTZC8Ywxw58Xp_WmtmQc9XUSpSdVGbF1ahzfeS8-cj3Klt5tmyPD3LwhgCK16i-2I6N/s1600/mailme.png);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-error-message,#ContactForm1_contact-form-success-message{margin-top:35px}
form{color:#888}
.formcolumn1,.formcolumn2{float:left;width:50%}
.formcolumn1,.formcolumn2{margin:0 0 10px 0;padding:0 10px 0 0}
.formcolumn2{padding:0 0 0 10px}
@media only screen and (max-width:768px){.formcolumn1,.formcolumn2{width:100%;padding:0}}
</style>

<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'] = '8249729980980245035';BLOG_attachCsiOnload(''); }_WidgetManager._Init('//www.blogger.com/rearrange?blogID\x3d8249729980980245035','//www.htmlevi.com/','8249729980980245035');
_WidgetManager._RegisterWidget('_ContactFormView', new _WidgetInfo('ContactForm1', 'footer1', null, document.getElementById('ContactForm1'), {'contactFormMessageSendingMsg': 'Gönderiliyor...', 'contactFormMessageSentMsg': 'Mesajınız İletildi.', 'contactFormMessageNotSentMsg': 'Mesajınız İletilemedi. Lütfen Tekrar Deneyin.', 'contactFormInvalidEmailMsg': 'Bir Mail Adresi Eklemelisiniz.', 'contactFormEmptyMessageMsg': 'Lütfen Bir Mesaj Girin.', 'title': 'Contact Form', 'blogId': '7342017194742683056', 'contactFormNameMsg': 'Name', 'contactFormEmailMsg': 'Email', 'contactFormMessageMsg': 'Message', 'contactFormSendMsg': 'Send', 'submitUrl': 'https://www.blogger.com/contact-form.do'}, 'displayModeFull'));
//]]>
</script>

• İkinci kod içerisinde 4 adet bulunan 8249729980980245035 kodunu kendi blog ID'niz ile www.htmlevi.com linkini kendi blog linkiniz ile değiştin.
• Sayfa ayarları bölümünden Seçenkler kısmında İzin verme, mevcut olanı gizle. HTML'yi olduğu gibi göster. Satır sonları için ENTER tuşuna bas. seçeneklerini işaretleyin Tamamlandı butonuna basın ve Yayınla butonuna basıp sayfayı yayınlayın.
• Not : Özel domain kullanıyorsanız alan adınzı başına www koyarak ekleyin. Eğer blogspot domain kullanıyorsanız www koymadan ekleyin.

• DEMO

#Blogger Eklentileri #Blogger Temaları #Yeni Blogger Eklentileri #Blogger İletişim Formu Eklentisi #İletişim Eklentisi #Blogger Temaları #Blogspot Eklentileri #Blogsot Temaları #Türkçe Blogger Temaları #Blogger İpuçları #Bedava Blogger Temaları

 Kaynak : https://www.arlinadzgn.com/2018/05/cara-terbaru-memasang-formulir-kontak-di-blog.html