'Social Buttons Profile' Thesis Email Subscription Widget

Here we have it guys yet another elegant Thesis email subscription widget with social media buttons including Facebook, Twitter, Google+, RSS and YouTube. We have always tried to bring out widgets that are comprehensive and not in parts. So this very social subscription widget targets your social media profiles with Feedburner email subscription form with a 'No Spam' shout out.

Have a look of the widget below. (DEMO).
'Social Buttons Profile' Thesis Email Subscription Widget



Follow the instructions below to add this amazing new social subscription widget to your blogs. Note, that being named 'Thesis' doesn't means that it can only be added to WordPress blogs. The name refers to its style that is pretty similar to what we usually see in Thesis style WordPress templates.

So you can easily add these widgets to your WordPress or Blogger blogs.
Before we move on, you may like to see our previous subscription widgets:


Step #1 Add your social media profiles to the widget


So the first step is fairly simple and needs you to add your Feedburner and all those other social media profiles links (Facebook, Twitter, Google+, RSS, YouTube). Once done, we will then add the widget to your blog in the next step.

First, customize the links below.

[lock]
 [<div id="sidebars">
<ul class="sidebar_list">
<li id="social-profiles">
<ul>
<li>
<a class="social facebook" rel="nofollow" target="_blank" title="Facebook FanPage" href="YOUR FACEBOOK PROFILE LINK">Facebook</a>
</li>
<li>
<a class="social twitter" rel="nofollow" target="_blank" title="Twitter Profile" href="YOUR TWITTER  PROFILE LINK">Twitter</a>
</li>
<li>
<a class="social googleplus" rel="nofollow" target="_blank" title="GooglePlus" href="YOUR GOOGLE+ PROFILE LINK">GooglePlus</a>
</li>
<li>
<a class="social rss" rel="nofollow" target="_blank" title="RSS" href="http://feeds.feedburner.com/FEEDBURNER ID">Rss</a>
</li>
<li>
<a class="social youtube" rel="nofollow" target="_blank" title="Youtube Channel" href="http://www.youtube.com/YOUR YOUTUBE CHANNEL USERNAME">Youtube</a>
</li>
</ul>
</li>
<li id="sidebar-social">
<p id="email-notice">
Join this Awesome WordPress Community and receive free email updates!
<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=bloggingehow', '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="bloggingehow" name="uri">
<input type="hidden" name="loc" value="en_US">
<input class="button" type="submit" value="Hook Me Up">
<p>
We never encourage SPAM
<br>
You can Unsubscribe any time
</p>
</form>
</div>
</li>
</ul>
</div>
<style>
 #sidebars {
    border: 0 none;
    float: right;
    padding: 0 15px;
    width: 310px;
}
#email-notice {
    background: none repeat scroll 0 0 #DF6001;
    color: #FFFFFF;
    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 #DF6001;
    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("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>]
[/lock]

Step #2 Add the widget to your blog


Simply navigate towards your Blogger Dashboard >> Layout >> Add a Gadget >> HTML/JavaScript. Now paste the above customized widget code in the gadget. Hit save and you're all done!

Liked The Widget?


Guys, let us know what do you think about the widget? What more features do you wish to be added in the above social media subscription widget? Will be waiting for your response.

Take care fellows!

COMMENTS

BLOGGER: 1
Loading...
.
Name

AdSense affiliate marketing Announcement AskHassam Blogger Blogging Tips Blogosphere News Bluehost Building Traffic BuySellAds Contest Customizations Disqus Tutorials Domain Hosting Drop Down Menus eBook Email Marketing Facebook Tutorials Feedburner Freelancing Giveaway Google Google Analytics Google Gmail Google Plus Tricks Guest Post HowTo Interview Making Money Online Monetization Motivation PayPal Pinterest Plugins review SEO Slideshare Social Media Top Lists Twitter Wordpress YouTube
false
ltr
item
BloggingeHow | Making Blogging Simpler: 'Social Buttons Profile' Thesis Email Subscription Widget
'Social Buttons Profile' Thesis Email Subscription Widget
http://3.bp.blogspot.com/-3giEhmaA9Kk/UfMg328R3tI/AAAAAAAALag/LfZ0hnrrXUE/s1600/'Social+Buttons+Profile'+Thesis+Email+Subscription.png
http://3.bp.blogspot.com/-3giEhmaA9Kk/UfMg328R3tI/AAAAAAAALag/LfZ0hnrrXUE/s72-c/'Social+Buttons+Profile'+Thesis+Email+Subscription.png
BloggingeHow | Making Blogging Simpler
http://www.bloggingehow.com/2012/10/social-buttons-profile-thesis-email.html
http://www.bloggingehow.com/
http://www.bloggingehow.com/
http://www.bloggingehow.com/2012/10/social-buttons-profile-thesis-email.html
true
5839591175544873606
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy
Resources

Tools of the Trade