Add CSS Social Media Follow Us Buttons with Hover Effect

Today I'll tell you cool blogger trick of subscribe now widget. It called as how to add CSS social media follows us buttons with hover effect on mouse over. This blogger widget includes RSS, Twitter, Facebook, Google Plus and YouTube hover social media buttons on mouse hover. It has also twitter follow button, Google plus 1+ button, RSS feed count button and nice CSS email subscribe box. Subscribe Now widget includes HTML and CSS coding tags that will make your site as professional blogger. You can easily paste this widget on your blogger blog sidebar (left or right). Just copy this code and do the necessary changes in it before saving this widget.

In previous post I've told you about How To Add CSS Rotating Social Media Buttons With Email Subscribe Box And Feed Count. After success of this social media follow us button with rotating effect. I decided to tell my visitors about this nice and cool widget. I recommend you to add this widget on your blogger sidebar at the top of right or left side. It should increase your site strength on social media and email subscribers.

How to add CSS social media follow us buttons with hover effect ?

Step 1. Log in to Blogger Dashboard

Step 2. Now Click on Layout and Select Add a Gadget

Step 3. Choose Add a new HTML/JavaScript Gadget

Step 4. Type 'Subscribe Now!' in Title (or what you want)

Step 5. Paste the following code in the empty HTML box:

