Cara Membuat Widget Subscribe Flat UI Responsive Di Blog

Selamat datang agan atau aganwati kali ini Saya akan berbagi tips dan trik blogging untuk Anda yaitu cara membuat widget subscribe Flat UI responsive di blog, untuk membuatnya silakan agan untuk mengikuti beberapa cara berikut ini;

Langkah

1. Login pada blog Anda masing-masing,

2. Pada menu dashboard pilih menu template, lalu pilih menu edit html,

3. Lalu cari kode </b:skin> dengan cara

Ctrl

+

F

,

4. Copy script di bawah ini lalu paste tepat di atas kode </b:skin>,

 #subscribe-css { padding : 5px; background : #16a085; }
.subscribe-wrapper { color : #fff; background : #807A7A; font : 13px; font-family : 'Oswald', Tahoma, Sans-serif; line-height : 20px; padding : 1px 20px 10px; text-align : center; border-radius : 3px; }
.subscribe-form { background : #807A7A; 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 : url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ7FwUGfw5CIvPqR5Pd1vU9BeITy6QZbK3KSE7QYjNl3aJrqBspMcdEgaEuTCKUt4wBXDL-yaF4AK1E8Ru_O1zEH8aA0snmn-qehAvJTJO_pIwVxKHCTrZWgijXy0gmjHSSKB5nB1k6wwm/s1600/sprites.png) 1px -27px no-repeat #eee; color : #444; margin : 0 0 15px; padding : 12px 40px; width : 100%; border : none; }
.subscribe-css-button { background : #000000; color : #fff; cursor : pointer; font-weight : 700; padding : 10px; text-transform : none; width : 100%; border : none; font-size : 16px; transition : all 0.3s ease-in; }
.subscribe-css-button:hover { transition : all 0.3s ease-in; background : rgba(0, 0, 0,0.2); } 

5. Lalu simpan,

6. Setelah Anda simpan, pada menu dashboard pilih menu tata letak, lalu pilih tambahkan gadget, setelah itu pilih menu html / javascript,

7. Copy script di bawah ini lalu paste pada kolom html / javascript,

 <div class="subscribe-wrapper">
<p>Ikuti blog ini dengan memasukan Email Anda dibawah ini lalu konfirmasi Email Anda! Terima kasih</p>
<div class="subscribe-form">
<form action="http://feedburner.google.com/fb/a/mailverify" class="subscribe-form" method="post" onsubmit="window.open
('http://feedburner.google.com/fb/a/mailverify?uri= RenaldyWays', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" target="popupwindow" id="1359348936">
<input name="uri" type="hidden" value="RenaldyWays" />
<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>
<p><a href="http://feeds.feedburner.com/RenaldyWays"><img src="http://feeds.feedburner.com/~fc/RenaldyWays?bg=000000&amp;fg=FFFFFF&amp;anim=1" height="26" width="88" style="border:0" alt="" /></a></p>
</div></div> 

Jangan lupa untuk mengganti ID Feedburner Saya dengan ID Feedburner Anda "RenaldyWays"!

8. Simpan dan lihat hasilnya.

Nah itu saja dari Saya semoga bermanfaat, jangan lupa bagikan serta tinggalkan komentar Anda, terima kasih.

Share this