Membuat Widget Email Subscribe Responsive di Blogger

CrepictDGZ – Assalamualaikum Sobat Bloggerku. Kali ini saya akan share Membuat Widget Email Subscribe Responsive di Blogger. Dan saya akan memberikan 2 style untuk Widget Email Subscribe Responsive yang bisa Sobat pasang di posisi sidebar atau dibawah postingan blog.

Namun sebelum pemasangan Widget Subscribe Email Feedburner ini Sobat harus terlebih dahulu membuat akun di situs Feedburner.com agar mendapatkan Link sebagai ID Feedburner yang nantinya Link tersebut kita pasangkan di dalam script widget agar berfungsi sebagaimana mestinya ( lihat tutorial dibawah ya...Sob )

Baca juga :

Cara Terbaru Daftarkan Blog ke RSS Feedburner

 

Cara Membuat Widget Email Subscribe Responsive di Blogger

# Widget Email Subscribe Responsive Background Terang

Letakkan kode CSS dibawah ini setelah kode <style> atau sebelum kode ]]></b:skin>

/* CSS Email Subscribe */

#crepictdgzbox{border:1px solid #e5e5e5;padding:20px;margin:20px 0;font-family:&#39;PT Sans&#39;,sans-serif;}

.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}

#crepictdgzbox p{color:#394347;font-size:25px;text-align:center;font-weight:700;margin:0 0 1em 0;}

.follow-subscribe-social{margin:0;padding:0;}

.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}

.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}

.follow-subscribe-social ul li:last-child{margin:0}

.follow-subscribe-social ul li a{font-size:17px;color:#394347;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}

.follow-subscribe-social ul li a:hover{color:#1C97DE}

form.subscribe{margin-top:-7px}

form.subscribe input{display:block;width:100%}

.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:1em;background-color:#DEDEDE;text-align:center;color:#394347;border-radius:5px;}

.subscribe-email:focus{outline:0}

form.subscribe .placeholder{color:#cacaca}

form.subscribe input:-ms-input-placeholder{color:#cacaca}

form.subscribe input::-webkit-input-placeholder{color:#cacaca}

form.subscribe input:-moz-placeholder{color:#fafafa}

form.subscribe input::-moz-placeholder{color:#fafafa}

.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border-radius:5px;background-color:#576269;border:none;}

.subscribe-button:hover{background-color:#398DCC;}

.subscribe-button:focus{outline:0}

# Widget Email Subscribe Responsive Background Gelap

Letakkan kode CSS dibawah ini setelah kode <style> atau sebelum kode ]]></b:skin>

/* CSS Email Subscribe */

#crepictdgzbox{background:#394347;padding:20px;margin:20px 0;font-family:&#39;PT Sans&#39;,sans-serif;}

.widget_follow_subscribe .widget-detail{padding:36px 30px 40px}

#crepictdgzbox p{color:#fff;font-size:25px;text-align:center;font-weight:500;margin:0 0 1em 0;}

.follow-subscribe-social{margin:0;padding:0;}

.follow-subscribe-social ul{list-style:none;margin:0;padding:0;text-align:center}

.follow-subscribe-social ul li{display:inline;margin:0 15px 0 0;border-bottom:none}

.follow-subscribe-social ul li:last-child{margin:0}

.follow-subscribe-social ul li a{font-size:17px;color:#cacaca;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-ms-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out}

.follow-subscribe-social ul li a:hover{color:#fff}

form.subscribe{margin-top:-7px}

form.subscribe input{display:block;width:100%}

.subscribe-email{height:45px;border:none;margin:0 0 10px;font-size:1em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff;border-radius:5px;}

.subscribe-email:focus{outline:0}

form.subscribe .placeholder{color:#cacaca}

form.subscribe input:-ms-input-placeholder{color:#cacaca}

form.subscribe input::-webkit-input-placeholder{color:#cacaca}

form.subscribe input:-moz-placeholder{color:#fafafa}

form.subscribe input::-moz-placeholder{color:#fafafa}

.subscribe-button{height:45px;font-weight:700;font-size:16px;color:#fff;text-transform:uppercase;border-radius:5px;background-color:#1C97DE;border:none;}

.subscribe-button:hover{background-color:#398DCC;}

.subscribe-button:focus{outline:0}

# Kustomisasi

Untuk meletakkan Widget Email Subscribe Responsive di posisi sidebar :

1. Masuk ke Blogger pilih Layout atau Tata Letak >> Add a Gadget >> HTML Javascript

2. Masukkan kode HTML dbawah ini di dalam kotak HTML 

<div id="crepictdgzbox">

<p>Subscribe to Our Newsletter</p>

<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=ID-Feedburner-Anda' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input name='uri' type='hidden' value='ID-Feedburner-Anda'/>

<input name='loc' type='hidden' value='en_US'/>

<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>

<input class="subscribe-button" type="submit" value="Subscribe" />

</form>

<div class="follow-subscribe-social">

<ul>

<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>

</ul>

</div>

</div>

Untuk meletakkan Widget Email Subscribe Responsive di bawah Postingan Blog :

1. Masuk ke Blogger pilih Theme >> Edit HTML  

2. Cari kode <data:post.body/> dengan cara menekan tombol Ctrl + F, Nanti akan ada 3 kode <data:post.body/> yang sama dalam setiap template Blog.

3. Letakkan kode HTML berikut setelah kode <data:post.body/> yang kedua atau yang ketiga

<div id="crepictdgzbox">

<p>Subscribe to Our Newsletter</p>

<form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=YOUR-USER-NAME, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>

<input name='uri' type='hidden' value='YOUR-USER-NAME'/>

<input name='loc' type='hidden' value='en_US'/>

<input class="subscribe-email" type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Your Email&quot;;}' onfocus='if (this.value == &quot;Your Email&quot;) {this.value = &quot;&quot;;}' value='Your Email'/>

<input class="subscribe-button" type="submit" value="Subscribe" />

</form>

<div class="follow-subscribe-social">

<ul>

<li><a href="#" target="_blank"><i class="fa fa-facebook"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-twitter"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-linkedin"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-google"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-pinterest-p"></i></a></li>

<li><a href="#" target="_blank"><i class="fa fa-instagram"></i></a></li>

</ul>

</div>

</div>

4. Kemudian Simpan template, dan lihat hasilnya….

Demikian tutorial Cara Membuat Widget Email Subscribe Responsive di Blogger, semoga bermanfaat. JIka ada kendala seputar tutorial dia atas, silahkan tinggalkan komentar yang tersedia dibawah posting blog ini.  Jangan lupa share ya Sob…..