Cara Membuat Langganan Artikel Atau Subscribe box Ala Digizena Yang Sangat Keren

Untuk post kali ini saya akan menshare widget yang bagus untuk Blogger.

Widget tersebut saya ambil dari suatu template yang dibuat oleh Arlina Design yaitu template digizine.

Berikut tampilan subscribe box tersebut :

1. Login ke Blogger pilih menu Template > Edit HTML
2. Copy kode dibawah ini lalu pastekan sebelum kode ]]></b:skin>

/* Subscribe Box */

#HTML2 .widget-content{padding:0}
#HTML2 .subscribe-wrapper h3{color:#fff;background:transparent;padding:0;font-weight:400;text-transform:uppercase;margin:10px auto;text-align:center;font-size:16px;line-height:1;border:0;}
#HTML2 .subscribe-wrapper h3 span{display:inline-block;font-size:30px;font-weight:700;margin:15px 0 0 0}
#HTML2 .subscribe-wrapper p{margin:0 auto;opacity:.8;text-align:center}
.subscribe-wrapper{background:#4dbfd9;color:#fff;margin:0;padding:20px;}
.subscribe-form{clear:both;display:block;margin:5px 0 0 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#4dbfd9;color:#fff;margin:0 0 15px;padding:0.662em 1.247em;width:100%;border:1px solid rgba(255,255,255,.4);text-align:center;outline:0}
input.subscribe-css-email-field::-webkit-input-placeholder{color:#fff;}input.subscribe-css-email-field:-moz-placeholder{color:#fff;}input.subscribe-css-email-field::-moz-placeholder{color:#fff;}input.subscribe-css-email-field::-ms-input-placeholder{color:#fff;}
.subscribe-css-button{background:#4dbfd9;color:#fff;cursor:pointer;margin:0 0 15px;padding:0.662em 1.247em;width:100%;border:1px solid rgba(255,255,255,.4);text-align:center;outline:0;transition:all .3s}
.subscribe-css-button:hover{background:#fff;color:#47b2ca!important;}

3. Copy kod dibawah ini lalu Pastekan sebelum kode </style>

/* Subscribe Box */
#HTML2 .widget-content{padding:0}
#HTML2 .subscribe-wrapper h3{color:#fff;background:transparent;padding:0;font-weight:400;text-transform:uppercase;margin:10px auto;text-align:center;font-size:16px;line-height:1;border:0;}
#HTML2 .subscribe-wrapper h3 span{display:inline-block;font-size:30px;font-weight:700;margin:15px 0 0 0}
#HTML2 .subscribe-wrapper p{margin:0 auto;opacity:.8;text-align:center}
.subscribe-wrapper{background:#4dbfd9;color:#fff;margin:0;padding:20px;}
.subscribe-form{clear:both;display:block;margin:5px 0 0 0;overflow:hidden}
form.subscribe-form{clear:both;display:block;margin:10px 0 0;width:auto;overflow:hidden}
.subscribe-css-email-field{background:#4dbfd9;color:#fff;margin:0 0 15px;padding:0.662em 1.247em;width:100%;border:1px solid rgba(255,255,255,.4);text-align:center;outline:0}
input.subscribe-css-email-field::-webkit-input-placeholder{color:#fff;}input.subscribe-css-email-field:-moz-placeholder{color:#fff;}input.subscribe-css-email-field::-moz-placeholder{color:#fff;}input.subscribe-css-email-field::-ms-input-placeholder{color:#fff;}
.subscribe-css-button{background:#4dbfd9;color:#fff;cursor:pointer;margin:0 0 15px;padding:0.662em 1.247em;width:100%;border:1px solid rgba(255,255,255,.4);text-align:center;outline:0;transition:all .3s}
.subscribe-css-button:hover{background:#fff;color:#47b2ca!important;}

4. Kemudian Save Template

5. Lalu Tata Letak > klik Tambahkan Gadget > pilih HTML/Javascript

6. Copy kode HTML dibawah ini.

<div id="subscribe-css">
<div class="subscribe-wrapper">
<h3>GET MORE STUFF LIKE THIS
<span>IN YOUR INBOX</span></h3>
<div class="subscribe-form">
<form action='http://feedburner.google.com/fb/a/mailverify?uri=DeveloperK' class="subscribe-form" method="post" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=digizena', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="DeveloperK" />
<input name="loc" type="hidden" value="en_US" />
<input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email here"/>
<input class="subscribe-css-button" title="" type="submit" value="Sign Up Now" />
</form>
</div>
</div></div> 

Catatan : 

Ganti DeveloperK dengan feedburner blog kamu.

Demikian Cara Membuat Langganan Artikel Atau Subscribe box Ala Digizena Yang Sangat Keren, semoga dapat bermanfaat.

Share this post