Cara Membuat Widget Subscribe Box Keren Diblogger | nafasmedia
css html
nafasmedia | Halo apa kabar semua? lama tidak berjumpa karena saya sedang membuat blog baru filmmedia dan jangan lupa untuk mengunjugi ya!. baik kembali ketopik, setelah saya pikir pikir membuat widget subscribe box keren juga akan membuat blog kalian tampak lebih bagus lagi. kegunaan kotak subscribe box ini adalah supaya pengunjug anda dapat mendapatkan artikel terbaru dari blog anda. selain itu kalian tidak akan kehilangan pengunjung anda, karena dengan orang yng berlangganan artikel anda akan membuat mereka mendapatkan email pemberitahuan, bahwa blog kalian terdapat artikel baru.
Sebelumnya silahkan lihat dulu demonya di codepen dibawah atau langsung melihatnya di website.
DEMO CODEPEN:
DEMO WEBSITE:
Bagaimana keren bukan? jika kalian tertarik membuatnya silahkan ikuti langkah langkah dibawah ini dengan teliti agar tidak ada yang terlewat.
TUTORIALNYA:
Oke langkah pertama silahkan masuk ke akun blogger kalian masing masing dan masuk ke menu Template lalu edit html, jika sudah copy semua kode css ini dan pastekan di atas kode </style>.
#wp-subscribe { padding:15px; background: #ffffff; }
#wp-subscribe h4.title { font-size:18px; color:#263638; line-height: 1;text-align: center; margin-bottom: 0; margin: 10px; font-weight: 500}
#wp-subscribe h4.title span {display: inline-block; font-size: 35px; margin-top: 10px;font-weight: 700}
#wp-subscribe p { color: #000000; margin: 0; text-align: center; }
#wp-subscribe p.text { margin: 15px 0;font-size: 15px; }
#wp-subscribe input { border: none; width: 100%; text-align: center; box-sizing: border-box; padding: 10px 0; margin: 0; box-shadow: none; border-radius: 0; height:60px; }
#wp-subscribe .email-field {}
#wp-subscribe input.email-field {color: #000000; background: #ffffff; border: 1px solid #ddd; border-radius: 100px; box-shadow: 4px 4px 15px rgba(0,0,0,0.1); font-size: 15px;}
#wp-subscribe input::-webkit-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-moz-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input::-ms-input-placeholder { color: inherit; opacity: 0.8; }
#wp-subscribe input:focus::-webkit-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus:-moz-input-placeholder { color: transparent !important }
#wp-subscribe input:focus::input-placeholder { color: transparent !important }
#wp-subscribe input.submit {background:#263638;color: #fff; margin-top:20px; font-size: 20px; font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing:1px; border-radius: 100px;font-family: 'Google Sans', sans-serif;}
#wp-subscribe p.footer-text { margin-top: 10px; font-size: 12px; }Jika sudah silahkan simpan template dan masuk ke menu Tata Letak lalu silahkan tentukan dimana kalian akan memasang subscribe box ini. jika sudah silahkan tambahkan gadged lalu pilih html/javascript dan copy semua kode html ini lalu pastekan saja di sana dan jangan lupa simpan.
<div class="wp-subscribe no-name-field" id="wp-subscribe">
<h4 class="title">get more nice stuff <br /> <span>in your inbox</span></h4>
<p class="text">instantly by Subscribing to us. So you will get email everytime we post something new here</p>
<form action="https://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('https://feedburner.google.com/fb/a/mailverify?uri=USER_NAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" _lpchecked="1"> <input class="email-field" type="text" value="" placeholder="enter email id here..." name="email" /> <input type="hidden" value="USER_NAME" name="uri" /><input type="hidden" name="loc" value="en_US" /> <input class="submit" name="submit" type="submit" value="Subscribe Now" /></form>
<div class="clear"></div>
<p class="footer-text">We guarantee you won't get any other SPAM</p>
</div>
Dan jangan lupa ganti USER_NAME dengan username feedburner kalian masing masing. nah jika sudah semua silahkan lihat hasilnya.
PENUTUP:
Baiklah itu saja yang bisa saya sampaikan, terimakasih atas kunjungannya. sampai jumpa dinext Artikel.
