Here’s a very helpful tutorial by Mohammad Mustafa Ahmedzai of MyBloggerTricks on how you can add an animation using CSS3 keyframes and jQuery scroll top function to your Blogger site.
Check out the demo, then get started here:
1. Go to Blogger Dashboard > Template.
2. Edit HTML.
3. Search for <head> and copy and paste these codes just below it:
<script
src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'
type='text/javascript'/>
<script
src='http://downloads.mybloggertricks.com/scrolltop.js'
type='text/javascript'/>
Search for ]]></b:skin>
5. Paste these circular styles provided by Mohammad above ]]></b:skin>
@-webkit-keyframes arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}
}
@-moz-keyframes
arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}
}
@keyframes
arrow_to_top{
0%{
top:10px
}
50%{
top:5px
}
100%{
top:10px
}
}
#back-top,
#back-top:hover{
position: fixed;
display:block;
display:none;
bottom: 20px;
right:20px;
cursor:pointer;
width: 52px;
height:52px;
text-align: center;
text-decoration:
none;
color: #797e82;
color:
rgba(100,100,100,0.8);
font-size:16px;
border:1px solid
#c5ccd3;
border-radius:30px;
z-index:9999;
padding-top:35px;
-webkit-box-sizing:
border-box;
-moz-box-sizing:
border-box;
box-sizing:
border-box;
background: #dee1e7;
background:
rgba(208,215,222,0.5);
}
#back-top:hover{
color:#000;
text-shadow:1px 1px 0
#fff;
background: #d0d7de;
background:
rgba(208,215,222,0.9);
border-color:#8fa8c1;
}
#back-top:before{
display:block;
content:"";
position:absolute;
z-index:998;
background: #e2e3e6;
background:
rgba(222,225,231,0.3);
width: 66px;
height:66px;
border-radius:35px;
border:1px solid
#c5ccd3;
top:-9px;
left:-9px
}
#back-top:hover:before{
border-color:#8fa8c1
}
#back-top:after{
display:block;
content:"";
position:absolute;
z-index:10000;
background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1H4WjSS_UFDkWjZPOed_iiL-HzyS7YnZPc7YlRrduVOd7ei2iYgAsxxNwbRQ4uy8cbBdwcWV_6sB3HiFwphyUVcEJbxMn6_OQISy8SumoliwZux29VvOJKwW6II0q3FYO1OYFpi0IAZjV/s400/sprite-mbt.png)
-10px -5px no-repeat;
opacity:0.5;
width: 10px;
height:23px;
top:10px;
left:50%;
margin-left:-5px;
}
#back-top,
#back-top:after, #back-top:before{
-webkit-transition:
0.5s;
-moz-transition:
0.5s;
-o-transition: 0.5s;
-ms-transition: 0.5s;
transition: 0.5s;
}
#back-top:hover:after{
opacity:1;
-moz-animation-duration: .5s;
-moz-animation-iteration-count: infinite;
-moz-animation-name:
arrow_to_top;
-moz-animation-timing-function: linear;
-webkit-animation-duration: .5s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-name:
arrow_to_top;
-webkit-animation-timing-function: linear;
animation-duration:
.5s;
animation-iteration-count: infinite;
animation-name:
arrow_to_top;
animation-timing-function: linear;
}
6. Paste this HTML code below <body>
<a href='#top' id='back-top' style='right:0px; display:
inline;'/>
7. Save.
Note: Always have a backup of your template before editing it.
