4 Style Subscribe Box (Kotak Berlangganan) Responsive Untuk Blogger

4 Style Subscribe Box (Kotak Berlangganan) Responsive Untuk Blogger
Widget Subscribe box atau kotak berlangganan adalah salah satu widget penting yang harus ada pada situs web kamu. Kotak berlangganan sudah tersedia di feedburner, namun karena tampilannya yang kurang menarik saya saran kan kamu untuk menggunakan salah satu kotak berlangganan yang akan saya bagikan kali ini.

Lebih kurang seperti Contact form, Subscribe box berfungsi juga untuk menghubungkan pembaca blog kamu dan kamu sendiri dan pembaca dapat senantiasa mengikuti web kamu.

Jika kamu mempunyai tampilan Subscribe Box yang membosankan ada baiknya menggantinya dengan subscribe Box dibawah ini:

Responsive Subscribe Box style 1

Responsive Subscribe Box style 1

CSS

#subscribe-box {
    width: 300px;
    height: 350;
    background-color: #FFD403;
    padding-bottom: 20px;
    padding-top: 20px;
    text-align: center;
}

#subscribe-box .title {
    padding: 5px 25px;
    line-height: 30px;
    color: #392A16;
    text-align: center;
    font-size: 30px;
    font-weight: 700;
    font-family: Roboto, sans-serif;
}

#subscribe-box .title2 {
    font-size: 18px;
    font-weight: 700;
    font-family: Roboto, sans-serif;
    text-align: center;
}

#subscribe-box p {
    font-size: 13px;
    font-weight: 400;
    color: #392A16;
    line-height: 20px;
    padding: 10px 20px 0 20px;
    margin: 0;
    padding-bottom: 20px;
}

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

#subscribe-box .emailfield input {
    color: #392A16;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    width: 92%;
    border: 1px solid #2C1B2C;
    border-radius: 5px;
}

#subscribe-box .emailfield input:focus {
    outline: none;
}

#subscribe-box 

.emailfield .submitbutton {
    background: #C61062;
    border-radius: 5px;
    padding: 10px;
    text-transform: uppercase;
    color: #fff!important;
    border: 1px solid #2C1B2C;
    outline: none;
    cursor: pointer;
    width: auto;
    font-weight: 800;
    font-family: lato, sans-serif;
    box-shadow: inset 0 2px 3px rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.4);
    text-align: center;
}

#subscribe-box .emailfield .submitbutton:active {
    padding-top: 11px;
    padding-bottom: 9px;
    box-shadow: 0px 1px 0px 0px #3293ba;
}

#subscribe-box .emailfield .submitbutton:hover {
    background: #ECCE4A;
} 

HTML


<!-- Subscription style 1 by Iamtomys -->
<div id='subscribe-box'> 
  <center>
    <img border="0" data-original-height="78" data-original-width="78" src="https://4.bp.blogspot.com/-fGqv191X9Y8/W7KZTNZTLOI/AAAAAAAAB0s/WJqBg5lDCsgE4wLThF2oG_be1mgRPKycQCLcBGAs/s1600/subscribe-now-our-newsletter-flat-260nw-620763956.jpg" />
  </center>
  <div class='title'>SUBSCRIBES
  </div> 
  <div class='title2'>TO OUR NEWSLETTER
  </div>
  <p>Dapatkan Informasi Terbaru Gratis Yang Kami Kirim Ke E-Mail Anda.
  </p> 
  <div class='emailfield'> 
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=id feedburner kamu disini;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> 
      <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Name...&quot;;}' onfocus='if (this.value == &quot;Enter Your Name...&quot;) {this.value = &quot;&quot;;}' value='Enter Your Name...'/> 
      <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email...&quot;) {this.value = &quot;&quot;;}' value='Enter Your Email...'/> 
      <input name='uri' type='hidden' value='id feedburner kamu disini'/> 
      <input name='loc' type='hidden' value='en_US'/> 
      <input class='submitbutton' type='submit' value='Subscribe'/> 
    </form> 
  </div> 
</div>

Responsive Subscribe Box style 2

Responsive Subscribe Box style 2

CSS

#subscribe-box {
    width: 95%;
    height: 350;
    background-color: #f0f0f0;
    padding-bottom: 30px;
    padding-top: 10px;
}

#subscribe-box .title {
    padding: 5px 25px;
    line-height: 30px;
    color: #41495b;
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    font-family: Roboto, sans-serif;
}

#subscribe-box .title2 {
    color: #41495b;
    font-size: 18px;
    font-weight: 700;
    font-family: Roboto, sans-serif;
    text-align: center;
    font-style: italic;
}

