Membuat Kotak Berlangganan/Subscribe Keren di BLog

Membuat Kotak Berlangganan
Pada Postingan Sebelumnya saya telah share bagaimana Cara Membuat Daftar Isi Keren di Blog, nah, pada kesempatan ini, saya akan share tentang Cara Membuat Kotak Berlangganan/Subscribe Keren di Blog. Contoh Kotaknya seperti yang ada pada Blog ini. Fungsi dari Kotak berlangganan adalah untuk pembaca blog anda yang ingin mendapatkan info terbaru atau postingan terbaru anda secara berlangganan melalui email. Langsung saja deh, buat sobat Free Download dan Tutorial yang ingin mempunyai Kotak berlangganan seprti yang ada di blog saya, berikut langkah-langkahnya.

  1. Login ke akun Blogger anda
  2. Klik Tata Letak > Tambah Gadget Pilih HTML/Javascript
  3. Copy dan Paste Kode Script dibawah ini.
    <style>.latesthackbar{width:300px;float:left;}.mbt1 {text-align: right;font-size: 10px;}.latesthacks h2{background:URL(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEitZuOp8NR4Z3fGuYvH7AgAw0_lWOFFAZJ8AUdC8ipfiw1FL352xsilUGYKZ0ZWNX-dizIA5n7uU63oShjGjglVAXbE7we4i_Bt8Hz6zWWp2sAdBtTWwxh1pKZw0evA9KESmyWRobBe2Jo/s1600/latesthackSUBSCRIBE.gif) no-repeat;height:50px;margin:0px 0 0px 0;padding:0px 20px 0px 0px;font-size:0px;font-family:Sans-serif, Arial, Helvetica;font-weight:bold;text-transform:uppercase;color:#ffffff;text-shadow:0 1px 0 #fff;} ul.social {    list-style: none;    overflow: hidden;}.social li {    float: left;    background: none !important;    padding: 0 !important;    margin: 0 8px;}.social li a {    display: block;    width: 50px;    height: 40px;    background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDcR3deR19AH1usAahPfAU8a-2qddyz1fhypThSMYdAun137mMYIsgmWL7ggpRMWZagWZdWNyNLouh01mgJTraiEW51lob8SNhRBtg8Zs9draRgsX6c-XGh0x56jAm2YclX8mus0eIXRo/s1600/social.png") no-repeat transparent;    text-indent: -99999em !important;-webkit-transition: ease-in 0.15s all;    -moz-transition: ease-in 0.15s all;    -o-transition: ease-in 0.15s all;    -ms-transition: ease-in 0.15s all;    transition: ease-in 0.15s all;}.social li a:hover {    padding: 0 !important;}.social li.rssicon a {    background-position: 0 0;border-right: 1px solid #e6e6e6;}.social li.twicon a {    background-position: -50px 0;border-right: 1px solid #e6e6e6;}.social li.fbicon a {    background-position: -100px 0;border-right: 1px solid #e6e6e6;}.social li.gicon a {    background-position: -150px 0;}.social li.rssicon a:hover {    background-position: 0 -50px;border-right: 1px solid #e6e6e6;}.social li.twicon a:hover {    background-position: -50px -50px;border-right: 1px solid #e6e6e6;}.social li.fbicon a:hover {    background-position: -100px -50px;border-right: 1px solid #e6e6e6;}.social li.gicon a:hover {    background-position: -150px -50px;}.latesthacks{width: 300px; float: left;}.latesthacks .count{color:#F17C18; font-size: 14px; font-weight: bold; font-family: Helvetica, Arial;  height: 40px; line-height: 40px; vertical-align: middle; width: 310px; padding: 0 0px 0 4px; margin:0;}    .latesthacks .count span.bigcount{color:#F17C18; font-size: 24px; font-family: Helvetica, Arial; line-height: 39px; vertical-align: middle; margin:0px; padding:10px 0px 0px 0;}    .latesthacks .subicons{border-bottom: 1px solid #e6e6e6; margin: 0px 0 0px 0; float: left; width: 300px; font-family: Helvetica, Arial; font-size: 12px;}    .latesthacks .emailsub{border-bottom: 0px solid #e6e6e6; padding: 15px 0 0px 0; float: left; width: 100%; font-family: Helvetica, Arial;}    .latesthacks .emailsub .emailicon{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAheLSeZHwROSCUgN9QkqE1os2FpMqf3Tkfv8pt_SrMuyaIHbxcTY6pX2YrXzS7esVhFQrmA3TduOdW-dcUSP9pdT-c_5YYQxscpUnwzxiVBmvB6DrKw5_ye78ARlAelmPhTygpP_SpTI/s400/email.png) no-repeat 0 2px; float: left; padding: 0px 15px 0px 40px; margin: 0 0 0 5px; width: 300px;  line-height: 20px; vertical-align: middle; font-size: 14px; color: #333; }.emailbutton{background:#f7f8f9;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;padding:6px 12px;margin:0;-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);color:#888;text-shadow:0 1px 0 #fff;line-height:1.2;cursor:pointer;font-size:13px;}.emailbutton:hover{background:#f1f1f1;background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );text-decoration:none !important;}.email{clear:both;width:100%;margin:10px 0;}.emailform{position:relative;width:300px;margin:0 auto;}.emailinput{width:200px;height:18px;margin:0 auto;padding:8px 40px 8px 10px;border:1px solid #ddd;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;font-family:georgia;font-style:italic;-webkit-box-shadow:1px 1px 2px #dfdfdf;-moz-box-shadow:1px 1px 2px #dfdfdf;box-shadow:1px 1px 2px #dfdfdf;font-size:14px;color:#666;}.emailbutton{-webkit-border-top-right-radius:4px;-webkit-border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-moz-border-radius-bottomright:4px;border-top-right-radius:4px;border-bottom-right-radius:4px;-webkit-border-top-left-radius:0px;-webkit-border-bottom-left-radius:0px;-moz-border-radius-topleft:0px;-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;border-bottom-left-radius:0px;padding:9px;position:absolute;right:-2px;top:0;display:block;line-height:16px;}.emailbutton{padding:8px !important;}.emailform, .emailinput{width:98% !important;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;height:auto;}</style><div class="latesthackbar"><div class="latesthacks"><h2 class='title'>Subscribe Now!</h2><div class="count"><span class="bigcount"><a rel="nofollow" href="http://feeds.feedburner.com/BlogOfRudy"><img style="border:0" alt="" src="http://feeds.feedburner.com/%7Efc/BlogOfRudy?bg=F2F2F2&amp;fg=666&amp;anim=1" height="26" width="88" /></a></span>  Learn Pro Tricks daily </div><div class="subicons"><ul class="social"><li class="rssicon"><a href="http://feeds.feedburner.com/BlogOfRudy" rel="nofollow" target="_blank">Rss</a></li><li class="twicon"><a href="http://twitter.com/@RudiHartoyo" rel="nofollow" target="_blank">Twitter</a></li><li class="fbicon"><a href="http://facebook.com/rudihartoyo91" rel="nofollow" target="_blank">FaceBook</a></li><li class="gicon"><a href="https://plus.google.com/110015152091049984697" rel="nofollow" target="_blank">Google +</a></li></ul></div> <div class="emailsub"> <div class="emailicon"><p style=" width:240px; color:#3A3A3A; font-size: 13px; font-weight: normal; font-family: Helvetica, Arial;  padding:0; margin:0;">Receive Updates In Your Inbox by submitting your Email ID below.</p></div>     <div class="email"><form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=BlogOfRudy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform"> <input type="hidden" value="BlogOfRudy" name="uri" /> <input type="hidden" name="loc" value="en_US" /> <input type="text" 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..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="SignUp" title='' /></form></div></div></div><div class="mbt1"></div></div>
  4. Keterangan :
    • Warna Merah, ganti dengan akun Feedburner Anda
    • Warna Orange, ganti dengan akun Twitter Anda
    • Warna Hijau, ganti dengan akun Facebook anda
    • Warna Biru, Ganti dengan akun Google Plus (g+) anda
  5. Setelah semua selesai, Klik Simpan dan lihat hasilnya si blog anda.
Sekian Tutorial tentang Cara Membuat Kotak Berlangganan/Subscribe Keren di BLog, Semoga Bermanfaat.
Previous
Next Post »

2 komentar

Click here for komentar
Unknown
admin
26 Juni 2013 pukul 19.08 ×

Artikelnya BAGUS...hampir setengah jam aku diblog agan..artikelnya menarik-menarik...

Reply
avatar
Unknown
admin
26 Juni 2013 pukul 21.22 ×

siippp gan..

thanks udah mampir..

Reply
avatar

# Silahkan Anda Berkomentar dengan Baik dan Sopan
# Pesan dilarang Mengandung SARA dan Spam
# Terima Kasih Telah berkunjung di Blog Sederhana ini ConversionConversion EmoticonEmoticon

Thanks for your comment