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.
0 Comments