#subscribe-box p {
    font-size: 13px;
    font-weight: 400;
    color: #555;
    line-height: 20px;
    padding: 10px 20px 0 20px;
    margin: 0;
    padding-bottom: 20px;
    text-align: center;
}

#subscribe-box .emailfield {
    padding: 0px 10px 10px;
    background-color: #ccc;
    width: 70%;
}

#subscribe-box .emailfield input {
    color: #aaa;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    width: 97%;
    border: none;
}

#subscribe-box .emailfield .submitbutton {
    background: #71b406;
    border-radius: 0px;
    padding: 10px;
    text-transform: uppercase;
    color: #fff!important;
    outline: none;
    cursor: pointer;
    width: 100%;
    font-weight: 800;
    font-family: Roboto, sans-serif;
    text-align: center;
}

#subscribe-box .emailfield .submitbutton:active {
    padding-top: 11px;
    padding-bottom: 9px;
    box-shadow: 0px 1px 0px 0px #3293ba;
}

#subscribe-box .emailfield .submitbutton:hover {
    background: #555;
}

.sidebar-cta-picture-div {
    position: absolute;
    float: right;
    left: 75%;
}

@media screen and (max-width: 510px) {
    #subscribe-box .emailfield input {
        width: 93%;
    }

    #subscribe-box .emailfield {
        width: 60%;
    }

    .sidebar-cta-picture-div {
        ;
    left: 65%;
    }
@media screen and (max-width: 450px) {
        #subscribe-box .emailfield input {
width: 90%;
    }

    #subscribe-box .emailfield {
        width: 50%;
    }

    .sidebar-cta-picture-div {
        ;
    left: 60%;
    }
 
@media screen and (max-width: 300px) {
        #subscribe-box .emailfield input {
width: 85%;
    }

    .sidebar-cta-picture-div {
        ;
    left: 55%;
    }

HTML

<!-- Subscription style 2 by Iamtomys -->
<div id='subscribe-box'> 
  <div class='title'>SUBSCRIBES
  </div> 
  <div class='title2'>TO OUR NEWSLETTER
  </div>
  <p>Dan dapatkan eBook gratis untuk anda hari ini!
  </p> 
  <div class='emailfield'> 
    <div class="sidebar-cta-picture-div">
      <img border="0" height="150" src="https://3.bp.blogspot.com/-WLgnCDLdPms/W7Kl2pSLgYI/AAAAAAAAB1U/vagY_6CSegg6Yd4XeHwz3NcabeTp_mn5wCLcBGAs/s200/free-ebook.png" width="100" />
    </div>
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=id feedburner kamu disini;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> 
      <input type='text' name='name' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Name...&quot;;}' onfocus='if (this.value == &quot;Enter Your Name...&quot;) {this.value = &quot;&quot;;}' value='Enter Your Name...'/> 
      <input type='text' name='email' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Enter Your Email...&quot;;}' onfocus='if (this.value == &quot;Enter Your Email...&quot;) {this.value = &quot;&quot;;}' value='Enter Your Email...'/> 
      <input name='uri' type='hidden' value='id feedburner kamu disini'/> 
      <input name='loc' type='hidden' value='en_US'/> 
      <input class='submitbutton' type='submit' value='Subscribe'/> 
    </form> 
  </div> 
</div>

Responsive Subscribe Box style 3

Responsive Subscribe Box style 3

CSS

#subscribe-box {
    width: 300px;
    height: 350;
    border-radius: 5px;
    background-color: #0586E4;
    padding-bottom: 20px;
    padding-top: 20px;
}

#subscribe-box .title {
    padding: 10px 25px;
    line-height: 30px;
    font-family: "proxima-nova", sans-serif !important;
    color: #fff;
    text-align: center;
    font-size: 25px;
    font-weight: 700;
}

#subscribe-box p {
    font-family: lato, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    line-height: 20px;
    padding: 10px 20px 0 20px;
    margin: 0;
    padding-bottom: 20px;
}

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

#subscribe-box .emailfield input {
    color: #ddd;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    font-family: &#39;
    Droid Serif&#39;;width: 92%;
    border: 1px solid #ddd;
    border-radius: 2px;
}

#subscribe-box .emailfield input:focus {
    outline: none;
}

#subscribe-box .emailfield .submitbutton {
    background: #FFC61E;
    padding: 10px;
    text-transform: uppercase;
    color: #444!important;
    border: 1px solid #AAAD69;
    outline: none;
    cursor: pointer;
    width: 100%;
    font-weight: 800;
    font-family: lato, sans-serif;
}

