Material Tasarımlı Blogger E-posta ve İletişim Widget Kodları

19.2.17
Material Tasarımlı Blogger E-posta ve İletişim Widget Kodları

Material Tasarımlı Blogger E-posta ve İletişim Widget Kodları - Material blogger şablonlarında kullanabileceğiniz özel tasarımlı widgetler ile blogunuzu daha kullanışlı duruma getirebilirsiniz.

Material Tasarımlı E-posta Widget'i Nasıl Eklenir?


1- Blogger hesabınıza giriş yapın ve blogunuzun kumanda panelinde bulunan Yerleşim > (Sidebar) Gatget Ekle yolunu takip ederek HTML/JavaScript içerisine aşağıdaki HTML kodu ekleyin ve kaydedine. Aşağıdaki kod içerisinde işaretli olan yere blogspot/YRCZsC kendi blogunuzun e-posta takip kimliğini ekleyin.

<div class="container-subscribe card red">
<div class="row">
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=blogspot/YRCZsC', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="col s12">
<div class="row">
        <div class="input-field col s12">
<input class="email-field" name="email" id="email" type="email" class="validate"/>
<label for="email" data-error="wrong" data-success="right">Email</label>
<input type="hidden" value="blogspot/YRCZsC" name="uri"/><input type="hidden" name="loc" value="tr_TR"/>
<div class="center"><button class="submit btn btn-danger waves-effect waves-red white red-text" type="submit" />Subscribe</button>
</div>
</div>
</div>
</form>
</div>
</div>


2- Widget rengini değiştirmek istiyorsanız yukarıdaki kod içerisinde işaretlenmiş olan yeri aşağıdaki renk adı ile değiştirin. Başka renkler de kullanabilirsiniz.
  • red : kırmızı renk
  • blue : mavi renk
  • green : yeşil renk
  • grey darken2 : koyu gri renk
  • grey darken4 : siyaha yakın renk tonu

Material Tasarımlı Blogger E-posta ve İletişim Widget Kodları

Material Tasarımlı İletişim Widget'i Nasıl Eklenir?


Blogunuz kumanda panelinden Sayfalar > Yeni sayfa oluştur yolunu takip ederek yeni sabit sayfa oluşturmanız gerekiyor. Yeni sayfa içerisinde sol üst köşede bulunan HTML bölüme tıklayın ve aşağıdaki HTML kodları ekleyin. İletişim sayfanızın başlığını ve arama açıklamasını ekleyerek sayfanızı yayınlayabilirsiniz. Yine bu widget'in renklerini de yukarıdaki gibi değiştirebilirsiniz.

<form name="contact-form">
<div class="row">
<div class="input-field col s12">
<input id="ContactForm1_contact-form-name" name="name" type="text" value="" />
            <label class="" for="ContactForm1_contact-form-name">
                Adınız
            </label>
        </div>
<div class="input-field col s12">
<input id="ContactForm1_contact-form-email" name="email" type="text" value="" />
            <label for="ContactForm1_contact-form-email">
                E-posta adresiniz
                <span class="red-text">
                    *
                </span>
            </label>
        </div>
<div class="input-field col s12">
<textarea class="materialize-textarea" id="ContactForm1_contact-form-email-message" name="email-message"></textarea>
          <label for="ContactForm1_contact-form-email-message">
            Mesajınız
                <span class="red-text">
                    *
                </span>
           </label>  
        </div>
<div class="input-field col s12">
<button class="btn btn-danger waves-effect waves-red red" id="ContactForm1_contact-form-submit" type="button">GÖNDER</button>
         <br />
<div style="max-width: 222px; text-align: center; width: 100%;">
<div id="ContactForm1_contact-form-error-message">
</div>
<div id="ContactForm1_contact-form-success-message">
</div>
</div>
</div>
</div>
</form>


Eklemiş olduğunuz iletişim widget'inin çalışması için blogunuzda iletişim formu widget'inin kurulu olması gerekir.

Bu widgetler için herhangi bir CSS veya javaScript kodu eklemeniz gerekmez.
Faydalı mı?
Blogger
Disqus
Yorum Ekle

7 yorum

Bende böyle olmadı gönder kutusu küçücuk oldu yardım edin lütfen :(

Cevap

Merhaba Ruhsadan İnciler, kullanmış olduğunuz tema kodları arasında metarial CSS kodları dahil değilse bu widget'i kullanmanız uygun değil. Birkaç gün beklerseniz sayfaya ek olarak CSS kodlarını da eklerim.

Cevap

Beklerim tabiki sizden haber bekliyorum :)

Cevap

https://www.facebook.com/bloggereklentileri/

Cevap

Merhaba, benimle facebook üzerinden iletişime geçebilir misiniz?

Cevap

blogun eposta takip kimliğini nerden buluruz?

Cevap