WordPress Blogs are usually better looking then blogger, Same goes for widgets. Today I'll show you How to get WordPress Style Thesis Subscribe widget for blogger.
Features
- Social Buttons: Facebook, Twitter, Google+, RSS, YouTube.
- Email Subscription Form.
- Professional looking.
How to Add it on Blogger.
- Log in to Blogger
- Go to Layout > Add a Gadget
- Choose HTML/Javascript
- Add the following code to it.
<!- Thesis Email Subscribe 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/trickyblogger">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="https://twitter.com/trickyblogger">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="https://plus.google.com/117521503834739609237">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/TrickyBlogger">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/user/area51blog">Youtube</a>
</li>
</ul>
</li>
<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=The-Area51', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input class="input-text" type="text" name="email" onblur="if (this.value == '') {this.value = 'Enter Your Email Address';}" onfocus="if (this.value == 'Enter Your Email Address') {this.value = '';}" value="Enter Your Email Address" />
<input type="hidden" value="InfozGuide" name="uri" />
<input type="hidden" name="loc" value="en_US" />
<input class="button" type="submit" value="Hook Me Up" />
<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:270px;
">
<a style="color:#000000;" href="http://www.the-area51.com">Get this</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 5px 20px;
}
#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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgV4HGsKEtzkAHVEOYjI_utD2AMVf4KFy7pFd_pHC0r31e_Bdd9eVtMsu1KCaLorkASHwmclZGZB6ZSggd5vkVFOvmscLkLm9EBXgYMrp0tebd30REwd4Y3HxOTxCJaw6alrh778kXkpPk/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>
<!- Thesis Email Subscribe Widget ->
- Now Make the following changes.
Replace trickyblogger with your Twitter Username.
Replace 117521503834739609237 with your Google+Username.
Replace TrickyBlogger with your FeedBurne Username.
- Save Widget.
