Cara Membuat Kotak Subscribe Via Email Menarik Dan Keren

Halo sobat blogger, ini adalah pertama kalinya saya membuat postingan sebagai kontributor di blog sobat saya Antoncabon, dan untuk postingan perdana kali ini saya akan membagikan sebuah tutorial yang menarik dalam hal memperindah tampilan blog sobat sekalian, yaitu tutorial cara membuat kotak subcribe via email.

Kotak subscribe via email ini seratus persen menggunkan CSS, apa artinya! ya ini berarti tidak akan mempengaruhi loading blog sobat, selain itu tampilan dari Kotak Subscribe Via Email ini menarik dari segi tampilannya, untuk contohnya sobat dapat melihatnya di bagian bawah pada postingan ini.
Selain memperindah tampilan blog, saya kira sobat blogger sudah paham fungsi dari Kotak Subscribe ini yaitu fasilitas untuk berlangganan konten dari blog tertentu yang hampir di pakai oleh semua situs web untuk dapat menyebarkan tulisan atau postingan dari blog atau situs web secara ringkas/garis besar yang akan dikirimkan ke pada pelanggan konten melalui email.

Jika sobat blogger sekalian tertarik dengan kotak subscribe ini dan ingin memasangnya di blog kesayangan sobat, silahkan ikuti langkah-langkahnya yang saya tuliskan dibawah ini:

Subscribe Box Via Email

Langkah-langkah Pembuatan Kotak Subscribe di blog :

Langkah-1 : Login Blogger, Klik menu Template > Edit HTML

Langkah-2 : Simpan kode CSS dibawah ini sebelum kode </style> :

/* CSS Subscribe Box */
#subscribe-box {width:auto;height:auto;background-color:#fff;}
#subscribe-box p {font-family:'Open Sans';font-size:13px;color:#333;line-height:20px;padding:10px 20px 0 20px;margin:0;text-align:center;}
#subscribe-box .emailfield {padding:0px 20px 10px;}
#subscribe-box .emailfield input {background:#f5f5f5;color:#aaa;padding:10px;margin-top:10px;font-size:13px;font-family:'Open Sans';width:91%;border:0;border-radius:3px;box-shadow:inset 0 0 0 1px rgba(0,0,0,0);transition:all 0.4s ease-out;}
#subscribe-box .emailfield input:focus {background:#fff;outline:none;border:none;color:#444;box-shadow:inset 0 0 0 1px rgba(0,0,0,0.2);}
#subscribe-box .emailfield .submitbutton {background:#aaa;color:#fff!important;text-transform:uppercase;font-weight:bold;outline:none;width:99%;cursor:pointer;border-radius:3px;border:none;transition:all 0.4s ease-out;}
#subscribe-box .emailfield .submitbutton:hover, #subscribe-box .emailfield .submitbutton:active {background:#888;outline:none;color:#fff;}
#subscribe-css {margin:0;padding:0;float:right;display:block;position:relative;}
.subscribe-wrapper {background:#444;width:260px;height:200px;color:#fff;font-size:14px;font-family:'Open Sans';line-height:20px;padding:40px 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:#333 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVUetKs3RITWL7aD-VxeEAtThP9lwSoDh7jWqPCAfEvREdFsvNVN8urtYuuqxDXWNyYyhqPsrl1L2nVtyBR7fvz6RvcFuIkELX9pCkNPHnSdgYEESTaCZSgDkOc92T2U_8cnSBuoHPSxGM/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:#FF8830;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:#FF7A35;color:#fff;}

Sebaiknya sobat letakan Kotak Subscribe ini di halaman muka pada blog sobat dan tampil disetiap halaman sehingga mempermudah pengunjung untuk menjadi pelanggan konten dari blog sobat !

Langkah-3 : Copy kode HTML di bawah ini, setelah itu paste di tempat yang anda inginkan

<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=antoncabon' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=antoncabon&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='antoncabon'/><input name='loc' type='hidden' value='en_US'/><input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter your email address' title='Enter your email address'/><input class='subscribe-css-email-button' title='Subscribe Now' type='submit' value='Subscribe Now'/></form>
</div>
</div>
</div>

Ganti antoncabon dengan url rss sobat sendiri.

Screen Shot

Langkah-4 : Selesai !

"Hendaknya kesibukan kita lebih berfokus pada penyempurnaan penunaian kewajiban-kewajiban kita kepada Tuhan, sebab Dia, Tuhan yang sekaligus Pemberi Rejeki pasti akan membalas penunaian kewajiban tersebut dengan anugrah-Nya yang akan mencukupi kebutuhan kita." my fav words!

Go to Link