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 perhiasan 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 ialah 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, tuhan plokis akan memperlihatkan 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 ihwal cara menciptakan akun feedburner terbaru.
2. Letakkan isyarat 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 ihwal cara membuat subscribe box responsive pada blog. Jika ada yang masih kurang jelas, silahkan usikan 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 ialah 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 ihwal cara menciptakan akun feedburner terbaru.
Cara Membuat Subscribe Box Responsive
1. Pasang isyarat CSS berikut dibawah isyarat <style type='text/css'> atau sebelum isyarat </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 isyarat 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 ihwal cara membuat subscribe box responsive pada blog. Jika ada yang masih kurang jelas, silahkan usikan pertanyaan di kolom komentar, dan kalau postingan ini bermanfaat silahkan di share. Terima kasih