Tips Blogger - Cara Membuat Subscription Box Mudah dan Berkualitas – kali ini kita akan belajar mengenai Cara membuat Subscription Box Mudah dan Berkualitas. Subscription Box memungkinkan pengunjung untuk selalu mengikuti Artikel terbaru di dalam Blog sobat. jadi ketika Ada pengunjung yang memasukkan email nya kedalam Box tersebut maka secara otomatis ketika sobat meng-upload sebuah artikel Subscription Box akan mengirimkannya juga di Email yang sudah di daftrakan kedalamnya. Jadi Subscription Box ini sangatlah berguna untuk emcari Visitor Tetap atau pengunjung yang selalu rutin mengunjungi blog kita, selama kita rutin pula meng upload artikel.
Sebetulnya bagi yang sudah paham dengan koding blog mungkin tidak akan kesulitan untuk mencari kode dalam suatu halaman blog, karena semua kode yang di inginkan akan sangat mudah sekali di Copy paste lewat Inspect Elements atau dari Page Source dari halaman Blog. Meskipun demikian saya akan tetap membagikan tutorial bagaimana cara membuat Subscription Box yang sangat keren dan menarik seperti Blog ini. Berhubung masih banyak yang belum tahu, langsung saja di simak informasinya berikut ini.
Cara membuat Subscription Box Mudah dan Berkualitas
1. Pertama buka Blog > Template > Edit HTML
2. Selanjutnya tambahkan kode berikut ini tepat di atas kode ]]></b:skin> atau </style>
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%;}
3. selanjutnya tambahkan markup di bawah ini bebas di antara teg pembuka <body> dan teg penutup </body>.
HTML
<div id='subscribe-css'><p class='subscribe-note'><span>SUBSCRIBE</span> <span class='itatu'>TO</span> OUR NEWSLETTER</p><div class='subscribe-wrapper'><div class='subscribe-form'><form action='http://feedburner.google.com/fb/a/mailverify?uri=AzmiDesign' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri= AzmiDesign ', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'><input name='uri' type='hidden' value='AzmiDesign'/><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>
4. setelah semua selesai, simpan template dan lihat hasilnya.
Demikianlah tutorial mengenai Cara Membuat Subscription Box Mudah dan Berkualitas. Semoga dapat menambah ilmu pengetahuan Blog sobat dan selamat mencoba..
0 Komentar