How to Make a Subscription Box for Arlina Design
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.
Βιέννη
Ich fische besonders gerne in trüben Gewässern ... Was ich hier teile, ist nur ein Test und zielt darauf ab, den Rand des Sumpfes zu vergrößern. Ich bin nicht verantwortlich, wenn Probleme auftreten, NM ist auch ein Experiment
