Membuat Widget Email Subcribe Keren dan Responsive di Blog

iMledoz – Kali ini saya ingin share bagaimana Cara Membuat Widget Email Subscription Responsive di Blogger, kali ini widget email subscribe yang akan saya bagikan telah dimodifikasi agar tampak lebih profesional.

Anda dapat menyesuaikan kode sesuai yang Anda inginkan, jika Anda memiliki saran atau pertanyaan tentang tutorial di atas Anda dapat berbagi di dalamkotak komentar di bagian bawah blog ini.

Langsung saja ke topik “Cara Membuat Widget Email Subscription Responsive di Blog “

Petama cari kode </head> kemudian letakkan kode dibawah ini diatas kode </head>

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>

Disini saya akan memberikan 2 model widget Email Subscribe untuk Blogger yang kesemuanya tentu Responsive.

Model # 1

1. Masuk ke akun blogger Anda,  Dashboard  >> Template >> Edit html

2. Mencari kode berikut ]]></ b:skin>

3. Setelah ketemu, letakkan kode dibawah ini, di atas kode ]]></ b:skin>

#subscribebox{background:#576269;padding:20px;font-family:&#39;PT Sans&#39;,sans-serif;}

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

#subscribebox p{color:#fff;font-size:15px;text-align:center;font-weight:700}

.follow-subscribe-social{margin:0 0 15px;padding:0 0 14px;border-bottom:#858585 solid 1px}

.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:.928571em;background-color:rgba(255,255,255,0.2);text-align:center;color:#fff}

.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:none;background-color:#F35D5C;-webkit-transition:background-color .2s ease-in-out;-moz-transition:background-color .2s ease-in-out;-ms-transition:background-color .2s ease-in-out;-o-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}

.subscribe-button:hover{background-color:#f1d640}

.subscribe-button:focus{outline:0}

.creadit a{color: #A7A6A6; float: right; font-size: 8px;}

4. Kemudian Simpan Template

5. Silahkan masuk ke menu Layout (tata letak) >> Tambah Gadget ( Add Gadget ) >> HTML/Javascript

6.Letakkan kode dibawah ini di dalam kotak HTML yang disediakan

<div id="subscribebox">

<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-dribbble"></i></a></li>

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

</ul>

</div>

<p>Subscribe to my 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=ID FEEDBURNER-ANDA, &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>

<div class="creadit">

<a href="http://bloggingpasuruan.blogspot.co.id" rel="dofollow" target="_blank"> Get This Widget</a></div>

7. Simpan dan lihat hasilnya…….

Berikutnya Widget Subscribe Model # 2

1. Masuk ke akun blogger Anda,  Dashboard >> Template >> Edit html

2. Mencari kode berikut ]]></ b:skin>

3. Setelah ketemu, letakkan kode dibawah ini, di atas kode ]]></ b:skin>

#subscribe-box {background-color:#0CC388;font-family: 'PT Sans', sans-serif;}

#subscribe-box p {font-size:22px;color:#fff;line-height:20px;padding:10px 20px 0 20px;margin:0;}

#subscribe-box .emailfield {padding:0px 20px 10px;}

#subscribe-box .emailfield input {background:#f9f9f9;color:#bbb;padding:10px;margin-top:10px;font-size:13px;width:91%;border:0;transition:all 0.4s ease-in-out;}

#subscribe-box .emailfield input:focus {background:#fff;outline:none;color:#888;}

#subscribe-box .emailfield .submitbutton {background:#444;color:#fff;text-transform:uppercase;font-weight:700;font-size:18px;font-family: 'PT Sans', sans-serif;;border:none;outline:none;width:100%;cursor:pointer;border-radius:3px;transition:all 0.4s ease-in-out;}

#subscribe-box .emailfield .submitbutton:active {outline:none;border:none;background:#fff;color:#e25734;}

#subscribe-box .emailfield .submitbutton:hover{background:#fff;color:#444;}

.creadit a{color: #A7A6A6; float: right; font-size: 8px

4. Kemudian Simpan Template

5. Silahkan masuk ke menu Layout (tata letak) >> Tambah Gadget ( Add Gadget ) >> HTML/Javascript

6.Letakkan kode dibawah ini di dalam kotak HTML yang disediakan

<div id="subscribe-box">

<center>

Subscribe for our all latest news and updates</center>

<div class="emailfield">

<form action="http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ID FEEDBURNER-ANDA, 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">

<input name="name" onblur="if (this.value == &quot;&quot;) {this.value = &quot;Your Name&quot;;}" onfocus="if (this.value == &quot;Your Name&quot;) {this.value = &quot;&quot;;}" type="text" value="Your Name" />

<input 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;;}" type="text" value="Your Email" />

<input name="uri" type="hidden" value="ID FEEDBURNER-ANDA" />

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

<input class="submitbutton" type="submit" value="Subscribe Now" />

</form>

</div>

</div>

<div class="creadit">

<a href="http://bloggingpasuruan.blogspot.co.id/" rel="dofollow" target="_blank"> Get This Widget</a></div>

7. Simpan dan lihat hasilnya…..

Anda bisa langsung cek dari HP android anda, apakah widget diatas benar-benar responsive atau tidak…… 100% Responsive dech !

Semoga bermanfaat…..