Cara Menciptakan Subscribe Box Responsive Di Blog
Memiliki blog tentulah mengharapkan pengunjung untuk membaca atau melihat isi blog Anda. Postingan blog mungkin sanggup menarik perhatian pengunjung namun tentu saja embel-embel dari dari semua itu itu juga termasuk tema atau template blog Anda.
Jika ingin mempunyai template yang manis dan keren tentulah harus memperhatikan beberapa elemen penting didalamnya, salah satunya yaitu Anda wajib untuk mempunyai subscribe box atau kotak berlangganan. Kotak berlanggana ini memudahkan Anda untuk mendapatkan setiap subscribe email yang masuk pada blog Anda.
Pada tutorial kali ini, yang kuasa plokis akan menunjukkan cara menciptakan subscribe box resposive yang nantinya akan berbeda tampilannya pada dekstop dan mobile.
Bagaimana cara membuatnya?. Sebelumnya Anda harus mempunyai Akun Feedburner terlebih dahulu, Jika belum, silahkan di check pada artikel sebelumnya perihal cara menciptakan akun feedburner terbaru.
2. Letakkan instruksi HTML berikut sempurna diatas </article> atau setelahnya juga sanggup menyimpan sempurna di bawahnya. Namun untuk subscribe box yang saya gunakan di blog saya ini, saya menyimpannya sempurna diatas </article>
3. Save tempalte Anda dan lihat hasilnya.
Demikian tutorial kali ini perihal cara membuat subscribe box responsive pada blog. Jika ada yang masih kurang jelas, silahkan olok-olokan pertanyaan di kolom komentar, dan kalau postingan ini bermanfaat silahkan di share. Terima kasih
Sumber https://dewaplokis.blogspot.com/
Jika ingin mempunyai template yang manis dan keren tentulah harus memperhatikan beberapa elemen penting didalamnya, salah satunya yaitu Anda wajib untuk mempunyai subscribe box atau kotak berlangganan. Kotak berlanggana ini memudahkan Anda untuk mendapatkan setiap subscribe email yang masuk pada blog Anda.
Bagaimana cara membuatnya?. Sebelumnya Anda harus mempunyai Akun Feedburner terlebih dahulu, Jika belum, silahkan di check pada artikel sebelumnya perihal cara menciptakan akun feedburner terbaru.
Cara Membuat Subscribe Box Responsive
1. Pasang instruksi CSS berikut dibawah instruksi <style type='text/css'> atau sebelum instruksi </style>/* Subscribe Box */ #subscribe-css { overflow:hidden; clear:both; position:relative; margin:20px 0; border-bottom:3px solid rgba(0,0,0,0.03); border-top:3px solid rgba(0,0,0,0.03) } .subscribe-wrapper { color:#fff; font-size:16px; line-height:18px; text-align:center; margin:0 0 20px 0; 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:#fafafa; color:#999; margin:10px; padding:10px 20px; border:1px solid rgba(0,0,0,0.06); } .subscribe-css-email-button { background:#999; color:#fff; cursor:pointer; padding:10px 25px; margin-left:5px; font-size:15px; border:none; font-weight:700; border-radius:2px; transition:all .6s } .subscribe-css-email-button:hover { background:#e74c3c; } #subscribe-css p.subscribe-note { margin:20px; text-align:center; font-size:130%; color:#999; font-weight:400;line-height:1em } #subscribe-css p.subscribe-note span { font-weight:700; } @media only screen and (max-width:768px) { #search-form td.search-box { padding:0 0 0 10px; } #search-form td.search-button { width:1%; } #search-form input#search-box[type="text"] { margin:0;background:#fff; } #search-form input#search-box[type="text"]:focus { background:#fdfdfd; outline:none;} #subscribe-css p.subscribe-note { margin:0 0 20px 0 } .subscribe-wrapper { width:100%; } #subscribe-css p.subscribe-note { float:none; } .subscribe-wrapper { text-align:center; float:none; width:auto; } .subscribe-css-email-field { margin:14px 10px;width:94% !important; } .subscribe-css-email-button { margin:0 10px;width:94% !important; }2. Letakkan instruksi HTML berikut sempurna diatas </article> atau setelahnya juga sanggup menyimpan sempurna di bawahnya. Namun untuk subscribe box yang saya gunakan di blog saya ini, saya menyimpannya sempurna diatas </article>
<div id='subscribe-css'> <p class='subscribe-note'> SUBSCRIBE TO OUR <span> NEWSLETTER </span> </p> <div class='subscribe-wrapper'> <div class='subscribe-form'> <form action='http://feedburner.google.com/fb/a/mailverify?uri=dewaplokis' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=dewaplokis', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'> <input name='uri' type='hidden' value='dewaplokis'/> <input name='loc' type='hidden' value='en_US'/> <input autocomplete='off' class='subscribe-css-email-field' name='email' placeholder='Enter Email '/> <input class='subscribe-css-email-button' title='' type='submit' value='Submit'/> </form> </div> </div> </div>Ganti dewaplokis dengan nama akun feedburner Anda.
3. Save tempalte Anda dan lihat hasilnya.
Demikian tutorial kali ini perihal cara membuat subscribe box responsive pada blog. Jika ada yang masih kurang jelas, silahkan olok-olokan pertanyaan di kolom komentar, dan kalau postingan ini bermanfaat silahkan di share. Terima kasih