Cara Membuat Subscribe Box Dengan CSS

Subscribe Box - Pada kesempatan kali ini saya akan membagikan sebuah tutorial yang sangat penting bagi sebuah blog. Pada dasarnya Subscribe Box ini berfungsi sebagai pemberitahu kalau ada post baru dari sebuah blog. Tutorial yang saya bagikan ini berpenampilan sangat bagus dan sama sekali tidak membuat blog sobat  berat.

Demo :

Berikut Tutorialnya

Langkah 1 : Daftar terlebih dahulu di FeedBurner ( cari di google )
Langkah 2 : Simpan CSS di atas ]]></b:skin> / </style>

/* Subscribe By Microsoft Cyber */
.subscribe-wrapper {
color:#fff;
background:#1abc9c;
font:13px;
font-family:Roboto;
line-height:20px;
text-align:center;
border-radius:5px;
padding:1px 20px 10px;
}

.subscribe-form {
background:#1abc9c;
clear:both;
display:block;
overflow:hidden;
margin:10px 0;
}

form.subscribe-form {
clear:both;
display:block;
width:auto;
overflow:hidden;
margin:10px 0 0;
}

.subscribe-css-email-field {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj22iViuJjxuOGmdmKuV8mADvQj8CG3ckhlq9AeLIUD1Qdep5-ymU_j3bin0cMeymDGuTnpRuBLPdb9Xt9XWa5_dx_0Aq5tAVo8UUaah0gdDiP7CL1RJErTuRre1j6VJv-Qb3JRwLWQu6rA/s1600/sprites.png) 1px -27px no-repeat #eee;
color:#444;
width:100%;
border:none;
margin:0 0 15px;
padding:12px 40px;
}

.subscribe-css-button {
background:#16a085;
color:#fff;
cursor:pointer;
border-radius:5px;
font-weight:700;
text-transform:none;
width:100%;
border:none;
font-size:16px;
transition:all 0.3s ease-in;
padding:10px;
}

.subscribe-css-button:hover {
transition:all 0.3s ease-in;
background:#106F5D;
}

Langkah 3 : Simpan kode HTML ( Buat Widget Baru )]

<div id="subscribe-css">
<div class="subscribe-wrapper">
<p>
Dengan memasukkan email pada kolom di bawah ini, anda akan mendapatkan update artikel dari <b>
Microsoft Cyber</b> secara gratis.</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify?uri=MicrosoftCyber" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri=MicrosoftCyber', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow">
<input name="uri" type="hidden" value="MicrosoftCyber" /><input name="loc" type="hidden" value="en_US" /><input class="subscribe-css-email-field" name="email" autocomplete="off" placeholder="Enter your email address "/><input class="subscribe-css-button" title="" type="submit" value="Subscribe Now !" /></form>
</div>
</div>
</div>

Langkah 4 : Simpan Template

Lebih Lanjut

• Ganti yang di tandai dengan ID Feedburner sobat
• Ganti Deskripsi di atas sesuai keinginan sobat