Stay Tuned Social Profiles Plugin With Tooltip For Blogger Blog

In today’s tip we’ll show you how to create some simple, animated tooltips using CSS transitions and the pseudo-classes :before and :after. For the little pointer, we will style the pseudo-elements :before and :after. We will style them the same way and create a triangle by using transparent left and right borders. The :before pseudo-element will serve as a shadow for the :after pseudo-element, so we’ll give it a blue color. After the growth and advance development in Social media websites, lots of peoples are showing their interest in appearing their website with their favorite social networking website i.e. Facebook, Google Plus, Twitter and etc. Tooltips is the fancy addition in the Social networking Widgets. Whenever, your visitors would place their pointer on a social icon a small box will appear with information about the specific item that is being hovered.

 

Live Preview

 

How to Install Tooltip Social Profile Plugin

Just follow the steps as mention below.

1. Go to Blogger Dashboard >> Template >> Edit HTML >> Proceed

2. Now in the template search for ]]></b:skin> and just above it paste the following  CSS Code.

#social_profiles-wrap{
    width: 450px;
  height: 80px;
  background: url("http://1.bp.blogspot.com/-cwPDl_I1XwE/UnjX5T7TNbI/AAAAAAAAD5I/vdBr7_ZsOsg/s1600/Bg.png") no-repeat 15px 10px;
  padding:22px 0px 15px 100px;
  margin: 14px auto;
  border: 1px solid #ddd;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
  -moz-box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
  box-shadow: 1px 0px 0px #f9f9f9 inset,1px 1px 1px rgba(223,223,223,0.4);
}
.social_profiles{
  height: auto;
  margin: 0 auto;  
}
.social_profiles li{
  float: left;
  list-style: none; 
}
.social_profiles li a {
  display: block;
  width: 40px;
  height: 40px;
  margin: 0 auto;
  margin-top: 20px;
  outline: none;
  position: relative;
  z-index: 2;
  text-indent: -9000px;
  text-decoration: none;
}

.social_profiles li .facebook {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat;
}

.social_profiles li .twitter {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -45px;
}
.social_profiles li .gplus {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -90px;
}
.social_profiles li .pinterest {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -135px;
}
.social_profiles li .rss {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -180px;
}
.social_profiles li .linkedin {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -225px;
}
.social_profiles li .tumblr {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -270px;
}
.social_profiles li .youtube {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -315px;
}
.social_profiles li .mail {
  background: url("http://4.bp.blogspot.com/-4T8m5U2Ihcg/UnjffDttqgI/AAAAAAAAD5Y/KgXl8SG_N1A/s1600/social_sprite.png") no-repeat 0px -360px;
}

.social_profiles li a span {
  width: 80px;
  height: 20px;
  line-height: 20px;
  padding: 5px;
  left: 50%;
  margin-left: -52px;
  font-family: 'Alegreya SC', Georgia, serif;
  font-weight: 400;
  font-size: 14px;
  color: #fff;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  text-align: center;
  border: 5px solid #446cb3;
  background: #446cb3;
  text-indent: 0px;
  position: absolute;
  pointer-events: none;
  border-radius: 5%;
  opacity: 0;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
-webkit-transform: translate(35px) rotate(25deg) scale(1.5);
  -moz-transform: translate(35px) rotate(25deg) scale(1.5);
  -o-transform: translate(35px) rotate(25deg) scale(1.5);
  -ms-transform: translate(35px) rotate(25deg) scale(1.5);
  transform: translate(35px) rotate(25deg) scale(1.5);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
 
}
.social_profiles li a span:before,
.social_profiles li a span:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  margin-left: -9px;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 11px solid rgba(0,0,0,0.1);
}
.social_profiles li a span:after {
  bottom: -15px;
  margin-top: 6px;
  margin-left: -12px;
  border-top: 10px solid #446cb3;
}
.social_profiles li a:hover span {
  opacity: 0.9;
  bottom: 50px;
  -webkit-transform: translate(0px) rotate(0deg) scale(1);
  -moz-transform: translate(0px) rotate(0deg) scale(1);
  -o-transform: translate(0px) rotate(0deg) scale(1);
  -ms-transform: translate(0px) rotate(0deg) scale(1);
  transform: translate(0px) rotate(0deg) scale(1);
}

Once you have successfully pasted the Style sheet code go ahead and save the template by pressing save button.

 

1. Now according to you need paste the following code where you want to place this widget. For Example Layout >> Add a Gadget >> Edit HTML/JavaScript

2. If you want to show below post then paste the below html code below this tag. "<data: post.body/>"

<div id="social_profiles-wrap">
<ul class="social_profiles">
<li><a class="facebook" href=http://www.facebook.com/mybloggerstricks target="_blank"><span>Facebook</span></a></li>
<li><a class="twitter" href=http://twitter.com/mybloggertriks target="_blank"><span>Twitter</span></a></li>
<li><a class="gplus" href=https://plus.google.com/b/103598710564060829080 target="_blank"><span>Google Plus</span></a></li>
<li><a class="pinterest" href=http://www.pinterest.com/mybloggertrickx target="_blank"><span>Pinterest</span></a></li>
<li><a class="rss" href=http://feeds.feedburner.com/mybloggerstrick target="_blank"><span>RSS</span></a></li>
<li><a class="linkedin"href=http://www.linkedin.com/in/mybloggertricks target="_blank"><span>LinkedIn</span></a></li>
<li><a class="tumblr" href=http://www.thumblr.com/mybloggertricks target="_blank"><span>Tumblr</span></a></li>
<li><a class="youtube" href=http://www.youtube.com/mybloggertricks target="_blank"><span>Youtube</span></a></li>
<li><a class="mail" href=Mailto:tricks.blogger@gmail.com target="_blank"><span>Mail</span></a></li>
</ul></div>

Note:- Change the links in yellow with links to your social profiles.

I hope you enjoyed this little effect and find it useful!..Needless to say, this will only work in browsers that support pseudo-elements and CSS transitions.