Follow simple and easy step to adding this social slider gadget in your blogger blog ---->>>>>
* First go go your blogger "Dashboard"
* Now click in "design" tab and edit "HTML".
* Click in small box to expand your blogger Template.
* Now find this code "]]</b:skin>" by "CTRL+F" key.
* Copy below code and paste before "]]</b:skin>"
#socialslider {
display : block;
padding : 0;
z-index : 9999;
}
#socialslider {
position : absolute;
}
#socialslider li {
background : none;
}
#socialslider img {
padding : 0;
margin : 0;
border : none;
}
.socialslider-grupa {
float : left;
}
#socialslider-linki {
float : left;
width : 75px;
}
#socialslider-linki img {
width : 32px;
height : 32px;
}
#socialslider-ikony {
position : absolute;
top : -1px;
width : 32px;
z-index : 110;
}
#socialslider-ikony ul {
left : 0;
position : relative;
bottom : -10px;
width : 32px;
}
#socialslider-ikony ul li {
padding : 0 6px 10px 6px;
width : 20px;
height : 20px;
}
#socialslider-ikony img {
width : 20px;
height : 20px;
border : none;
margin : 0;
}
#socialslider-ikony ul, #socialslider-linki ul, #socialslider-ikony li, #socialslider-linki li {
display : block;
list-style : none;
margin : 0;
padding : 0;
}
#socialslider-linki li {
padding : 5px;
text-align : center;
width : 75px;
}
#socialslider-linki img {
display : block;
border : none;
margin : 0 auto;
}
#socialslider-linki a {
border : none;
font-size : 10px;
text-decoration : none;
}
#socialslider-autor a {
font-family : Segoe UI, Tahoma;
font-size : 10px;
text-decoration : none;
}
#socialslider-ikony {
background : transparent url('http://www.freetraffictip.com/wp-content/plugins/social-slider-2/images/handle-lewy-ciemny.png') no-repeat right top;
padding-top : 1px;
padding-right : 1px;
}
#socialslider-ikony ul {
background : transparent url('http://www.freetraffictip.com/wp-content/plugins/social-slider-2/images/handle-lewy-ciemny.png') no-repeat right bottom;
padding-bottom : 1px;
padding-right : 1px;
}
* Now again find this code </head> by ctrl+f key.
* Copy below code and paste before </head>
<script type="text/javascript"> jQuery(document).ready(function () {var hideDelay=200;var hideDelayTimer=null;jQuery("#socialslider").hover(function(){if(hideDelayTimer)clearTimeout(hideDelayTimer);jQuery("#socialslider").animate({left:'0'},"normal");},function(){if(hideDelayTimer)clearTimeout(hideDelayTimer);hideDelayTimer=setTimeout(function(){hideDelayTimer=null;jQuery("#socialslider").animate({left:'-86'},"normal");},hideDelay);});}); </script>
For Example dont copy..
* Now click to save your blogger Template.
* Again go to your blogger Dashboard and click in design tab.
* Now you are here---->>>> Page element.
* Click in add gadget which is in your blogger Sidebar.
* When open new window click in HTML/javascript from list.
* When open new blank box copy below code and paste in blank box.
border-right: 1px solid #5b5b5b; border-top: 1px solid #5b5b5b; border-bottom: 1px solid #5b5b5b; background: #222; position: fixed;"> <div id="socialslider-contener" class="socialslider-contener"> <div id="socialslider-linki" class="socialslider-grupa"> <ul> <li><a href='YOUR FEED URL HERE' title='RSS' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/rss-32.png' alt='RSS' />RSS</a></li><li><a href='YOUR FEEDBURNER EMAIL URL HERE' title='Newsletter' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/newsletter-32.png' alt='Newsletter' />Newsletter</a></li><li><a href='YOUR TWITTER URL HERE' title='Twitter' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/twitter-32.png' alt='Twitter' />Twitter</a></li><li><a href='YOUR FACEBOOK URL HERE' title='Facebook' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/facebook-32.png' alt='Facebook' />Facebook</a></li><li><a href='YOUR YOUTUBE URL HERE' title='YouTube' style='color: #eee;' target='_self' rel='nofollow'><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/youtube-32.png' alt='YouTube' />YouTube</a></li><li id='socialslider-autor'><a href='http://www.blogger9.com/2011/07/social-slider-gadget-special-for.html/' title='Social Slider' style='color: #ccc;' target='_self'>Social Slider</a></li> </ul> </div> <div id="socialslider-ikony" style="right: -33px;"> <ul> <li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/rss-20.png' alt='RSS' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/newsletter-20.png' alt='Newsletter' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/twitter-20.png' alt='Twitter' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/facebook-20.png' alt='Facebook' /></li><li><img src='http://www.freetraffictip.com/wp-content/plugins/social-slider-2/icons/standard/youtube-20.png' alt='YouTube' /></li> </ul> </div> </div> </div> <script src="http://www.freetraffictip.com/wp-content/plugins/tweetmeme/button.js" type="text/javascript"></script> NOTE: Remove highlighted text in above code with your own ok.
* Now click To save your HTML/javascript now you are done....CHEERS
