There are many subscription widgets available online that you can get from various sites but the thing you must consider while selecting your subscription widget is to look for a professional looking subscription box which suits your website layout. So here i am providing you one such professional looking subscription box. This widget is easy to install, looks professional and easily merges with your blog's template. The best thing about this widget is you can install this widget in your blogs layout by using add a gadget option and also you can install this widget directly to your template. In this tutorial i will show you both the methods of installing this widget. This widget has some features like in header section you can leave a short message for your visitor that why they subscribe your newsletter also it asks for the name of visitor who is subscribing to your blog. This widget also adjust its text and background color according to your blog's template and hence it does not affect the look and feel of your blog.
Below are the steps describing you how to install this widget to blogger :
How to add Subscription widget to Blogger Layout ?
- Log in to your Blogger Account.
- Go to Dashboard >> Layout >> Add a gadget.
- Then select HTML/JavaScript from the list.
- Now in HTML/JavaScript content box copy and paste the below code in it.
<!-- subscription widget code starts -->
<b:if cond='data:blog.pageType == "item"'>
<!-- Newsletter Widget By Www.BlogGenes.Com -->
<style>
#bloggenes-sbox {
height:250px;
width:280px;
background:hsla(0,0%,95%,0.4);
padding:3px;
border:3px solid hsla(0,0%,67%,0.19);
border-radius:10px 10px 10px 10px;
}
#bloggenes-sboxh3 {
text-align:center;
margin:4px;
text-transform:uppercase;
font-weight:bold;
font-family:'Merienda';,cursive;
font-size:1.1em;
letter-spacing:0.7px;
}
#bloggenes-sboxheader {
border-bottom:1px solid #ddd;
border-top:1px solid #ddd;
font-size:11px;
padding-bottom:3px;
font-family:'Marmelad',sans-serif;
text-align:left;
}
.bloggenes-sbox-form {
padding:10px;
}
#bloggenes-sboxheader img {
padding-right:5px;
}
.bloggenes-sbox-name {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKkaDlVoyi50DMyXDU_z4h2Mk22UIFbup5pYYuxEruVkOgV-BA9ujeNntNMttUIwOVaN3z341jdoRiuw7cTja5wth6RCtn4XNqvKLGT8H8DcvqY6yIubF7ImJM1m9XaGC06V3XFkYH4G0/s320/name.png) no-repeat 7px 8px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:11px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:80%;
height:16px;
padding:5px 15px 5px 22.5px;
vertical-align:top;
display:inline-block;
}
.bloggenes-sbox-email {
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiB2_15JfdFx32JdsXJ-4nwwiygcPzTwiD-FBTlZXxFhVslf2vdRYt54pxb5Hn6TMrhwK_-oTiTNECpq4HGxZe-EQgRUM3n_MsbtwghqRZzw5-L_eqZjHs66SM3S2pMmukWBW8foh5gQAc/s320/email.png) no-repeat 7px 10px;
border:1px solid #ddd;
font-family:Arial,sans-serif;
font-size:11px;
font-weight:bold;
color:hsla(0,0%,27%,0.69);
width:80%;
height:16px;
margin-top:10px;
padding:5px 15px 5px 22.5px;
vertical-align:top;
display:inline-block;
}
.bloggenes-sbox-name:hover,.bloggenes-subsbox-email:hover {
border:1px solid #bebebe;
box-shadow:0.5px 1.5px 2px rgba(5,95,255,.1);
}
.bloggenes-sbox-submit {
float:right;
margin-top:10px;
-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;
-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;
box-shadow:inset 0px 1px 0px 0px #ffffff;
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#ededed),color-stop(1,#dfdfdf) );
background:-moz-linear-gradient( center top,#ededed 5%,#dfdfdf 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed',endColorstr='#dfdfdf');
background-color:#ededed;
-moz-border-radius:6px;
-webkit-border-radius:6px;
border-radius:6px;
border:1px solid #dcdcdc;
display:inline-block;
color:#777777;
font-family:arial;
font-size:13px;
font-weight:bold;
padding:4px 16px;
text-decoration:none;
text-shadow:1px 1px 0px #ffffff;
}
.bloggenes-sbox-submit:hover {
background:-webkit-gradient( linear,left top,left bottom,color-stop(0.05,#dfdfdf),color-stop(1,#ededed) );
background:-moz-linear-gradient( center top,#dfdfdf 5%,#ededed 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf',endColorstr='#ededed');
background-color:#dfdfdf;
}
.bloggenes-sbox-submit:active {
position:relative;
top: 1px;
}
</style>
<link href='http://fonts.googleapis.com/css?family=Marmelad' rel='stylesheet' type='text/css'/>
<link href='http://fonts.googleapis.com/css?family=Merienda' rel='stylesheet' type='text/css'/>
<center>
<div id='bloggenes-sbox'>
<div id='bloggenes-sboxh3'>
Subscribe To Our Newsletter
</div>
<div id='bloggenes-sboxheader'>
<a href='http://goo.gl/6rQJK'><img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpNABC7Dineu73XtzoZUIl3r_mls2OidmZbUzgm2vjwnerDUBSQOaHAxG0Be5HvFJJ1pMNfrTIcGb6iJj4u2QMkDU5Yc89TNJSaVhovmdGx3RzknqKZZ48MqeqPmacK1-GCOu6BRDi3PM/s1600/mail-icon.png' style='float:left;'/></a>
<p style='margin-top:13px;'>
Get Blogging Tips and Widgets Straight To Your Inbox By Submitting Your Email ID Below. It's 100% Free!
</p>
</div>
<form action='http://feedburner.google.com/fb/a/mailverify?uri=BlogGenes' class='bloggenes-sbox-form' method='post' target='_new'>
<input class='bloggenes-sbox-name' name='name' onblur='if (this.value == '') {this.value = 'Your Name';}' onfocus='if (this.value == 'Your Name') {this.value = '';}' value='Your Name'/>
<input class='bloggenes-sbox-email' name='email' onblur='if (this.value == '') {this.value = 'Your Email Adress';}' onfocus='if (this.value == 'Your Email Address') {this.value = '';}' value='Your Email Address'/>
<input class='bloggenes-sbox-submit' type='submit' value='Sign Up!'/>
</form>
<p style='font-family:times new roman;margin-top:5px;font-size:10.5px;'>
<b>We Hate Spam! </b>Really, It's terrible and we never do it.
</p>
</div>
</center>
</b:if>
<!-- subscription widget code ends -->
- Now save your gadget and you are done.
How To add Subscription Widget to Blogger Template ?
- Go to Dashboard >> Template >> Edit HTML.
- Now search for the following code:
<data:post.body/>
Note: This code appears three or four times in blogger templates, so search the third one.
- Now paste the Subscription code(provided above) just below it.
- Then Save your template and you are done.
Customizations:
- Replace "BlogGenes" shown in red with your Feedburner user name.
- Replace the text in blue with your message.
- To change the height and width of the widget simply change the values in green.
0 comments:
Post a Comment