Subscribe Box atau biasa kita sebut juga
kotak berlangganan, biasanya dipasang di pop up ataupun di sidebar website.
Nah kali ini saya akan membagikan tutorial membuat sebuah kotak berlangganan
dibawah postingan blog...
....Kan biasanya subscribe box ini diletakkan di sidebar, tapi lain yang ini.
Untuk fitur widget ini saya bagikan
3 jenis style dan silahkan pilih yang menurut anda cocok untuk dipasang di blog anda.
Membuat Subscribe Box dibawah Postingan Blog
- Masuk ke menu Tema > Edit HTML
- Cari </head>, paste kode CSS dibawah ini tepat diatasnya, pilih salah satu ya sob
Style 1
<style type='text/css'>
/* Subscribe Box */
#subscribe-box{background-color:#ffe4ad;margin:20px 0 0 0;padding:20px;overflow:hidden;border:8px solid #ebd099}
#subscribe-box h4{color:#827459;font-size:16px;margin-bottom:20px;text-align:center;text-transform:uppercase}
#subscribe-box .emailfield{margin:auto;text-align:center;}
#subscribe-box .emailfield form {margin:0;}
#subscribe-box .emailfield input{padding:12px;color:#bcc4ca;border:1px solid #ebd099;font-size:14px;margin-bottom:10px}
#subscribe-box .emailfield input:focus{color:#454545;outline:none;border-color:#d5bc88;}
#subscribe-box .emailfield .submitbutton{background-color:#f8695f;color:#fff;margin:0;font-size:14px;letter-spacing:.7px;text-transform:uppercase;cursor:pointer;border:0;transition:all .3s}
#subscribe-box .emailfield .submitbutton:active,#subscribe-box .emailfield .submitbutton:hover{background-color:#e0594f;color:#fff;}
</style>
Style 2
<style type='text/css'>
/* Subscribe Box */
#subscribe-css {margin:0;padding:0;display:block;position:relative;}
.subscribe-wrapper {background:#4b5f65;width:520px;height:180px;color:#fff;font-size:14px;font-family:'Open Sans';line-height:20px;padding:20px 20px 10px 20px;text-align:center;border-radius:3px;}
.subscribe-wrapper p {margin:0;margin-bottom:30px;}
.subscribe-form {clear:both;display:block;margin:10px 0;overflow:hidden;}
form.subscribe-form {clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden;}
.subscribe-css-email-field {background:#39484d url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpyEuj4PBmymFcGQXfgYhQ5icB8IfVZSMnLf6P89Do_u49EhVbnsIZh4-c8Jp8N522vdcj_df_l20TmK06e3uA3OCSlJ9GGbAn9VE7S63-DE_gyd6Vq7hEAM1cvijQl0DagFG3E25VHAtW/s1600/sprites.png) no-repeat 1px -27px;color:#fff;margin:0 0 15px;padding:12px 40px;width:100%;border:none;}
.subscribe-css-email-button {background:#30abd5;color:#fff;cursor:pointer;font-weight:700;
padding:10px;text-transform:none;width:100%;border:none;font-size:17px;transition:all .5s ease-in;border-radius:3px;transition:all 0.3s ease-out;}
.subscribe-css-email-button:hover {background:#0099cc;color:#fff;}
</style>
Style 3
<style type='text/css'>
/* Subscribe Box */
#subscribe-box{background:#f4f5f6;display:block;overflow:hidden;margin:auto 20px;padding:30px 20px;border-radius:3px}
#subscribe-box p{font-size:15px;margin:0 auto 20px auto;color:rgba(255,255,255,.7);padding:0;text-align:center}
#subscribe-box .emailfield{margin:auto}
#subscribe-box .emailfield form{margin:0}
#subscribe-box .emailfield input{background:#fff;padding:12px;color:#7f8c8d;font-size:14px;width:70%;float:left;text-indent:10px;border:0;border-radius:3px}
#subscribe-box .emailfield input:focus{color:#222;outline:none;}
#subscribe-box .emailfield .submitbutton{background:#e74c3c;color:#fff;width:28.1%;margin:0 0 0 10px;font-size:14px;letter-spacing:.5px;cursor:pointer;border:0;text-indent:initial;text-transform:uppercase;border-radius:3px;transition:all .3s}
#subscribe-box .emailfield .submitbutton:focus,#subscribe-box .emailfield .submitbutton:hover{background:#c0392b;color:#fff;}
@media screen and (max-width:640px){
#subscribe-box .emailfield input{width:100%;float:none;text-indent:10px;}
#subscribe-box .emailfield .submitbutton{width:100%;margin:15px auto 0 auto;}}
</style>
Style 4
<style type='text/css'>#material-subscribe:hover{opacity:1}#material-subscribe:hover{box-shadow:0 6px 20px #AFAFAF}#material-subscribe{transition:all .4s ease-in-out;padding:20px 30px 30px;background:#fff;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);width:auto;max-width:400px}
.buttonx{color:#fff!important;padding:10px 15px;border-radius:4px;border:none;outline:none;box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);cursor:pointer;transition:all .4s ease-in-out}
.buttonx:hover{box-shadow:0 8px 17px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
.buttonx.red{background: #d21919;width: auto;font-size: large;}
a:active{color:#22A65A;text-decoration:none;transition: all 0.25s linear;}a:hover{color:#444;text-decoration:none;transition: all 0.5s ease}
input.inputfield,.input-field textare{background-color:transparent;border:none;border-bottom:1px solid #000000;border-radius:0;outline:none;height:3rem;width:100%;font-size:1rem;margin:0 0 15px 0;padding:0;box-shadow:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;transition:all .3s}
.input-field input:focus,.input-field textarea:focus{border-bottom:1px solid #d21919;box-shadow:0 1px 0 0 #2DCC70}
.input-field{position:relative;margin-top:1rem}
.input-field label{color:#9e9e9e;position:absolute;top:0.8rem;left:0;font-size:1rem;cursor:text;-webkit-transition:.2s ease-out;-moz-transition:.2s ease-out;-o-transition:.2s ease-out;-ms-transition:.2s ease-out;transition:.2s ease-out}
.input-field label.active{color:#d21919;font-size:0.8rem;-webkit-transform:translateY(-140%);-moz-transform:translateY(-140%);-ms-transform:translateY(-140%);-o-transform:translateY(-140%);transform:translateY(-140%)}
@media screen and (max-width:684px){
.buttonx.red { width: auto;}
#material-subscribe{auto}}
</style>
Style 5
<style type='text/css'>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px solid #eee;}
.subscribe-wrapper{color:#fff;font-size:16px;line-height:normal;margin:0;text-align:center;text-transform:none;font-weight:400;width:100%}
.subscribe-form{clear:both;display:block;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;color:#fff;cursor:pointer;font-weight:700;padding:14px 30px;margin-left:15px;text-transform:none;font-size:16px;border:0;border-radius:3px;transition:all .6s}
.subscribe-css-email-button:hover{background:#37b185;}
#subscribe-css p.subscribe-note{margin:16px;text-align:center;color:rgba(255,255,255,.6);font-size:180%;font-weight:400;line-height:normal;}
#subscribe-css p.subscribe-note span {position:relative;overflow:hidden;font-weight:700;transition:all .5s}
#subscribe-css p.subscribe-note span.itatu {font-weight:400;font-style:italic;color:rgba(255,255,255,.6);text-transform:lowercase}
#subscribe-css p.subscribe-note span.itatu:before,#subscribe-css p.subscribe-note span.itatu:after{display:none}
#subscribe-css p.subscribe-note span:before{content:'';position:absolute;bottom:-2px;left:0;width:0;height:3px;margin:10px 0 0;background:rgba(255,255,255,.1);transition:all .5s}
#subscribe-css:hover p.subscribe-note span:before{width:100%;}
</style>
Sekarang kalian tinggal masukkan HTML ini kedalam postingan, caranya :
- Cari kode ini <data:post.body/>
- Bisa juga dibawah iklan, sesuaikan dengan kondisi template anda
- Letakkan Html dibawah ini tepat dibawah kode tadi
Style 1
<div id='subscribe-box'>
<h4>Berlangganan via email</h4>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Alamat Email";}' onfocus='if (this.value == "Alamat Email") {this.value = "";}' type='text' value='Alamat Email'/>
<input name='uri' type='hidden' value='IDFeedAnda'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
<div style='clear:both;'/>
Style 2
<div id='subscribe-css'>
<div class='subscribe-wrapper'>
<p>Sign up here with your email</p>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=UrlAnda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='IDFeedAnda'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address '/><input class='subscribe-css-email-button' title='' type='submit' value='Subscribe Now'/></form>
</div>
</div>
</div>
Style 3
<div id='subscribe-box'>
<div class='emailfield'>
<form action='http://feedburner.google.com/fb/a/mailverify' method='post' onsubmit='window.open('http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='email' onblur='if (this.value == "") {this.value = "Email address";}' onfocus='if (this.value == "Email address") {this.value = "";}' type='text' value='Email address'/>
<input name='uri' type='hidden' value='IDFeedAnda'/>
<input name='loc' type='hidden' value='en_US'/>
<input class='submitbutton' type='submit' value='Submit'/>
</form>
</div>
</div>
Style 4
<div id='material-subscribe'>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<div class="input-field">
<input class="inputfield" name="email" type="email" required="" class="validate"/> <label for="email" data-error="wrong" data-success="right">Email</label> <input type="hidden" value="IDFeedAnda" name="uri"/><input type="hidden" name="loc" value="en_US"/> <button class="buttonx red waves-effect waves-light" type="submit"/><i class="fa fa-envelope"></i> Subscribe</button> </div>
</form>
</div>
<div style='clear: both;'/>
Ganti Feed anda dengan url Feedburner blog anda.
Style 5
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=IDFeedAnda' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=ArlinaDesign', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='IDFeedAnda'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your Email'/><input class='subscribe-css-email-button' title='' type='submit' value='submit'/></form>
</div>
</div>
</div>
Cukup sekian tutorialnya dan terima kasih, semoga bermanfaat dan bisa work tentunya di blog sobat...
