Add 3D Sliding In-Out Pro Social Sharing Widget V2 with Fixed Postion

As in our last post we provide a Sliding In-Out Pro Social Sharing Widget for blogger and today we want to share some thing same widget just with a little bit of change in this widget that it's a fixed widget and it doesn't include the email subscription box and it's a totally fixed widget with 3D and mouse hover effect as you can see in the Live Demo. It's also a totally pure CSS enabled widget with no javascript and no jQuery also it doesn't have the other plugins with make it hard to install and hard to see it you also don't need to install it many times but you can easily install it in one time just a simple step with copy and paste. As we provide the last widget with generator but for this widget we didn't have the time to make generator for it be'coz we want to share it with our visitors as soon as possible and i can't wait to share it with my visitors. So, make it correct and enjoy with this professional looking widget and after it your blog will look a professional blog.

Live Demo

Also Read-  Sliding In-Out Pro Social Sharing Widget Pack

1. Sliding In-Out Pro Social Sharing Widget

2. Add 3D Sliding In-Out Pro Social Sharing Widget V2 with Fixed Position

Add 3D Sliding In-Out Pro Social Sharing Widget V2

• Login to Blogger > Dashborad
• Click on Drop Down Menu and select Layout
• Add a HTML/JavaScript Gadget
• Paste below code in it.

<!-- 3D Social Buttons by www.widgetgenerators.blogspot.com -->
<style> .WG-flt-wdt { position:fixed; right:10px; top:36% ; } .WG-flt-wdt img { float:right; clear:right; margin:1px; -webkit-transition: all .0s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .WG-flt-wdt img:hover { -moz-transform: scale(1.2) rotate(6deg); -webkit-transform: scale(1.2) rotate(6deg);  -o-transform: scale(1.2) rotate(6deg); -ms-transform: scale(1.2) rotate(6deg); transform: scale(1.2) rotate(6deg);  } </style> <div class="WG-flt-wdt">
<style> .WG1 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3hlufOY_8PX-3jHLJvVVJi5fN_3anz2BGBfu9DLrGPu5gfmNH6PYj-m35iQQmnAHBSWoa2QAzWkV2eCXWK81eQr0SIS83Su5T17ahQ9I_cw1h46j5K7uBRTzzLmxmmiLMfxJb_0fJrDaC/s1600/Facebook+Icon.png') bottom;  text-indent: -99999px; } .WG1:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjyFfaiJWlNHYrCsYUe9rdmGXTrdaTSW1WaoExFCkXMtRtnyH4UzP07W33Dl4XjWAzVRiSV5wAwAJMPJQds1J-aWaHZCUxWHHmc2fvH73RrKLVGkhig5mVrj1s-mOlgGFQeZi2VmDRL-qNL/s1600/Facebook+Rollout+Image.png' ) bottom; height: 64px; } </style> <a class="WG1" href="http://www.facebook.com/WidgetGenerators" title='Like Us'></a>

<style> .WG2 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_Kk9cTtDAnrSxkba1P-qykjodgNPtGHXTiIThAcZDfIPZKD9g_jZlF9nKA5ZB6kWQ89U4Ot_hQDqA6DMO3MBN_WO7BNmHxA5n6sUyQMVjrPSyUfgzuH251kP0fqo95krPOGqMId_MV_yD/s1600/Twitter+Icon.png') bottom;  text-indent: -99999px; } .WG2:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLlZfNpAVinwswP31ohhKaA58S8_qdl-DNv4BL3uKyYXhW9QId011RPhd3izWP80qnxwr6SeTs5twCaQNQBOfYeiiWGcSBmJEuQh4ewdiANxFbkbxDiXWMnKWUrirnh2msEnuyOUuOWkE/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WG2" href="http://www.twitter.com/WidgetGenerator" title='Follow Us'></a>

<style> .WG3 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8XapQk7EAwVHzbWRbYcbrcdps5BhEPyzdyBp9NoA56WGx1AHLhxTkpJ7DLb_vJA6uvhf73CdlyZt9b_LLLtYV-42mw1-KV09t2tP3bc3cwA8QpUFYDL67eb9hhJRYP-05wpuK3ShOuGAL/s1600/Feedburner+Icon.png') bottom;  text-indent: -99999px; } .WG3:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEin4JN2X-cWEYLG4dYyn0SWcrwawvhJbriyAx5GAMNh-_yMDruvK6VOhwDOPUuJD38hJAMLcmuBNMCTGAiTwbceTraWdpf9l7KEQ-45RyxKGUpb2Oqcd7O9Bgkz_E8svNU6QhXH6pht0KRo/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WG3" href="http://feeds.feedburner.com/WidgetGenerators" title='Subscribe Us'></a>

<style> .WG4 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikFeBDHkrlEyTNYxW4z8YMfdVQApqUMRXwQysMeCjMO-mkTz-QBCN5R_BEmxVzqdOItg4TqTWvlb455DOaDcJUYaJXLYJnsEiYuMqupYTICOJFMRCfsmhLWDbSUrm2hxQidpbYrr3faGXF/s1600/Google+Icon.png') bottom;  text-indent: -99999px; } .WG4:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzQCdF8flG3pCSrjTFMCw0jIYwOp0CxTEPbnBT3NjrgJrnfGbySFJbc3AxJVI1XD8ULrmAtRiMoM16AwjpO1zkBFgz9uAXd_tWtVEoAA2GP8XVgfO-KMchlsRqcho93nvjv-fwL01pKZOA/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WG4" href="https://plus.google.com/107877224551351252870" title='Add in Circle'></a>
</div>
<!-- 3D Social Buttons by www.widgetgenerators.blogspot.com -->

• Now Save your Widget and You are done.

Customize it

• If you want to fix this template on left side then replace this text right with left.

 

Make Changes....!

• Replace this http://www.facebook.com/WidgetGenerators with your Facebook Fan Page User name.
• Replace this http://www.twitter.com/WidgetGenerator with your twitter user name.
• Replace this http://feeds.feedburner.com/WidgetGenerators with your RSS Subscription user name.
• Replace this https://plus.google.com/107877224551351252870 with your Google+ User name.  

If Any Problem Comes, Ask in Comments