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'/> <script src='http://downloads.mybloggertricks.com/scrolltop.js' type='text/javascript'/>4. 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/AVvXsEgGWbwk51pqAVmLDlMTH_cA6GfXo9cfBocVhyHUhmT5S4tTCCic1WFCnjIoElDMYriiDOgUIivdV0bUgcixzRkbejMgxQ1LAunQV7jxt6KfmxrBI3vnzPjBTaEt-nJq_c5fHWLXCsmo82za/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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.
0 comments:
Post a Comment