#subscribe-box .emailfield .submitbutton:active {
    padding-top: 11px;
    padding-bottom: 9px;
    box-shadow: 0px 1px 0px 0px #3293ba;
}

#subscribe-box .emailfield .submitbutton:hover {
    background: #ECCE4A;
} 

HTML

<!-- Subscription style 3 by Iamtomys -->
<div id='subscribe-box'> 
  <div class='title'> Join our Newsletter 
  </div> 
  <p>Dapatkan Informasi Terbaru Gratis Yang Kami Kirim Ke E-Mail Anda.
  </p> 
  <div class='emailfield'> 
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=id feedburner kamu disini;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> 
      <input type='text' 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;;}' value='Your Name'/> 
      <input 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 name='uri' type='hidden' value='id feedburner kamu disini'/> 
      <input name='loc' type='hidden' value='en_US'/> 
      <input class='submitbutton' type='submit' value='Subscribe Now!'/> 
    </form> 
  </div> 
</div>

Responsive Subscription style 4

Responsive Subscribe Box style 4

CSS

be-box {
    width: 300px;
    height: 400;
    border-radius: 0px;
    background-color: #eee;
    padding-bottom: 20px;
    padding-top: 0px;
}

#subscribe-box .title {
    background-color: rgb(102, 102, 102);
    color: rgb(255, 255, 255);
    display: block;
    line-height: 30px;
    position: relative;
    z-index: 2;
    box-shadow: 0 6px 9px rgba(0,0,0,.4),inset 0 -1px 12px rgba(0,0,0,.4);
    padding: 5px;
    font-size: 20px;
    font-weight: bold;
}

#subscribe-box p {
    font-family: proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: #383838;
    line-height: 20px;
    padding: 10px 20px 0 20px;
    margin: 0;
    padding-bottom: 20px;
}

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

#subscribe-box .emailfield input {
    box-shadow: inset 0 2px 3px rgba(0,0,0,.5);
    color: #ddd;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
    font-family: &#39;
    Droid Serif&#39;;width: 92%;
    border: 1px solid #ddd;
    border-radius: 2px;
}

#subscribe-box .emailfield input:focus {
    outline: none;
}

#subscribe-box .emailfield .submitbutton {
    background: #FFC61E;
    padding: 10px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid #AAAD69;
    outline: none;
    cursor: pointer;
    width: 100%;
    font-weight: 800;
    font-family: proxima-nova,"Helvetica Neue",Helvetica,Arial,sans-serif;
}

#subscribe-box .emailfield input:focus {
    outline: none;
}

#subscribe-box .emailfield .submitbutton {
    background: #ff6200;
    color: #FFFFFF;
    padding: 10px;
    text-transform: uppercase;
    border: 1px solid #d05000 !important;
    width: 100%;
    font-size: 1em;
    box-shadow: inset 0 2px 3px rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,0,0,.4);
    text-shadow: 0 1px 2px rgba(0,0,0,.5);
    font-weight: 700;
    padding: 4% 7%;
}

#subscribe-box .emailfield .submitbutton:active {
    padding-top: 11px;
    padding-bottom: 9px;
    box-shadow: 0px 1px 0px 0px #3293ba;
}

#subscribe-box .emailfield .submitbutton:hover {
    background: #d05000;
}

HTML

<!-- Subscription style 4 by Iamtomys -->
<div id='subscribe-box'> 
  <div class='title'> Join our Newsletter 
  </div>
  <img alt="logo" title="logo" src="URL GAMBAR KAMU DISNI" display: block;margin: 0 auto;width="200" height="100" style="float:center;padding-top:30px;border-radius:0;overflow:hidden" />
  <p>Dapatkan Informasi Terbaru Gratis Yang Kami Kirim Ke E-Mail Anda.
  </p> 
  <div class='emailfield'> 
    <form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open(&apos;http://feedburner.google.com/fb/a/mailverify?uri=id feedburner kamu disini;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'> 
      <input type='text' 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;;}' value='Your Name'/> 
      <input 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 name='uri' type='hidden' value='id feedburner kamu disini'/> 
      <input name='loc' type='hidden' value='en_US'/> 
      <input class='submitbutton' type='submit' value='Subscribe Now!'/> 
    </form> 
  </div> 
</div>

Note: jangan lupa untuk mengisiid feedburner kamu.

Saya berharap kamu menyukai Subscribe box yang saya bagikan ini dan kamu memutuskan membagikan artikel ini atau berkomentar dibawah ini.

Jangan lupa untuk mengikuti saya di Facebook ataupun Twitter.

0 Response to "4 Style Subscribe Box (Kotak Berlangganan) Responsive Untuk Blogger"

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel