4 Widget Kotak Berlangganan Keren Responsive 2017

4 Widget Kotak Berlangganan Keren Responsive 2017
Istilah lain kotak berlangganan ini adalah Widget Subscribe for Blogger atau Subscribe Box.

Sering juga dikatakan Newsletter Email Subscription Widget. Ya apapun istilah dan penyebutannya yang penting membuat kotak berlangganan.

Dibawah ini ada beberapa widget Subscribe Box Keren Responsive yang bisa dipilih dan dibuat, dan pastikan juga ikuti langkah2nya dengan cermat. Jangan sampai salah.

Baca Juga: Pengaruh Mengganti / Mengubah Blogger Template bagi SEO

4 Widget Kotak Berlangganan Keren Responsive 2017


#1. Dark Background with Social Icons

It's the cute email newsletter subscribe box widget for blogger that created with pure css with fontawesome icons.

By using this email newsletter forms you can also use your social media links like Facebook, twitter, linkedin, google plus, pinterest, vine and instagram social icons.

4 Widget Kotak Berlangganan Keren Responsive 2017

1. Blogger > Edit HTML Template
2. Simpan kode dibawah ini, tempatkan di bawah <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'/>

Nb: Jika kode BootstrapCDN - Font Awesome diatas sudah ada di dalam template, tidak perlu ditambahkan lagi.

3. Copas kode dibawah ini sebelum </style>

#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}

4. Save template!
5. Layout > Add a Gadget > HTML / JavaScript
6. Copas kode dibawah ini di dalam HTML / JavaScript tsb

<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=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>

7. Ok sampai disini sudah selesai.

Nb: Ubah semua tag tagar (#) dengan link sosial dan ubah "Your-User-Name" dengan ID FeedBurner milik sendiri. Ok.

#2. Colorful Widget with Name Box

4 Widget Kotak Berlangganan Keren Responsive 2017

This subscribe box widget is created with simple css with colorful background. This subscribe box widget is created with simple css with colorful background.

1. Blogger > Template > Edit HTML
2. Copas kode dibawah ini diatas kode </style>

#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;}

3. Layout > Add a Gadget > HTML / JavaScript
4. Copas kode dibawah ini:

<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=USER-NAME" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=USER-NAME, '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="USER-NAME" />
<input name="loc" type="hidden" value="en_US" />
<input class="submitbutton" type="submit" value="Subscribe Now" />
</form>
</div>
</div>

5. Save template. Ok!

Nb: Ubah semua "User-Name" dengan ID FeedBurner pribadi.

#3. Subscribe Blog Mas Sugeng Riyadi (Evomagz / Fastest Magz)

4 Widget Kotak Berlangganan Keren Responsive 2017

1. Blogger > Layout
2. Add a Gadget > HTML / JavaScript
3. Copas semua kode ini:

<div class='widget enews-widget' id='enews-ext-2'><div class='widget-wrap'><div class='enews'><h4 class='widget-title widgettitle'>BERLANGGANAN VIA EMAIL</h4><form action='https://feedburner.google.com/fb/a/mailverify' method='post' target='popupwindow' onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=#####', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><p>Ayo Berlangganan di Blog Kita, Gengs.</p><input type='text' name='email' placeholder='Alamat Email'/><input type='hidden' value='#####' name='uri'/><input type='hidden' name='loc' value='en_US'/><input type='submit' value='BERLANGGANAN'/></form></div></div></div><style type='text/css'>.enews-widget {background-color:#38424B;color:#FFF;padding:20px !important;margin-top:10px}.enews-widget h4 {font:17px/18px 'Oswald',Arial;margin:0 0 20px 0}.enews .screenread {height:1px;left:-1000em;overflow:hidden;position:absolute;top:-1000em;width:1px}.enews-widget input {font-size:15px;margin-bottom:15px;box-sizing:border-box;background-color:#FFF;border:2px solid #FFF;color:#333;padding:9px 11px;width:100%}.enews-widget input[type="submit"] {font:16px/20px "Oswald",Arial;background-color:#01AEFF;color:#FFF;margin:0;width:100%;border:none;cursor:pointer}.enews-widget input[type="submit"]:hover {background-color:#0173B2}</style>

4. Simpan widget tersebut. Ok, selesai!

#4. CSS3 Email Subscribe Widget for Blogger

4 Widget Kotak Berlangganan Keren Responsive 2017

1. Copas 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'/>

2. Add a Gadget > JavaScript

<style type='text/css'> #subscribebox{background:#7fb1d1;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} .welcome-text ul{list-style:none;margin:0;padding:0;text-align:center} .welcome-text ul li{display:inline;margin:0 15px 0 0;border-bottom:none} .follow-subscribe-social ul li:last-child{margin:0} .welcome-text 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} .welcome-text 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} </style> <div id="subscribebox"> <div class="welcome-text"> <ul> <li><font color="#FFFFFF"><span style="font-style:italic;">Get our fresh tutorials delivered right through into your inbox</span></font></li> </ul> </div> <p>Subscribe to Our Newsletter</p> <form class="subscribe" action='http://feedburner.google.com/fb/a/mailverify?uri=blogspot/##### ' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=blogspot/##### , &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> <input name='uri' type='hidden' value='blogspot/######'/> <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>

3. Ubah semua tulisan yang dimerahi diatas menjadi kepunyaan pembaca. Save! Ok!

Baca Juga: Cara Mengetahui Komentar Blogger Dibalas Orang Lain

Itulah kotak berlangganan (widget subscribe box for blogger blogspot) keren dan responsive serta layak untuk digunakan.*

Labels: Desain Blogger

Thanks for reading 4 Widget Kotak Berlangganan Keren Responsive 2017. Please share this article.
1 Komentar untuk "4 Widget Kotak Berlangganan Keren Responsive 2017"

Izin pake yg no satu om

Situs sedang dalam masa pengembangan; banyak gambar yang error. Jika ada yang ingin ditanyakan, jangan ragu bertanya. OOT? Siyap!

SEO Kraken Premium Blogger Template