How to Make a Subscription Box for Arlina Design - A blog tutorial that I will share this time is a subscription box / subscription box that you can install on your blog.
For demo view box subscriptions like the Arlina Design blog, you can see below.
I made this tutorial at the request of a blogger friend who wants to install a Subscription Box like this blog. Actually for those who are already familiar with coding blogs, it might not be difficult to find the code in a blog page, because all the desired code will be very easy to copy and paste through Inspect Elements or Page Source from the blog page. But I will still share this tutorial so that bloggers can add it easily.
How to Make a Subscription Box for Arlina Design
Immediately, here you just need to follow these simple steps.
1. Open Blogger> Template> Edit HTML
2. Add the code below above the code ]]></b:skin> or </style>
/* 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%;}
For colors and so on, you can edit it again according to taste3. Then add the markup below it is free between the opening <body> tag and the closing tag </body>. For example, like this blog, I added it in the Footer-wrapper section
<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=Wiendhy' class='subscribe-form' method='post' onsubmit='window.open ('http://feedburner.google.com/fb/a/mailverify?uri=Wiendhy', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true' target='popupwindow'>
<input name='uri' type='hidden' value='Wiendhy'/><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>
Replace all codes marked Wiendhy with your feedburner blog id
4. After that save the template and see the results.
That's the tutorial on How to Make a Subscription Box for Arlina Design. Thank you and hope it is useful.