Wednesday, March 1, 2017

Membuat Widget Email Subscribe Responsive di Blogger

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 )




Cara Membuat Widget Email Subscribe Responsive di Blogger


# Widget Email Subscribe Responsive Background Terang

Membuat Widget Email Subscribe Responsive di Blogger
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

Membuat Widget Email Subscribe Responsive di Blogger
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>

Membuat Widget Email Subscribe Responsive di Blogger


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…..

Elm0D

Author & Editor

Has laoreet percipitur ad. Vide interesset in mei, no his legimus verterem. Et nostrum imperdiet appellantur usu, mnesarchum referrentur id vim.

0 comments:

Post a Comment

Navigate» Become author for this Blog

Manual Categories