, , , Couch Mode Print Story

3D Floating Social Subscribe Buttons With Hover Effect


Today, I will show you how to add cool 3D floating social subscribe buttons with hover effect for blogger. These buttons include Facebook, Twitter, RSS, Google+ page links. These
dull black and white social buttons float on the right side of the blogger blog and on hovering over they transforms into 3D colorful buttons. These buttons have a great appealing looks and also attracts visitors and your loyal readers.


Here I am providing a live demo for this widget so that you can find it how it actually visible. Click the below button:

LIVE DEMO

How To Add 3D Fixed Subscribe Buttons For Blogger?


STEP #1: Log on to Blogger 

STEP #2: Go to Dashboard>Layout

STEP #3: Click on Add a Gadget

STEP #4: Select HTML/JavaScript gadget.

STEP #5: Copy/Paste the following code inside that gadget.

<style> .WT-flt-wdt { position:fixed; right:10px; top:36% ; } .WT-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; } .WT-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="WT-flt-wdt"> 
<style> .WT1 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9Ra9G-HA-5MM96t7MOTFqyrKyuKiy623XKlsiTOgwnEIgvdNKlDnkkzYpSmoRnE0u2hgPM1TMt5j2vdWSnNVnzKaqhvHLQ2jeapK-_bi2_yypDTlTpiFBJLEq1u9ROxr_oD-pNk0nO43/s1600/Facebook+Icon.png') bottom;  text-indent: -99999px; } .WT1:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS91OPSi_155h1mBWz2izG1yE4UfdVRW2HL2JD7o1p0lTeyg7qO6IVPc2UwpYefatuED1NOtgT53PcnfRgxBOlkDnpk2QH5yjw3nwBVMFZW3GhY9m7tpnI45w-dIAldzEa7cZx1nqdEB5a/s1600/Facebook+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WT1" href="http://www.facebook.com/WIKITECHNOL"></a> 


<style> .WT2 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhoQSQshbh2y1xaR2nz8wyfR_WrWxrUMHIw1HN1vOPp5uPdRKSYmFU57qDqOX3VWw93bVlHv4GhXc5ne-AFCaaTngb2F9KXRMy4BI_Tu2_uYPmbsnMPiXn_Z-kUG_EPHtgLighjr9eAbN0r/s1600/Twitter+Icon.png') bottom;  text-indent: -99999px; } .WT2:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgQ6YJ_lRa1mCfMlTuu1o7xUoCoAZec6pSXT5a1ljKMqbBUJC1tAt7X4emqLBuCXp1cf2Aeo7TDo-O2kmmx2er6TZ1ilrQ15GFc_PMzQAFP7FW_F27y5u7tS6P1nBCYFyMbkyvwE0K-e21n/s1600/Twitter+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WT2" href="http://www.twitter.com/WIKITECHNOL"></a> 


<style> .WT3 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHoJwOE0X9_Nv-wJjps72bO7a_C1IrJiEjLfrISbSBmWOPsjOcEi4MDZUlNUT6V5yAZ2kX0z_AsGK3JFA27jz-li6koJ1FGt6gbFWFJB0Qt1r1tbSNhSJIuz_5JSpSOjaVG_2bVyBDmi7p/s1600/Feedburner+Icon.png') bottom;  text-indent: -99999px; } .WT3:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiJEC7ffoa-mOaVL_eDc67QdcndAQ80RvR8KzJo-ez3ZpR1pzrf8V_m6OSwslb11WgNPkPV4MDksOHtNcTLgHP0OwaTnORlaDe48V5cSTnXmpxfuijmEoubyN-ZRBuQ1KAzWBcw27VwOqnI/s1600/Feedburner+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WT3" href="http://feeds.feedburner.com/WIKITECHNOL"></a> 


<style> .WT4 {  display: block;  width: 64px;  height: 64px;  background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhSxNSNFUvA6XaLSPlGFPU2Y2Hgxjo4ONi84Cntue85_YOvZIun9qo-e4lO8qvZGEjy-k6mgK7i_rUH6PvvxoKuJZPQu0XzHdA5w0bWbzii4M6TQ_lkfTWRwzg_p6h8jHvLJBFfOGIT6Mr8/s1600/Google+Icon.png') bottom;  text-indent: -99999px; } .WT4:hover {         background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVmdMPTJxp1t5yikpAgFYAimr9nPB3fwaPft0SYtwEO-pNKxNvmDUVIcEcL_ADePsSmll_UfzQo9i3aVJYymZFEcaRkgz2hc3Aoqhh7Fi3rNeumxpQKANLWNU81qAPXNZBYUOiIRBRW_Fu/s1600/Google+Rollout+Image.png') bottom; height: 64px; } </style> <a class="WT4" href="http://plus.google.com/107244857879006042054"></a> 
</div> <!-- End -->

Customization:

  • Replace WIKITECHNOL with your Facebook username.
  • Replace WIKITECHNOL with your Twitter username.
  • Replace WIKITECHNOL with your feed username.
  • Replace 107244857879006042054 with your Google+ ID.


STEP #6: Now click on Save and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.


{ 0 comments... read them below or add one }


Post a Comment

 
↑