Premium Thesis Email Subscription Widget For Blogger


Today, I will show you how to add a premium thesis email subscription widget to blogger blog. This widget contains links to all of your major social profiles like Facebook, Twitter, Google Plus, RSS Feed and YouTube. Also there is an
awesome Email Subscription Box below it which is there to increase your feedburner subscribers. There is also an attractive message banner for you visitors and your loyal readers. You can display any message which attracts your visitors to get subscribed. You can get this on your blog/website sidebar in few steps given below.


Here I am providing a live demo for this widget so that you can find it how it actually visible. Click the below button:

LIVE DEMO


How to Add Premium Thesis Email Subscription Widget to Blogger Blog?


STEP #1: Log on to Blogger 

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

<!-WIKITECHNOL thesis email subscription widget->
<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook Fan Page" href="https://www.facebook.com/WIKITECHNOL">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/WIKITECHNOL">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/107244857879006042054">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/WIKITECHNOL">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/WIKITECHNOL">Youtube</a>
</li>
</ul>
<li id="sidebar-social">
<p id="email-notice">
Join over 300 people who get free and fresh content delivered automatically.
<span></span>
</p>
<div id="email-form">
<h6>Get Email Updates</h6>
<form class="nice custom" style="" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=WIKITECHNOL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="input-text" type="text" name="email" onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your Email Address&#39;;}" onfocus="if (this.value == &#39;Enter Your Email Address&#39;) {this.value = &#39;&#39;;}" value="Enter Your Email Address" />
<input type="hidden" value="WIKITECHNOL" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="let me in" />
<p>
We Respect Your Privacy.
<br />
We never encourage SPAM. You can unsubscribe any time.
</p>
</form>
<span style=" line-height:0px; font-size:8px; font-weight:bold; margin-left:250px;
   ">
 <a style="color:#000000;" href="
http://wikitechnol.blogspot.com/2012/11/premium-thesis-email-subscription.html">Widget</a> </span>
</div>
</li>
</ul>
</div>
<style>
 #sidebars {
    border: 0 none;
    float: right;
    padding: 0 15px;
    width: 310px;
}
#email-notice {
    background: none repeat scroll 0 0 #66CCFF;
    color: #000000;
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 20px;
    padding: 15px 20px;
    position: relative;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2);
}
#email-notice span {
    border-left: 14px solid transparent;
    border-right: 14px solid transparent;
    border-top: 10px solid #66CCFF;
    bottom: -10px;
    height: 0;
    position: absolute;
    right: 40px;
    width: 0;
}
#email-form {
    background: none repeat scroll 0 0 padding-box #313131;
    border-bottom: 5px solid #202020;
    border-radius: 2px 2px 2px 2px;
    text-shadow: 0 -1px 0 #000000;
}
#email-form h6 {
    color: #FFFFFF;
    font-family: arial;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 0;
    padding: 15px 20px 0;
    text-transform: none;
}
#email-form form {
    color: #FFFFFF;
    margin: 0;
    padding: 20px 18px;
}
#email-form input.input-text {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #222222;
    margin: 0 0 10px;
    padding: 8px;
    width: 94%;
}
#email-form .button {
    background: none repeat scroll 0 0 #FFFFFF;
    float: right;
    margin: 0 0 0 10px;
}
#email-form p {
    color: #CCCCCC;
    font-size: 12px;
    line-height: 18px;
    margin: 0;
}
#sidebar-social {
    float: left;
    font-size: 12px;
    margin: 0 0 15px;
    width: 100%;
}
ul.sidebar_list {
    list-style: none outside none;
}
li.widget ul {
    list-style: none outside none;
}
#social-profiles {
    float: left;
}
#social-profiles ul {
    float: left;
    list-style: none outside none;
    margin: 0 -12px 10px;
}
#social-profiles ul li {
    float: left;
}
#social-profiles ul li a {
    display: block;
    float: left;
    height: 32px;
    margin: 0 15px;
    text-indent: -999em;
    width: 32px;
}
#social-profiles a.social {
    background: url("http://1.bp.blogspot.com/-iyMNWqbxNls/UGlLYtLKIgI/AAAAAAAAGw0/SuMYnqQiXt4/s1600/social.png") no-repeat scroll 0 0 transparent;
}
#social-profiles a.facebook {
    background-position: -79px 0;
    height: 32px;
    margin: 0 15px 0 5px;
    width: 32px;
}
#social-profiles a.facebook:hover {
    background-position: -79px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter {
    background-position: -5px -111px;
    height: 32px;
    width: 32px;
}
#social-profiles a.twitter:hover {
    background-position: -42px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube {
    background-position: -42px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.youtube:hover {
    background-position: -5px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss {
    background-position: -42px -74px;
    height: 32px;
    width: 32px;
}
#social-profiles a.rss:hover {
    background-position: -79px -37px;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus {
    background-position: -5px 0;
    height: 32px;
    width: 32px;
}
#social-profiles a.googleplus:hover {
    background-position: -5px -74px;
    height: 32px;
    width: 32px;
}
* {
    margin: 0;
    padding: 0;
}
.custom .sidebar ul.sidebar_list {
    padding: 15px 0;
}
</style></!-WIKITECHNOL>


Customization:

  • Replace WIKITECHNOL with your Facebook username.
  • Replace WIKITECHNOL with your Twitter username.
  • Replace WIKITECHNOL with your feedburner username.
  • Replace 107244857879006042054 with your Google+ ID.
  • Replace WIKITECHNOL with your YouTube ID.
  • Change the Orange text with the message you want to display.


STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.


{ 0 comments... read them below or add one }

Post a Comment