Floating Social Plugin in Mouse Hover Effect

Hello Friends ! here is a Simple Method to Add a Floating Social plugin At Mouse Hover Effect.after searching a lot on floating plugins for blogger with Mouse Hover Effect,i've found an awesome plugin for blogger specially works Mouse Hover Effect like When You Move or touch your Mouse's Pointer on the Social plugin it is open downwards.

Now Add the Floating Social Plugin to Your Blog :.

Note :. the Important thing is to Change facebook,google plus and twitter links and the feed url in the given code at the time of Addition.

Note : Don't Forget to Include Your Code.


@) This is a Manual method :.


Here Copy the Below Code and Login to your Blogger Dashboard 
And no go to design > Page Elements 
Choose the HTMl/JAVASCRIPT 
And Now Paste the Below Code in it

1. <style>  
2. ul#navigation {  
3. position: fixed;  
4. margin: 0px;  
5. padding: 0px;  
6. top: 0px;  
7. right: 0px;  
8. list-style: none;  
9. z-index:999999;  
10. width:721px;  
11. }  
12. ul#navigation li {  
13. width: 103px;  
14. display:inline;  
15. float:left;  
16. border:0;  
17. }  
18. ul#navigation li a {  
19. display: block;  
20. float:left;  
21. margin-top: -2px;  
22. width: 100px;  
23. height: 25px;  
24. background-color:#eeeeee;  
25. background-repeat:no-repeat;  
26. background-position:50% 10px;  
27. border:1px solid #BDDCEF;  
28. -moz-border-radius:0px 0px 10px 10px;  
29. -webkit-border-bottom-right-radius: 10px;  
30. -webkit-border-bottom-left-radius: 10px;  
31. -khtml-border-bottom-right-radius: 10px;  
32. -khtml-border-bottom-left-radius: 10px;  
33. text-decoration:none;  
34. text-align:center;  
35. padding-top:80px;  
36. opacity: 0.96;  
37. filter:progid:DXImageTransform.Microsoft.Alpha(opacity=70);  
38. }  
39. ul#navigation li a:hover{  
40. background-color:#CAE3F2;  
41. }  
42. ul#navigation li a span{  
43. letter-spacing:2px;  
44. font-size:11px;  
45. color:#60ACD8;  
46. font-family:trebuchet-ms, arial, tahoma, Sans-Serif;  
47. font-weight:bold;  
48. text-shadow: 0 -1px 1px #fff;  
49. }  
50. ul#navigation .rss a{  
51. background-image: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrVtGaU9hqDhndmyCszTdg-KfcfCfRsjVZwBif2q6YAQsxMK1pzabK6FSdesvNAb2tIWh4pD7bAAxwSu25PwkRfzrRo71WjRHjCEKINzQMxpihGTTYd_gPg54sf1N3unybEbf4xXgzrYSw/s1600/rss-logo-64x64.png);  
52. }  
53. ul#navigation .facebook a {  
54. background-image: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh63ackLcHN3DrSqExnA0CE0wqsj9CAA9L8HKJFXRR9qKI0n2tF_vLvUGaUUj89Ia8iT-h8yV7s1wnwNKAg8Ce8YmZCPxsITXaGTc8GUCTuPpAlOgCgBg1l1sJCvzZZtEPT8jg_4bFZy3ZC/s1600/facebook-button.png);  
55. }  
56. ul#navigation .twitter a {  
57. background-image: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsuFhlIEWXHj86Mt6KomLoBW4-8OO1X8JLFtNeZwRHeXtpsjjGk5PsuDz8Rh85IbVBVcbKkyM3BNZiJ5Ou2sy_PCQF9NdNbABSrqLJQkFlUnujJI04xyVOxynt73BTsTT4ynkbNH3dsaiO/s1600/images.jpg);  
58. }  
59. ul#navigation .googlebookmarks a {  
60. background-image: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9Ut3P8CgTInVNaNFaNkJi8nnEI3fm_hp3OWp3ZXUIwk_Rk5WhiWCoJDHxg_q6GASnOQrYfGJwcFJ6wliMHphBp1iSq6dLQa1eZLx8Rlt5vTua55Kq9eOQc2QqUVP4xsDAGGkDPawakN2K/s1600/google-plus-logo-64x64.png);  
61. }  
62. ul#navigation .e-mail a {  
63. background-image: url(http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjjRaBn750Zi59C_5RV2DrKm3NjCcEJ0m5E3lbiUk-qqH1Z35zIFLSlq4UupaZY9XXenXDmnzPXpZX2R9bNCJsEvnrp8ZQBJpraCrPOfE4Pr5O1D5-Ipg-92_SewbLlh0B77bRH5a1kigp5/s1600/icon_yahoo.jpg);  
64. }  
65. </style>  
66.   
67. <script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js" type="text/javascript">  
68. </script>  
69. <script type="text/javascript">  
70. $(function() {  
71. var d=300;  
72. $('#navigation a').each(function(){  
73. $(this).stop().animate({  
74. 'marginTop':'-80px'  
75. },d+=150);  
76. });  
77.   
78. $('#navigation > li').hover(  
79. function () {  
80. $('a',$(this)).stop().animate({  
81. 'marginTop':'-2px'  
82. },200);  
83. },  
84. function () {  
85. $('a',$(this)).stop().animate({  
86. 'marginTop':'-80px'  
87. },200);  
88. }  
89. );  
90. });  
91. </script>  
92.   
93. <ul id="navigation"><li class="rss"><a href="http://feeds.feedburner.com/fblatest/nflb" rel="nofollow" target="_blank">RSS Feed</a></li>  
94. <li class="facebook"><a href="http://www.facebook.com/COMPUTERS.TRICKS" rel="nofollow">Facebook</a></li>  
95. <li class="twitter"><a href="http://www.twitter.com/fblatest" rel="nofollow">Twitter</a></li>  
96. <li class="googlebookmarks"><a href="https://plus.google.com/113984752981172252339" rel="nofollow">Google +</a></li>  
97. <li class="e-mail"><a href="http://www.blogger.com/post-edit.g?blogID=6667344376774425934&postID=1153378590254891100#" rel="nofollow">Yahoo!</a></li>  
98. </ul>

Now Replace the Urls Given Above With your Links 


Don't Forget to Change the Rss,Facebook,Twitter and Google plus Links.So that you've changed the Links.then Save the Widget.that's it Now you are Done.

You Might Also Like