Skip to main content

follow us


Cara Membuat Subcribtion Box Responsive Di Blog - Pada kesempatan kali ini saya akan membahas tutorial Bagaimana Cara Membuat Subcribtion Box atau Kotak Berlangganan Keren di Blog. Widget subcription blog ini sangat berguna bagi pengunjung blog kita yang ingin berlangganan post kita via email. Nah, untuk tampilannya silahkan cek di bagian footer / bagian bawah blog ini.


Tutorial ini sebenarnya sudah banyak di jelaskan oleh para Mastah-mastah blogger berpengalaman di bidang Blog, namun saya rasa tidak ada salahnya jika sobat mencoba memasang Subscribtion Box ini di blog sobat, karena widget ini telah saya lakukan sedikit modifikasi.

Cara Membuat Subcribtion Box Responsive Di Blog

- Pertama, Silahkan Login ke akun Blogger > Template > Edit HTML
- Kedua, Copy dan Simpan Kode CSS di bawah ini di atas Kode </style> atau ]]></b:skin>

/* CSS Subscribe Box */
#subscribe-css{position:relative;padding:20px 0;background:#374760;overflow:hidden;border-top:4px 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:#415471;color:#ccc;margin:10px 0;padding:15px 20px;width:35%;border:0}
.subscribe-css-email-button{background:#3cc091;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:#37b185;}
#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:'';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%;}


Untuk ukuran font, warna dan sebagainya silahkan lakukan modifikasi kembali sesuai selera sobat.


- Langkah ketiga, copy markup di bawah ini dan simpan di antara tag pembuka <body> dan tag penutup </body>. Contohnya seperti yang ada di bagian bawah blog ini, yakni di bagian footer-wrapper.

<div id='subscribe-css'>
<p class='subscribe-note'><span>BERLANGGANAN</span> <span class='itatu'>via</span>EMAIL</p>
<div class='subscribe-wrapper'>
<div class='subscribe-form'>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=masdsgn' class='subscribe-form' method='post' onsubmit='window.open (&apos;http://feedburner.google.com/fb/a/mailverify?uri=masdsgn&apos;, &apos;popupwindow&apos;, &apos;scrollbars=yes,width=550,height=520&apos;);return true' target='popupwindow'>
<input name='uri' type='hidden' value='masdsgn'/><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>

Silahkan ganti kode yang di tandai di atas dengan id feedburner blog sobat.

- Langkah terakhir, simpan setelan template sobat dan cek hasilnya.


Demikian tutorial Cara Membuat Subcribtion Box Responsive Di Blog ini, semoga bermanfaat dan sampai jumpa di tutorial selanjutnya.
Disclaimer : Semua Konten yang kami bagikan semuanya adalah Gratis, dan kalian di ijinkan untuk mereshare ulang dg menyertakan link sumber dari Pehawe Dan kami tidak pernah meminta donasi atas apa yg kami bagikan. Trims

You Might Also Like:

Comment Policy : Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Jika sobat ingin berkomentar dengan format css, js dan html silahkan Parse terlebih dahulu.
Show Parser
Buka Komentar