Cara membuat subscribe keren Responsif di Footer

Di kesempatan ini saya akan membagikan cara membuat subscribe di footer.Tspi ebelum itu apabila anda belum tahu apa itu subscribe, saya akan jelaskan sedikit. Subscribe sendiri artinya adalah langganan. Yangartinya, setiap anda memasukan email ke kolom subscribe maka setiap kali blog update artikel maka anda akan di beri kabar lewat email anda yang sudah di daftarkan di kolom subscribe.
Fungsi subscribe secara default tidak ada di pilihan widget blog, untuk itu fungsi subscribe harus kita buat sendiri. Layanan subscribe bisa anda dapatkan di feedbunner, kenapa feedbunner ? Karena feedbunner salah satu tools yang di support Google, jadi istilahnya baik untuk blog kita jika kita bermain di search pencarian google. Jadi saya menggunakan layanan feedbunner unutk subscribe blog saya ini.
Nah, sekarang bagaimana caranya agar layanan subscribe tersebut nyambung ke blog kita ?
Disini anda harus membuat sendiri kolom subscribenya. Ada berbagai cara dan koding untuk membuat suatu subscribe di blog. Salah satunya yang saya bahas ini adalah Cara membuat subscribe keren di Footer. Ini dia langkah-langkahnya:

 1. Cari <head>, setelah ketemu copy paste kan code CSS ini di bawah <head>
/* Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#222;overflow:hidden;border-top:0px 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:#333;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#0086e6;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:#004b80;}
#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:&#39;&#39;;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%;}
#footer-last{position:relative;display:block;background:#1a1a1a;padding:15px}
.adpleftcredit{margin:10px;font-weight:400;color:rgba(255,255,255,.8)}
.adpleftcredit a {color:rgba(255,255,255,.8);}
.adpleftcredit a:hover {color:rgba(255,255,255,1);text-decoration:underline;}

 2.  Setelah code CSS tadi sudah di copy dan paste di bawah <head>,sekarang anda tinggal
      membuat form untuk subscribenya. Cari code <footer id='footer-wrapper'> atau cari
     footer-wrapper ganti code tersebut dengan code di bawah.

<!--footerfix mulai (power by)-->
<footer id='footer-wrapper'>
<div id='subscribe-css'>
<p class='subscribe-note'><span>SUBSCRIBE</span>
<span>TO</span> OUR NEWSLETTER</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='https://feedburner.google.com/fb/a/mailverify?uri=perbangga&amp;loc=en_US' class='subscribe-form' method='post' onsubmit='window.open (&apos;https://feedburner.google.com/fb/a/mailverify?uri=perbangga&amp;loc=en_US&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='Perbangga'/><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>
<div id='footer-last'>
<div class='adpleftcredit'>
Copyright &#169; 2015 <a href='http://www.perbangga.com/' itemprop='creator' itemscope='itemscope' itemtype='http://schema.org/Person'><span itemprop='name'>Perbangga</span></a> All Right Reserved
<div id='cpright'>
Powered by <a href='http://www.blogger.com/' title='Blogger'>Blogger</a>
</div>
</div>
</footer>

- Keterangan:
  Merah : ganti dengan kata-kata sesuka anda
 Hitam Tebal : ganti dengan alamat feedbunner anda
  Hijau : ganti dengan judul blog/website anda
  Biru : Ganti dengan alamat blog/website anda 

Apabila semua intruksi yang di atas di lakukan dengan baik , maka hasilnya akan sama percis seperti subscribe yang ada di website ini lihat di bagian footer, akan tampak seperti itu. Apabila tidak tampak seperti itu mungkin ada yang salah di pemenmpatan kode CSS ataupun kode HTMLnya. 
Apabila anda ingin bertanya boleh berkomentar di bahwah.   
Cara membuat subscribe keren Responsif di Footer Cara membuat subscribe keren Responsif di Footer Reviewed by Abrizeni Duha Perbangga on 21:35 Rating: 5

No comments:

Powered by Blogger.