Blogger Text

My Aim to Provide you quality contents, Tips & Tricks, Software, Microsoft Office, Graphic Editing (Adobe PhotoShop, After Affects, Illustrator, inDesign) Corel Draw, Corel Video Studio, Cyberlink PowerDirector, Power ActionCinema, Tutorials about Blogging and VU Assignments, Quizes & GDB Solutions and Much More... at regular Basis
                                     ***    Kindly Subscribe our Official YouTube Channel "INFOPALACESS OFFICIAL-Tuts: in this channel we upload Programming (C,C++,C# JAVA, PHP), Web Development, Graphics Editing and Microsoft Office Step by Step Tutorials from bigginer to Advance Level. We also provide free online courses at our YouTube Channel. ***   Graded Assignments/Quizes and GDB will start in Next Week. Solution ideas of All assignments, Quizes and GDB will be available here. If you have any problem regarding this then you can contact us.

Add Cool Sticky Social Media Bar in Blog/Wordpress


Today here I am going to tell you that how you can add a cool sticky social media bar in your blog/WordPress with CSS3. No need of any Code of JQ or JavaScript. 

This is the preview of Social Media sticky Bar  ààà

Let’s Start:


Step: 1 For off all you need to add following code into your theme head. 

Login to Blog à Theme à Select Edit HTML


And Click anywhere within theme window and press CTRL+F and find <head> and paste following line after <head> in theme and then click on Save Theme

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>




Step: 2 Now Go to “layout” à Add a Gadget à Select HTML/JAVASCRIPThere 





  Here Paste to CSS3 Code which is given below in above mentioned widget (HTML/JAVASCRIPT)  ... copy code 
