Kumpulan Script Widget Subscribe (berlangganan artikel) via Email di Blogger

Berikut ini berbagai kumpulan Script widget sidebar untuk berlangganan artikel di blog blogger.

Versi 1

Script nya sebagai berikut:

<style>
/* Newsletter Boxby www.ensiklopedia1.com  */
#container-newsletter{max-width: 100%;position: relative;margin: 10px;border:10px double #fafbfd;border-radius:18px;padding:20px 15px 25px 20px;background-image: linear-gradient(39deg, #2DCAD2 44%, #3283D4 0%);}
#container-newsletter h2,#container-newsletter h3{color:#fff;margin-bottom:15px}#container-newsletter h2:after,#container-newsletter h3:after{display:none}
#subscribe-box p{font-size:15px;color:#fff;margin:0 0 15px;padding:0;line-height:normal}
#subscribe-box .emailfield{margin:auto}
input{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;background-color:#fff;border:1px solid #ddd;color:#5a5a5a;font-weight:300;padding:10px 12px;width:100%}
#subscribe-box .emailfield input{padding:13px 20px;color:#aaa;border:0;font-size:14px;margin-bottom:16px;border-radius:99em;transition:all 0.2s cubic-bezier(0.4,0,0.2,1);transition-delay:0.2s}
#subscribe-box .emailfield input:focus{color:#222;outline:none;box-shadow:0 2px 0.8rem -0.8rem rgba(0,0,0,0.8),0 0 0 1px rgba(0,0,0,0.05);transition-delay:0s}
#subscribe-box .emailfield .submitbutton{background:rgba(255,255,255,.25);color:#fff;width:100%;font-size:15px;font-weight:bold;border:0;margin:auto;cursor:pointer;box-shadow:0 2px 3px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.13);transition:all 0.2s cubic-bezier(0.4,0,0.2,1)}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background:rgba(255,255,255,.35);color:#fff;box-shadow:0 3px 3px rgba(0,0,0,0.1), 0 3px 4px rgba(0,0,0,0.13)}
#subscribe-box .emailfield input:focus.submitbutton{color:#fff}
</style>

<div id='container-newsletter'>
 <h2 class='title'>Subscribe Newsletter</h2>
 <div id='subscribe-box'>
  <p>
   Dapatkan Update Artikel terbaru via e-mail.
  </p>
  <div class='emailfield'>
   <form action='https://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;https://feedburner.google.com/fb/a/mailverify?uri=ensiklopedia1&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
    <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Email Address&quot;;}' onfocus='if (this.value == &quot;Email Address&quot;) {this.value = &quot;&quot;;}' value='Email Address'/>
    <input name='uri' type='hidden' value='ensiklopedia1'/>
    <input name='loc' type='hidden' value='en_US'/>
    <input class='submitbutton' type='submit' value='Subscribe'/>
   </form>
  </div>
 </div>
</div>

Preview tampilannya:

Versi 2

Script nya sebagai berikut:

  <div id='byard-emailsubsocial'>
              <div class='heading'>
               Subscribe Newsletter
              </div>
                 <p>Dapatkan Update Artikel terbaru via e-mail.</p>
             <div class='emailsub'>
              <form action='http://feedburner.google.com/fb/a/mailverify' method='post'target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=ensiklopedia1', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
               <input type='text' name='name' placeholder='Nama' />
               <input type='text' name='email' placeholder='Alamat Email' />
               <input type="hidden" value="ensiklopedia1" name="uri"/>
               <input type="hidden" name="loc" value="en_US"/>
                        <input value="Daftarkan E-mail" class="button" type="submit" />
              </form>
              </div>
<p id='credits'>Feed: <a href='https://www.ensiklopedia1.com/feeds/posts/default'>Ensiklopedia 1</a></p>

             </div>
 <style type='text/css'>
     #byard-emailsubsocial {
      width: 100%;
      height: 330px;
      border: 1px solid #ddd;
        border-radius: 5px 5px 0px 0px;
     }
     #byard-emailsubsocial .heading {
padding: 15px 25px;
line-height: 35px;
font-size: 24px;
font-weight: 600;
font-family: open sans;
color: rgb(170, 170, 170);
text-align: center;
text-shadow: 0px 1px rgba(255, 255, 255, 0.75);
background: none repeat scroll 0% 0% rgb(247, 247, 247);
     }
   #byard-emailsubsocial p {
    font-family: open sans;
    font-size: 13px;
    color: rgb(170, 170, 170);
    line-height: 25px;
    padding: 10px 20px 0 20px;
    margin: 0;
   }
   #byard-emailsubsocial .emailsub {
    padding: 0px 20px 10px 20px;
   }
   #byard-emailsubsocial .emailsub input {
    color: rgb(170, 170, 170);
    padding: 10px;
    margin-top: 10px;
    font-size: 15px;
    font-family: open sans;
    width: 92%;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ccc;
    border-radius: 5px;
    transition:border 0.15s linear 0s, box-shadow 0.15s linear 0s, color 0.15s linear 0s;
   }
   #byard-emailsubsocial .emailsub input:focus {
    border-color:#F4836A;
    outline: none;
    box-shadow: 0 0 2px 1px #F4836A;
   }
   #byard-emailsubsocial .emailsub .button {
    background: #1B62D4;
    color: white!important;
    border:none;
    outline: none;
    border-bottom: 3px solid #2e7e85;
    transition:background .4s linear;
    width: 90%;
margin-top: 5%;   
margin-right: 5%;
    margin-left: 5%;
    font-weight: 600;
    cursor:pointer;
   }
   #byard-emailsubsocial .emailsub .button:hover{
    background: #4ddce7;
   }
#credits {
margin: 0 auto!important;
margin-top: -10px!important;
width: 160px;
}

     </style>

Preview tampilannya:

Selamat mencoba!