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!

إرسال تعليق

Tulis Komentar (0)

أحدث أقدم