New Style Subscribe E-mail Box for the Blogger Blog !!

Do you know what a Email subscribe box or Subscription Form is? A box which brings high traffic to your blog. People just put their email address in an ordinary box and then click on the "Subscribe" button and then, they would get all your blog's new material right on their email's Inbox and if you have FeedBurner's summary feature enabled, they will come to your blog by reading an interesting heading on the reached email.

• Adding Jquery Plugin

1. Go To Dashboard > Template > Edit HTML

2. Open a Search box by clicking inside the code box and pressing Ctrl+F on Windows or Cmd+F on Mac.

3. Search for </body> and above it, paste following code:

<link href='http://fonts.googleapis.com/css?family=Oswald%3A400&subset%3Dlatin%2Clatin-ext&ver%3D4.1' rel='stylesheet' type='text/css'/>

4. Find this code ]]:</b:skin> and just before that paste the css code given below.

/*------- Stylish Sidebar Subscription Box Widget------*/
#GulpaTutorial-sbox {
padding: 0;
margin: 0;
width: 100%;
height: 375px;
border-radius: 1px;
border: 0;
background: blue;
}
#GulpaTutorial-sbox .tagline {
padding: 5px 0px 0px 0px;
line-height: 35px;
height: 45px;
font-size: 25px;
font-weight: normal;
font-family: "Oswald",sans-serif;
text-shadow: 0px -1px 0px #fff;
color: #000;
text-align: center;
background: #7fffd4;
border: 5px solid #7fffd4;
border-bottom: 10px solid transparent;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
}
#GulpaTutorial-sbox .sub-tagline {
font-family: "Oswald", sans-serif;
font-size: 19px;
color: #FFF;
text-shadow: 0px -1px 0px #000;
line-height: 30px;
padding: 0px 10px 0px 10px;
text-align: center;
margin: 0;
}
#GulpaTutorial-sbox .item-list {
margin: 10px 0px 0px 0px !important;
}
#GulpaTutorial-sbox .item-list > ul {
padding: 0px 0px 0px 50px !Important;
margin: 0 !important;
}
#GulpaTutorial-sbox .item-list > ul > li {
font-family: "Oswald", sans-serif;
font-size: 15px;
margin-left: 10px;
color: #E8E8E8;
line-height: 24px;
text-align: left;
text-shadow: 0px -1px 0px #000;
list-style: none !important;
list-style-type: none !important;
margin: 0px !important;
padding: 0px !important;
border: 0 !important;
}
#GulpaTutorial-sbox .rssform {
padding: 0px 20px;
margin: 16px 0px 16px 0px;
}
#GulpaTutorial-sbox .rssform input {
padding: 8px;
font-size: 13px;
font-family: "Oswald", sans-serif;
font-weight: normal;
width: 100%;
text-transform: lowercase;
outline: none !important;
border: none;
border-radius: 1px;
box-sizing: border-box !important;
-moz-box-sizing:border-box;
}
#GulpaTutorial-sbox .rssform .button:hover {
background: red;
}
#GulpaTutorial-sbox .rssform .button {
background: #7fffd4;
color: #000!important;
border: 0;
margin-top: 15px;
outline: none !important;
transition: all .3s ease-in-out;
width: 100%;
padding: 6px !important;
float: none;
text-transform: uppercase;
font-family: "Monotype Corsiva", sans-serif;
font-size: 18px;
font-weight: bold;
cursor: pointer;
}
#GulpaTutorial-sbox .lock-policy a {
color:#fff;
text-decoration:none !Important;
}
#GulpaTutorial-sbox .lock-policy {
font-family: "Oswald",sans-serif;
background: url no-repeat 10px -2px;
color: #fff;
text-align: center;
font-size: 12px;
margin-left: 10px;
padding: 0px;
line-height: 30px;
margin-top: -5px;
}

• Adding Widget Code

1. Go to Layout > Add A Gadget

2. Select HTML/Javascript

3. Paste the following code inside it,

<div id='GulpaTutorial-sbox'>
            <div class='tagline'>
            Wait! Did You Know?
            </div>
                <div class='sub-tagline'>Why should you subscribe?</div>
<div class="item-list">
<ul>
<li><div style='color: #90ee90; display: inline-block; font-size:17px; 

letter-spacing: 4px;'>&#10004;</div> Adobe Photoshop Tutorial</li>
<li><div style='color: #ff00ff; display: inline-block; font-size:18px; 

letter-spacing: 4px;'>&#10004;</div> Blogger Widgets & Tips</li>
<li><div style='color: #90ee90; display: inline-block; font-size:19px; 

letter-spacing: 4px;'>&#10004;</div> HTML, CSS, JaveScript Code</li>
<li><div style='color: #ff00ff; display: inline-block; font-size:18px; 

letter-spacing: 4px;'>&#10004;</div>Any Others Important Information</li>
</ul>
</div>
            <div class='rssform'>
            <form action='http://feedburner.google.com/fb/a/mailverify' method='post' target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=GulpaTutorial', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
            <input type='text' name='email' placeholder='Enter your email address...' />
            <input type="hidden" value="GulpaTutorial" name="uri"/>
            <input type="hidden" name="loc" value="en_US"/>
            <input value="Subscribe Now" class="button" type="submit" />
            </form>
            </div>
<div class="lock-policy">
   Safe With Us | <a href="http://gulpatutorial.blogspot.in/p/privacy-policy-for-gulpa-tutorial.html">Privacy Policy</a> 
</div>
            </div> 

• Replace GulpaTutorial with your feedburner username.
• Replace http://gulpatutorial.blogspot.in/p/privacy-policy-for-gulpa-tutorial.html with your Privacy Policy Link.
• You can replace text by editing the yellow highlighted code.
• Now, save your template.

So today no such issue as the first to comment below. Of course if you like to read everyone the opportunity to share the day with friends.

• Tweet
• Share
• Share
• Share
• Share