How to Slide Up N’ Go Social Sharing Widget

Doday here is amaizing trick for you!

We got another nicely designed social sharing widget to show you guys, and it comes from Blogger user named Lokjeeth Singh of BloggingBolt. It has no official name so I took the liberty of simply naming it myself and decided to call it Slide-up ‘n Go social sharing widget simply because it slides up when you hover your mouse over it and is imprinted with the word ‘GO’. So far it currently has buttons for Facebook, Dribbble, Behance, Twitter, and Instagram, but hopefully they’ll have buttons for other social sharing sites as well, such as LinkedIn, Google+, and Digg.

You’ll find a demo of it here.

Follow the instructions below to put it in your blog.

• Log in to your Blogger and on your dashboard, go to Template > Edit HTML.

• Using Ctrl+F, search for ]]></b:skin>.

• Paste the following CSS code right before it:

.socialw {
 width: 236px;
 margin-top: 100px;
 margin-left: auto;
 margin-right: auto;
 overflow: auto;
 height: 100%;
}
#social1 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 margin-left: 1px;
 float: left;
 overflow: hidden;
}
#social2,#social3,#social4,#social5 {
 border: 1px solid #292929;
 width: 37px;
 height: 62px;
 float: left;
 margin-left: 10px;
 overflow: hidden;
}
/*    ANIMATIONS   */
.animate {
 -webkit-animation-duration: 1s;
 -moz-animation-duration: 1s;
 -o-animation-duration: 1s;
 animation-duration: 1s;
 -webkit-animation-fill-mode: both;
 -moz-animation-fill-mode: both;
 -o-animation-fill-mode: both;
 animation-fill-mode: both;
}
.animate.queue {
 -webkit-animation-delay: 1s;
 -moz-animation-delay: 1s;
 -o-animation-delay: 1s;
 animation-delay: 1s;
}
.animate.queue2s {
 -webkit-animation-delay: 2s;
 -moz-animation-delay: 2s;
 -o-animation-delay: 2s;
 animation-delay: 2s;
}
.animate.queue3s {
 -webkit-animation-delay: 3s;
 -moz-animation-delay: 3s;
 -o-animation-delay: 3s;
 animation-delay: 3s;
}
.animate.queue4s {
 -webkit-animation-delay: 4s;
 -moz-animation-delay: 4s;
 -o-animation-delay: 4s;
 animation-delay: 4s;
}
/* Fade In Down */
@-webkit-keyframes fadeInDown {
 0% {
 opacity: 0;
 -webkit-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -webkit-transform: translateY(0);
 }
}
@-moz-keyframes fadeInDown {
 0% {
 opacity: 0;
 -moz-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -moz-transform: translateY(0);
 }
}
@-o-keyframes fadeInDown {
 0% {
 opacity: 0;
 -o-transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 -o-transform: translateY(0);
 }
}
@keyframes fadeInDown {
 0% {
 opacity: 0;
 transform: translateY(-100px);
 }
 100% {
 opacity: 1;
 transform: translateY(0);
 }
}
.fadeInDown {
 -webkit-animation-name: fadeInDown;
 -moz-animation-name: fadeInDown;
 -o-animation-name: fadeInDown;
 animation-name: fadeInDown;
}
/* Fade In Down */
/* Social 1 Animation */
#social1 {position:relative;}
#social1 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social1:hover img{
margin-top:-62px;
}
#social1 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 2 Animation */
#social2 {position:relative;}
#social2 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social2:hover img{
margin-top:-62px;
}
#social2 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 3 Animation */
#social3 {position:relative;}
#social3 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social3:hover img{
margin-top:-62px;
}
#social3 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 4 Animation */
#social4 {position:relative;}
#social4 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social4:hover img{
margin-top:-62px;
}
#social4 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}
/* Social 5 Animation */
#social5 {position:relative;}
#social5 img{
position:absolute;
left:0;
top:0;
-webkit-transition: margin-top;
-webkit-transition-timing-function: ease-in;
-webkit-transition-duration: 250ms;
}
#social5:hover img{
margin-top:-62px;
}
#social5 .details{
position:absolute;
left:0;
top:0;
z-index:-1;
}     

• Click on Save Template.

• Now go to Layout, click on Add a Gadget and select HTML/JavaScript.

• Copy and paste the code below:

<!-- Social Icons Start !-->
 <div>
 <!-- Dribbble !-->
 <a href="http://dribbble.com/YOUR_USERNAME" target="_blank">
 <div id="social1"> <img src="http://i.imgur.com/64r2jAv.png" /> </div>
 </a>
 <!-- Dribbble !-->
 <!-- Behance !-->
 <a href="http://behance.com/ YOUR_USERNAME " target="_blank">
 <div id="social2"> <img src="http://i.imgur.com/fkuhUov.png" /> </div>
 </a>
 <!-- Behance !-->
 <!-- Facebook !-->
 <a href="http://facebook.com/ YOUR_USERNAME " target="_blank">
 <div id="social3"> <img src="http://i.imgur.com/PY2EPRW.png" /> </div>
 </a>
 <!-- Facebook !-->
 <!-- Twitter !-->
 <a href="http://twitter.com/ YOUR_USERNAME " target="_blank">
 <div id="social4"> <img src="http://i.imgur.com/ny0pyqt.png" /> </div>
 </a>
 <!-- Twitter !-->
 <!-- Intagram !-->
 <a href="http://instagram.com/ YOUR_USERNAME " target="_blank">
 <div id="social5"> <img src="http://i.imgur.com/tZZG2zQ.png" /> </div>
 </a>
 <!-- Instagram !-->
 </div>
<!-- Social Icons End !-->     

NOTE: Remember to change the highlighted links with yours.

• Hit Save and you’re done!

Go ahead and preview your blog. Congratulations! You now have a new social widget.

A lot of other tips and tricks like how to add more blogger widgets, add social book marking baar, add new sidebar, add facebook lik box , post google adse inside or below the post title , google adse between post,Horizontal manu bar for blogger, image slider for blogger, flash for blogger templates, and a lot of other tricks for blogger users.