Saturday, 3 January 2015

Colorful Sticky Social Media Bar for Blogger

Here's a cool sticky social media bar for your blog with pure CSS3. No need of Javascript or Jquery. You can find two codes here: one for the colored and the other for black alone. Social media icons include Facebook, Twitter, Google Plus, Pinterest and RSS. From your Blog's Dashboard, navigate to Layout. Click Add a Gadget and select HTML/Javascript from the list. Now copy paste one of the below codes, replace "#" with your social media user names and Save the Gadget. Thats all! The bar will appear on the left side of your blog.
Colorful Sticky Social Media Bar for Blogger
----------------------------------------------------------------------------------------------------------------------Script for Colored Sticky:

----------------------------------------------------------------------------------------------------------------------
<style>.buttons-social {display:block; width:48px; position:fixed; top:0; left:0; background:#fff; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s;}
.twt {width:48px; height:48px; background:url(http://4.bp.blogspot.com/-IDGpuhCfOyY/U9OUwXBeGbI/AAAAAAAAHLo/YJK1V6woNTE/s1600/Twitter.png) no-repeat #00c4fc; border-bottom:2px solid #00aad9;} .twt:hover{opacity:0.90;} .twt:active{opacity:0.80;}

.twt:hover:after {position:absolute; left: 48px; height:28px; background:#00c4fc; padding: 10px; color:#fff; text-align:center; content: "Twitter"; font: bold 15px Arial; text-shadow: 1px 1px 2px #000000; border-right:1px solid #00aad9; border-bottom:2px solid #00aad9;} .gp {width:48px; height:48px; background:url(http://4.bp.blogspot.com/-JihiSWS0FV8/UxGxbjuCY_I/AAAAAAAAGZ0/V_ByV55KzjU/s1600/GooglePlus.png) no-repeat #d94a39; border-bottom:2px solid #c02d1b;}.gp:hover{opacity:0.90;} .gp:active{opacity:0.80;} 


.gp:hover:after {position:absolute; left: 48px; height:28px; background:#d94a39; padding: 10px; color:#fff; text-align:center; content: "Google+"; font: bold 15px Arial; border-right:1px solid #c02d1b; border-bottom:2px solid #c02d1b; text-shadow:1px 1px 2px #000000;} .rs {width:48px; height:48px; background:url(http://3.bp.blogspot.com/-eaJx5Jzdwes/UxGxh8hCKaI/AAAAAAAAGZ8/BqmF5V_6_mQ/s1600/Rss.png) no-repeat #ff7900; border-bottom:2px solid #ce6200;} .rs:hover{opacity:0.90;} .rs:active{opacity:0.80;} 


.rs:hover:after {position:absolute; left: 48px; height:28px; background:#ff7900; padding: 10px; color:#fff; text-align:center; content: "Rss"; font: bold 15px Arial; border-right:1px solid #ce6200; border-bottom:2px solid #ce6200; text-shadow:1px 1px 2px #000000;} .pin {width:48px; height:48px; background:url(http://3.bp.blogspot.com/-wWpaQdnTXik/U60WwNqYmZI/AAAAAAAAHCw/znTPwHtJpJc/s1600/Pinterest.png) no-repeat #cc2127; border-bottom:2px solid #a21b1f;} .pin:hover{opacity:0.90;} .pin:active{opacity:0.80;} 


.pin:hover:after {position:absolute; left: 48px; height:28px; background:#cc2127; padding: 10px; color:#fff; text-align:center; content: "Pinterest"; font: bold 15px Arial; border-right:1px solid #a21b1f; border-bottom:2px solid #a21b1f; text-shadow:1px 1px 2px #000000;} .fc {width:48px; height:48px; background:url(http://3.bp.blogspot.com/-FD5j_peDJkg/UxGxSPJb2VI/AAAAAAAAGZk/lZeXBOrs-Ps/s1600/Facebook.png) no-repeat #3350ae; border-bottom:2px solid #26439e;} .fc:hover{opacity:0.90;} .fc:active{opacity:0.80;} 


.fc:hover:after {position:absolute; left: 48px; height:28px; background:#3350ae; padding: 10px; color:#fff; text-align:center; content: "Facebook"; font: bold 15px Arial; border-right:1px solid #26439e; border-bottom:2px solid #26439e; text-shadow:1px 1px 2px #000000;} </style> </style><div class="buttons-social"> <a href="#"><div class="gp"></div></a> <a href="#"><div class="rs"></div></a> <a href="#"><div class="pin"></div></a> <a href="#"><div class="twt"></div></a> <a href="#"><div class="fc"></div></a></div>
 
----------------------------------------------------------------------------------------------------------------------Script for Black Sticky:
----------------------------------------------------------------------------------------------------------------------
<style>.buttons-social{display:block; width:48px; background:#fff; position: fixed; top: 0; left: 0; -webkit-transition: 1s; -moz-transition: 1s; -o-transition: 1s; transition: 1s;}
.twt {width:48px; height:48px; background:url(http://4.bp.blogspot.com/-IDGpuhCfOyY/U9OUwXBeGbI/AAAAAAAAHLo/YJK1V6woNTE/s1600/Twitter.png) no-repeat #6a6a6a; border-bottom:2px solid#7c7c7c;} .twt:hover{opacity:0.90;} twt:active{opacity:0.80;} 

.twt:hover:after {position:absolute; left: 48px; height:28px; background:#6a6a6a; padding: 10px;color:#fff; text-align:center; content: "Twitter"; font: bold 15px Arial;text-shadow: 1px 1px 2px #000000; border-right:1px solid #7c7c7c; border-bottom:2px solid #7c7c7c;} .gp {width:48px; height:48px; background:url(http://4.bp.blogspot.com/-
JihiSWS0FV8/UxGxbjuCY_I/AAAAAAAAGZ0/V_ByV55KzjU/s1600/GooglePlus.png) no-repeat #6a6a6a; border-bottom:2px solid #7c7c7c;} .gp:hover{opacity:0.90;}.gp:active{opacity:0.80;} 

.gp:hover:after {position:absolute; left: 48px; height:28px; background:#6a6a6a; padding: 10px; color:#fff; text-align:center; content: "Google+"; font: bold 15px Arial;text-shadow: 1px 1px 2px #000000;border-right:1px solid #7c7c7c; border-bottom:2px solid #7c7c7c;} .rs {width:48px; height:48px; background:url(http://3.bp.blogspot.com/-eaJx5Jzdwes/UxGxh8hCKaI/AAAAAAAAGZ8/BqmF5V_6_mQ/s1600/Rss.png) no-repeat #6a6a6a; border-bottom:2px solid #7c7c7c;} .rs:hover{opacity:0.90;} .rs:active{opacity:0.80;} 


.rs:hover:after {position:absolute; left: 48px; height:28px; background:#6a6a6a; padding: 10px; color:#fff; text-align:center; content: "Rss"; font: bold 15px Arial;text-shadow: 1px 1px 2px #000000;border-right:1px solid #7c7c7c;border-bottom:2px solid #7c7c7c;} .pin {width:48px; height:48px; background:url(http://3.bp.blogspot.com/-wWpaQdnTXik/U60WwNqYmZI/AAAAAAAAHCw/znTPwHtJpJc/s1600/Pinterest.png) no-repeat #6a6a6a; border-bottom:2px solid #7c7c7c;} .pin:hover{opacity:0.90;} .pin:active{opacity:0.80;}


.pin:hover:after {position:absolute; left: 48px; height:28px; background:#6a6a6a; padding: 10px;color:#fff; text-align:center; content: "Pinterest"; font: bold 15px Arial;text-shadow: 1px 1px 2px #000000;border-right:1px solid #7c7c7c; border-bottom:2px solid #7c7c7c;} .fc {width:48px; height:48px; background:url(http://3.bp.blogspot.com/-FD5j_peDJkg/UxGxSPJb2VI/AAAAAAAAGZk/lZeXBOrs-Ps/s1600/Facebook.png) no-repeat #6a6a6a;border-bottom:2px solid #7c7c7c;} .fc:hover{opacity:0.90;} .fc:active{opacity:0.80;} 


.fc:hover:after {position:absolute;left: 48px; height:28px; background:#6a6a6a; padding: 10px; color:#fff; text-align:center; content: "Facebook"; font: bold 15px Arial;text-shadow: 1px 1px 2px #000000;border-right:1px solid #7c7c7c; border-bottom:2px solid #7c7c7c;}
</style> </style><div class="buttons-social"> <a href="#"><div class="gp"></div></a> <a href="#"><div class="rs"></div></a> <a href="#"><div class="pin"></div></a>
<a href="#"><div class="twt"></div></a> <a href="#"><div class="fc"></div></a></div> 
----------------------------------------------------------------------------------------------------------------------
Previous Post
Next Post

post written by: