::: Add Css & JQuary Back To Top Plugin For Blogger:::
- First Log In your Blogger Account.
- Then go to Dashboard.
- Click Template > Edit HTML.
- Press CTRL+F on the Keyboard.
- Find </head> code in your Templae.
- Copy Below Css code and past above </head> code.
<style>
#toTop {
display:none;
text-decoration:none;
position:fixed;
bottom:10px;
right:10px;
overflow:hidden;
width:51px;
height:51px;
border:none;
text-indent:100%;
background:url(http://goo.gl/gF9ppt) no-repeat left top;
}
#toTopHover {
background:url(http://goo.gl/gF9ppt) no-repeat left -51px;
width:51px;
height:51px;
display:block;
overflow:hidden;
float:left;
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
}
#toTop:active, #toTop:focus {
outline:none;
}
</style>
- Now Find <body> code.
- Then Copy below java script code and past it in to below of <body> code.
<script src='http://my-premium-blogger-templates.googlecode.com/files/jquery-1.7.2.min.js' type='text/javascript'/>
<!-- easing plugin ( optional ) -->
<script src='http://my-premium-blogger-templates.googlecode.com/files/easing.js' type='text/javascript'/>
<!-- UItoTop plugin -->
<script src='http://my-premium-blogger-templates.googlecode.com/files/jquery.ui.totop.js' type='text/javascript'/>
<!-- Starting the plugin -->
<script type='text/javascript'>
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
- Then all Of done. Click Save template.
- Above the Css part Find Image URL like Below.
http://goo.gl/gF9ppt
- I give to you bones Back to top images. You can See it below link.
- and replace Image link as you like to Customize Image.
http://goo.gl/J1VkAZ http://goo.gl/6vEenf http://goo.gl/QYuTKN http://goo.gl/XbfxBM http://goo.gl/5pg2aX http://goo.gl/jX947b
No comments:
Post a Comment