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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN-cgIQ7i9akRc_ZQMfnIgrBZFGVwQsUs6-1Ds6O6EwxVV79Y_cob3VdZRm6mE2jwjdN5UHqUF_JUbZRCaOKO-zZrFPcYhBnDrKUrwRpO7rZgdyY5OJ3LAYENyUPSwCYjy6JGlTsl9Vg_P/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat;
}.social_profiles li .twitter {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat 0px -45px;
}
.social_profiles li .gplus {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat 0px -90px;
}
.social_profiles li .pinterest {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat 0px -135px;
}
.social_profiles li .rss {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat 0px -180px;
}
.social_profiles li .linkedin {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat 0px -225px;
}
.social_profiles li .tumblr {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat 0px -270px;
}
.social_profiles li .youtube {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/s1600/social_sprite.png") no-repeat 0px -315px;
}
.social_profiles li .mail {
background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVpUmZaLPn4kk2opz73v6JkYRxZ1kXPV4-8eRSphtgZVCcoCp-W1XyXoGs48DfiGzYLqX829gGv3-KAxjWwXWq5f4cHb3eOQwiM3Pyw75RuiO_u1x2HUBmdQ-uwpHb4AJCX3P03y755s2U/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.
Pinning an image just got easier and more intuitive with this hover button. You may have noticed that some professional photographer website have custom pinterest hover button for their website's professional images, with Word Press it�s quite straightforward, whereas with Blogger it can be much more complicated, mostly for those who are hate modifying the code for their blog template.Now luckily we're excited to tell that pinterest developer team finally made an official image hover pin it button for blogger. The on hover pin it button appear just like the regular pin it button, but it only shows up when a person mouse over an image.The pin it button should disappear again when your mouse-cursor is not on the image anymore.They look great on pages with lots of images and might look and feel better if your design is on the minimal side. Pinterest developer team made it very easy to install on your blogger blog. It only takes one line of code to get the button on mouse over the image. So follow the simple step below.
