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

byEmre KURTOĞLU -09:10

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>

ÖN İZLEME

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ı İ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>

ÖN İZLEME

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.

Widget