How to get Social Buttons and Email Subscription all in one Blogger Widget
Get Social button and email subscription on your blog and by having this widget help your blog to have more and more and more traffic and more people will able to discover your content
<!-- BloggingeHow Email Subscription Widget Thesis Style-->
<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>
<Script Language='Javascript'>
<!--
document.write(unescape('%3C%70%20%73%74%79%6C%65%3D%22%20%6C%69%6E%65%2D%68%65%69%67%68%74%3A%30%70%78%3B%20%66%6F%6E%74%2D%73%69%7A%65%3A%37%70%78%3B%20%66%6F%6E%74%2D%77%65%69%67%68%74%3A%62%6F%6C%64%3B%20%74%65%78%74%2D%61%6C%69%67%6E%3A%72%69%67%68%74%22%3E%3C%61%20%73%74%79%6C%65%3D%22%63%6F%6C%6F%72%3A%23%44%33%44%33%44%33%3B%22%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%77%77%77%2E%62%6C%6F%67%67%69%6E%67%65%68%6F%77%2E%63%6F%6D%22%3E%50%6C%75%67%69%6E%20%62%79%3A%20%42%6C%6F%67%67%69%6E%67%65%68%6F%77%2E%63%6F%6D%3C%2F%61%3E%3C%2F%70%3E%20'));
//-->
</Script>
</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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQCycdOsxvpju_MP4pRa18lUh6jszjxvpmmS1O540Lx6U3mFhRlm0_Nz9ISRmHJsXCWN5QwqTE4RrC_-Q-EcxPFdlk3DZT3ovfRE5h4ayr4PWUsBvEyLoMC41P5V3q2iop6gQJi4Nsuac/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>
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!
0 (mga) komento:
Post a Comment