Today, we will be designing a professional looking subscription box that you can put on your website or your blog. This will be just a simple but professional looking box that will feature all the text you need to display to your users in order to allow them to subscribe to your blog or website.
You can also use this box for displaying any other information you want to your users, not necessarily just the subscription. You can make use of this good-looking box for displaying your Author Bio or such stuff too! I will try my best to explain you each and every step that we do in this development process. We will make use of CSS to do the designing. If you are unaware about CSS, read our post “Learn CSS from Scratch” to know about CSS.
Here is a screenshot of what we are actually doing or what the final output is going to be:
Getting Ready for the Designing:
You will need to get images for the box that you will be using. If you want to use our images, you can use the same by downloading it by clicking here and later change on to something else. But if you want to do this tutorial using your own images, I would recommend you to get those images now, before starting the designing process!
The HTML Part:
Select and copy the HTML code below and paste it on your webpage where you want the box to be displayed. If you are using WordPress, you can add the following code to a new widget, where you want the box to be displayed.
<div> <div> <a href="http://feeds.feedburner.com/SlashCodingFeed">RSS</a></div> <h4>Subscribe to SlashCoding.com</h4> <p>Subscribe to our feeds to stay updated with everything.<br/><br/> We will not spam you in any way! And you can unsubscribe whenever you want, it is pretty easy!</p> <a href="http://feeds.feedburner.com/SlashCodingFeed">Click here to subscribe</a><br /> <font size="2px" color="#909192">Spam Free Feeds Guaranteed</font> </div>
You can change the HTML part of the webpage to allow you to link your RSS Feeds. Also, you can add options for various other social networks that you might want to offer to your readers.
The Designing Part (The CSS):
The following CSS part must be pasted into your webpage’s CSS file. If you are using a pre-designed theme, I recommend you to install a plugin that allows you to add custom CSS to your website and then add this there rather than changing in the actual theme’s CSS files.
.slashCoding-box {
margin-top: 30px;
margin-bottom: 10px;
margin-right: auto;
margin-left: auto;
position:relative;
width:430px;
border:1px solid #e0d5d5;
background:#f5f2f2 ;
padding:15px 32px 10px 32px;
font-weight:bold;
font-size:14px;
line-height:16px;
text-align:center;
}
.slashCoding-box div {
position:absolute;
right:-20px;
top:-20px;
width:60px;
height:60px;
background:url(box.png) no-repeat;
}
.slashCoding-box div a {
display:block;
width:100%;
height:100%;
overflow:hidden;
text-indent:-999em;
}
.slashCoding-box h4 {
font-size:1em;
color:#f00;
margin:0 0 1.5em;
}
.slashCoding-box p {
margin:0 0 1.5em;
}
.slashCoding-box a,
.slashCoding-box a:visited {
color:#3333f5;
text-decoration:underline;
}
.slashCoding-box a:hover,
.slashCoding-box a:focus {
color:#f00;
text-decoration:none;
}
Hope this article helps you do some creative stuff on your website or blog. Feel free to contact me if you have any doubts or use the comments section below. We are always happy to help you in any way we can! Stay subscribed to Slash Coding to learn more about CSS and other fields.