<style>
.Subscribe-Starsblogging h6{
background:URL(http://4.bp.blogspot.com/-koRv-wLVoJ4/UDReC1-KqnI/AAAAAAAAAxc/q3-D0_cGK6o/s1600/Subscribe+More+Blog+Tools.png) no-repeat;height:50px;
margin:0px 0 0px 0;
padding:0px 20px 0px 0px;
font-size:0px;
font-family:Sans-serif, Arial, Helvetica;
font-weight:bold;
text-transform:uppercase;
color:#ffffff;
text-shadow:0 1px 0 #fff;
}
ul.social { list-style: none; margin: 10px; overflow: hidden;
}
.social li { float: left; background: none !important; padding: 0 !important; margin: 0 4px;
}
.social li a { display: block; width: 50px; height: 40px; background: url("http://4.bp.blogspot.com/-gANW8x7jzug/UGnr7YEermI/AAAAAAAABDY/pN1opxmSfwY/s1600/Subscribe+More+Blog+Tools+Social+Icons.png") no-repeat transparent; text-indent: -99999em !important;
-webkit-transition: ease-in 0.15s all; -moz-transition: ease-in 0.15s all; -o-transition: ease-in 0.15s all; -ms-transition: ease-in 0.15s all; transition: ease-in 0.15s all;
}
.social li a:hover { padding: 0 !important;
}
.social li.rssicon a { background-position: 0 0;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a { background-position: -50px 0;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a { background-position: -100px 0;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a { background-position: -150px 0;
border-right: 1px solid #e6e6e6;
}
.social li.yticon a { background-position: -200px 0;
}
.social li.rssicon a:hover { background-position: 0 -50px;
border-right: 1px solid #e6e6e6;
}
.social li.twicon a:hover { background-position: -50px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.fbicon a:hover { background-position: -100px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.gicon a:hover { background-position: -150px -50px;
border-right: 1px solid #e6e6e6;
}
.social li.yticon a:hover { background-position: -200px -50px;
}
.Subscribe-Starsblogging{
width: 300px;
float: left;
}
.Subscribe-Starsblogging .count{
color:#F17C18;
font-size: 14px;
font-weight: bold;
font-family: Helvetica, Arial;
height: 30px;
line-height: 30px;
vertical-align: middle;
width: 310px;
padding: 0 0px 0 4px;
margin:0;
}
.Subscribe-Starsblogging .count span.bigcount{
color:#F17C18;
font-size: 24px;
font-family: Helvetica, Arial;
line-height: 39px;
vertical-align: middle;
margin:0px;
padding:10px 0px 0px 0;
}
.Subscribe-Starsblogging .subicons{
border-bottom: 1px solid #e6e6e6;
margin: 0px 0 0px 0;
float: left;
width: 300px;
font-family: Helvetica, Arial; font-size: 12px;
}
.Subscribe-Starsblogging .emailsub{
border-bottom: 0px solid #e6e6e6;
padding: 5px 0 0px 0;
float: left;
width: 100%;
font-family: Helvetica, Arial;
}
.Subscribe-Starsblogging .emailsub .emailicon{
background: url(http://1.bp.blogspot.com/-bv4Z3wxrQtc/UDReA7sQF8I/AAAAAAAAAxQ/CCeIAalllEc/s1600/Subscribe+More+Blog+Tools+Email.png) no-repeat 0 2px;
float: left;
padding: 0px 15px 10px 40px;
margin: 0 0 0 5px;
width: 300px; line-height: 20px;
vertical-align: middle;
font-size: 14px;
color: #111;
}
.emailbutton{
background:#f7f8f9;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f7f8f9,0),color-stop(#e9e9e9,1));
background:-webkit-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-moz-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:-o-linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
background:linear-gradient(top, #f7f8f9 0%, #e9e9e9 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f8f9', endColorstr='#e9e9e9',GradientType=0 );
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
padding:6px 12px;
margin:0;
-webkit-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
-moz-box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
box-shadow:0 1px 0 #f9f9f9 inset, 1px 1px 1px rgba(223,223,223,0.4);
color:#888;
text-shadow:0 1px 0 #fff;
line-height:1.2;
cursor:pointer;
font-size:13px;
}
.emailbutton:hover{
background:#f1f1f1;
background:-webkit-gradient(linear,left top,left bottom,color-stop(#f1f1f1,0),color-stop(#e0e0e0,1));
background:-webkit-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-moz-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:-o-linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
background:linear-gradient(top, #f1f1f1 0%, #e0e0e0 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#e0e0e0',GradientType=0 );
text-decoration:none !important;
}
.email{
clear:both;
width:100%;
margin:10px 0;
}
.emailform{
position:relative;
width:300px;
margin:0 auto;
}
.emailinput{
width:200px;
height:18px;
margin:0 auto;
padding:8px 40px 8px 10px;
border:1px solid #ddd;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
font-family:georgia;
font-style:italic;
-webkit-box-shadow:1px 1px 2px #dfdfdf;
-moz-box-shadow:1px 1px 2px #dfdfdf;
box-shadow:1px 1px 2px #dfdfdf;
font-size:14px;color:#666;
}
.emailbutton{
-webkit-border-top-right-radius:4px;
-webkit-border-bottom-right-radius:4px;
-moz-border-radius-topright:4px;
-moz-border-radius-bottomright:4px;
border-top-right-radius:4px;
border-bottom-right-radius:4px;
-webkit-border-top-left-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-topleft:0px;
-moz-border-radius-bottomleft:0px;border-top-left-radius:0px;
border-bottom-left-radius:0px;
padding:9px;
position:absolute;
right:-2px;
top:0;
display:block;
line-height:16px;
}
.emailbutton{
padding:8px !important;
}
.emailform, .emailinput{
width:98% !important;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
height:auto;
}

.invite-friends-link a {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhprZeTbR6vI5CsRPG5ODyk78SylRxc75HWLZoerj4WbFzp6L2xOV127cRahgeKBd5E9pBNuXVZZBoejz7oqrtL-_ONIf0ayf4zdgFpDix1U1H-s0HjFmthq5iDZQBnnVQTOc8uYUMBmZYJ/s1600/facebook.png) left no-repeat;
padding-left: 30px;
line-height: 30px;
font-size: 16px;
font-weight: bold;
color: #3b5998;
display: block;
}
</style>
<p style="display:none;">Email Subscription box by<a href="http://Starsblogging.blogspot.com/">Muhammad Noman Khalid</a></p>
<div class="Subscribe-Starsblogging">
<h6 class='title'>Subscribe Now!</h6>
<div class="count">
<span class="bigcount">
<a href="http://feeds.feedburner.com/FEED URL"><img src="http://feeds.feedburner.com/~fc/FEED URL?bg=F17C18&fg=444444&anim=1" height="26" width="88" style="border:0" alt="" /></a>
</span> Learn Pro Tricks daily </div>
<div class="subicons">
<ul class="social">
<li class="rssicon">
<a href="http://feeds.feedburner.com/FEED URL" rel="nofollow" target="_blank">Rss</a></li>
<li class="twicon">
<a href="http://twitter.com/Twitter URL" rel="nofollow" target="_blank">Twitter</a></li>
<li class="fbicon">
<a href="http://facebook.com/Facebook URL" rel="nofollow" target="_blank">FaceBook</a></li>
<li class="gicon">
<a href="https://plus.google.com/G+ Page URL" rel="nofollow" target="_blank">Google+</a></li>
<li class="yticon">
<a href="http://www.youtube.com/user/YouTube URL" rel="nofollow" target="_blank">YouTube</a></li>
</ul>
</div>
<br style="clear:both;" />
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">

<div class="g-plusone" data-size="medium" data-annotation="inline" data-width="280" data-href="www.SITE URL.com"></div>

<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
</div>
<div style="width:300px; border-bottom:1px solid #e6e6e6; margin:8px 5px 0px 0px; padding-bottom:5px;">
<iframe data-twttr-rendered="true" title="Twitter Follow Button" style="width: 266px; height: 20px;" class="twitter-follow-button" src="http://platform.twitter.com/widgets/follow_button.1347008535.html#_=1351358237637&id=twitter-widget-0&lang=en&screen_name=TWITTER URL&show_count=true&show_screen_name=true&size=m" allowtransparency="true" frameborder="0" scrolling="no"></iframe>
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script>
</div>
<div class="emailsub">
<div class="emailicon">
<p style=" width:240px;
color:#111;
font-size: 13px;
font-weight: normal;
font-family: Helvetica, Arial;
padding:0;
margin:0;
">Receive Quality Tutorials Straight in your Inbox by submitting your Email ID below.</p>
</div>
<div class="email">
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEED URL', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true" class="emailform">
<input type="hidden" value="FEED URL" name="uri" />
<input type="hidden" name="loc" value="en_US" /> <input type="text" onblur="if (this.value == "") {this.value = "Enter your email...";}" onfocus="if (this.value == "Enter your email...") {this.value = ""}" value="Enter your email..." name="email" class="emailinput" /> <input type="submit" class="emailbutton" value="Submit" title='' /></form></div></div></div>
</div>

Customization of CSS social media follow us buttons !

Replace All RED BOLD text with your own URL's or USER NAMES. You should add your social media links in RSS Feed, Twitter, Facebook, Google Plus, YouTube and email subscribe form. This will makes this widget only for you. Just make changes as I told you. It will takes only 5 minutes or less to make changes and save this social media widget on your blogger blogspot.

The red bold's are necessary that you must change or add your social URL's with the required fields.
The blue bold's are not necessary but if you want to change that text with your own then replace it with your favorite text to do it.

After making the required changes, just save your widget to make it working. Click on SAVE button to close this popup widget window and after click save arrangement at top right of blogger layout. If you want to move your subscribe now widget to any other place, then move with mouse click on its title in blogger layout page. Drag it where you want to show this to your visitors and save arrangement.

I recommend you to add because it will increase your site strength on social media. So your Google page rank, Alexa rank, Bing and Moz site rankings will automatically upgraded after your appearance on web. This widget is most working widget then any other widget to make your site or blog socialize.
Thanks for Keep Visiting and don't forget for comment!

Posted in: Blogger-Widgets, Blogging-Tips, CSS, Facebook, Google-Plus, HTML, RSS, SEO, Social, Subscribe, Twitter, YouTube

20 August, 2013