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..
EmoticonEmoticon