30 Nov 2014

Colorful Sticky Social Media Bar for Blogger

On In , 6 Comments
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.

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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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>
------------------------------------------------------------------------------------------------------------------------------------

6 comments:

  1. Hey there! This is GREAT! I really need one of these. I was wondering where the "#" (place to add my social media name) is on the code, I cannot seem to locate it. I cannot wait to install this and your help is much appreciated!

    ReplyDelete
    Replies
    1. Hi Sophia, towards the end of the code, you can find it. Please try to copy the code now.

      gp - Google Plus; rs - RSS; pin - Pinterest, twt - Twitter and fc - Facebook.

      Delete
  2. Thanks for the wonderful article. Its very beneficial for us.
    social media ads in Indore

    ReplyDelete
  3. This is exactly what I am looking for but I need to put it on a Wordpress site. I have put the css in my child-theme stylesheet. Any ideas where or how I should enter the links?

    ReplyDelete
  4. Blogging is incredible and every blogger playing a great role to introduce new things in blogging. I always like to fly on different blogs and read the strategies of different blogger to understand the blogging in more depth. Being a bloggers I really appreciate your works and no doubt your blog is awesome.
    Love from Asad Niazi

    ReplyDelete
  5. This blog has really been helpful in creating colorful sticky social media bar. Thanks for sharing them.
    SEO Company in Bangalore | Web Developers in Bangalore

    ReplyDelete