<div id="social-sidebar" class="pos-left label-fancy colors-color"><ul>
<li><a href="#" target="_blank" class="facebook"><span class="link-icon"><i class="fa fa-facebook"></i></span><span class="link-label">Facebook</span></a></li>
<li><a href="#"><span class="link-icon"><i class="fa fa-twitter"></i></span><span class="link-label">Twitter</span></a></li>
<li><a href="#" target="_blank" class="google-plus"><span class="link-icon"><i class="fa fa-google-plus"></i></span><span class="link-label">Google+</span></a></li>
<li><a href="#" target="_blank" class="instagram"><span class="link-icon"><i class="fa fa-instagram"></i></span><span class="link-label">Instagram</span></a></li>
<li><a href="#" target="_blank" class="pinterest"><span class="link-icon"><i class="fa fa-pinterest"></i></span><span class="link-label">Pinterest</span></a></li>
<li><a href="#" target="_blank" class="whatsapp"><span class="link-icon"><i class="fa fa-whatsapp"></i></span><span class="link-label">WhatsApp</span></a></li>
<li><a href="#" target="_blank" class="youtube"><span class="link-icon"><i class="fa fa-youtube"></i></span><span class="link-label">YouTube</span></a></li>
<!-- <li><a href="#" target="_blank" class="linkedin"><span class="link-icon"><i class="fa fa-linkedin"></i></span><span class="link-label">LinkedIn</span></a></li>
<li><a href="#" target="_blank" class="rss"><span class="link-icon"><i class="fa fa-rss"></i></span>
<span class="link-label">RSS</span> -->
<style>
#social-sidebar li {line-height: 0;font-size: 0}
#social-sidebar {position: fixed;font-family: Arial;}
#social-sidebar ul li a {text-align: center;position: relative;display: block}
#social-sidebar ul li .link-icon {display: inline-block;text-align: center;overflow: hidden}
#social-sidebar ul li a:hover .link-label {opacity: 1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";filter: alpha(opacity=100);}
#social-sidebar ul li a .link-label {width: 0;white-space: nowrap;opacity: 0;position: absolute;z-index: -1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";filter: alpha(opacity=0);}
#social-sidebar.pos-left {left: 0;top: 25%}
#social-sidebar.pos-left ul li a .link-label {left: -600%}
#social-sidebar.pos-left ul li a:hover .link-label {left: 100%}
#social-sidebar.pos-left ul li a .link-label:before {left: -4px}
#social-sidebar ul li a {width: 35px;height: 35px;line-height: 35px;font-size: 21px;}
#social-sidebar .link-icon {width: 35px;height: 35px;line-height: 35px}
#social-sidebar ul li a {border-radius: 5px;}
#social-sidebar .link-icon {border-radius: 5px;}
#social-sidebar.pos-left ul li a {margin-top: 5px;left: 5px;}
#social-sidebar.label-fancy .link-label {margin-top: -16px;padding: 4px 8px;min-width: 80px;width: auto;
line-height: 24px;font-size: 14px;border-radius: 3px;top: 50%;}
#social-sidebar.label-fancy .link-label:before {margin-top: -4px;width: 8px;height: 8px;content: "";
display: block;transform: rotate(45deg);position: absolute;z-index: -2;top: 50%;}
#social-sidebar.label-fancy.pos-left a:hover .link-label {left: 130%}
#social-sidebar.colors-color ul li a span, #social-sidebar.colors-color ul li a span:before {background: #333;color: #FFF;}
#social-sidebar.colors-color ul li a[class*="facebook"] span, #social-sidebar.colors-color ul li a[class*="facebook"] span:before {background: #234999;}
#social-sidebar.colors-color ul li a[class*="google-plus"] span, #social-sidebar.colors-color ul li a[class*="google-plus"] span:before {background: #BC0B02;}
#social-sidebar.colors-color ul li a[class*="instagram"] span, #social-sidebar.colors-color ul li a[class*="instagram"] span:before {background: #31547A;}
#social-sidebar.colors-color ul li a[class*="linkedin"] span, #social-sidebar.colors-color ul li a[class*="linkedin"] span:before {background: #007BB6;}
#social-sidebar.colors-color ul li a[class*="pinterest"] span, #social-sidebar.colors-color ul li a[class*="pinterest"] span:before {background: #CA2128;}
#social-sidebar.colors-color ul li a[class*="rss"] span, #social-sidebar.colors-color ul li a[class*="rss"] span:before {background: #F57B05;}
#social-sidebar.colors-color ul li a[class*="twitter"] span, #social-sidebar.colors-color ul li a[class*="twitter"] span:before {background: #6CDFEA;}
#social-sidebar.colors-color ul li a[class*="whatsapp"] span, #social-sidebar.colors-color ul li a[class*="whatsapp"] span:before {background: #45C355;}
#social-sidebar.colors-color ul li a[class*="youtube"] span, #social-sidebar.colors-color ul li a[class*="youtube"] span:before {background: #CD181F;}</style>
<!-- Sticky Social Media Bar for Blogger -->
<div id="social-sidebar" class="pos-left label-fancy colors-color"><ul>
<li><a href="#"><span class="link-icon"><i class="fa fa-facebook"></i></span><span class="link-label">Facebook</span></a></li>
<li><a href="#" target="_blank" class="twitter"><span class="link-icon"><i class="fa fa-twitter"></i></span><span class="link-label">Twitter</span></a></li>
<li><a href="#" target="_blank" class="google-plus"><span class="link-icon"><i class="fa fa-google-plus"></i></span><span class="link-label">Google+</span></a></li>
<li><a href="# target="_blank" class="instagram"><span class="link-icon"><i class="fa fa-instagram"></i></span><span class="link-label">Instagram</span></a></li>
<li><a href="#" target="_blank" class="pinterest"><span class="link-icon"><i class="fa fa-pinterest"></i></span><span class="link-label">Pinterest</span></a></li>
<li><a href="#" target="_blank" class="whatsapp"><span class="link-icon"><i class="fa fa-whatsapp"></i></span><span class="link-label">WhatsApp</span></a></li>
<li><a href="#" target="_blank" class="youtube"><span class="link-icon"><i class="fa fa-youtube"></i></span><span class="link-label">YouTube</span></a></li>
<li><a href="#" target="_blank" class="linkedin"><span class="link-icon"><i class="fa fa-linkedin"></i></span><span class="link-label">LinkedIn</span></a></li>
<li><a href="#" target="_blank" class="rss"><span class="link-icon"><i class="fa fa-rss"></i></span>
<span class="link-label">RSS </span></ul></div></a></li>
replace "#" with your social media user names and Save the Gadget. That’s all! The bar will appear on the left side of your blog.

Post a Comment

0 Comments