Here’s a very helpful tutorial 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'/>4. Search for ]]></b:skin>
<script src='http://downloads.mybloggertricks.com/scrolltop.js' type='text/javascript'/>
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/AVvXsEg25iA481QDaxHIn_Zhs9StZ4AVU8g3oqUBKgQnHBKcUJhRyi5nR0kOQSekbEskGK1wMRjIJKs2ozHeCEK7jjGSKFPZvs6kHkLH5tCc_cO79PhpZDY0J7GYZ5FZ657giYLSlE9HSuLxoQ7h/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;6. Paste this HTML code below <body>
animation-iteration-count: infinite;
animation-name: arrow_to_top;
animation-timing-function: linear;
}
<a href='#top' id='back-top' style='right:0px; display: inline;'/>7. Save.Note: Always have a backup of your template before editing it.
0 comments:
Post a Comment