Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger

Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

1,735 views

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'/>

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(http://3.bp.blogspot.com/-GgZTH0g3MQw/UNsqy--OCmI/AAAAAAAAIUg/riUFz9WLaaI/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.

Liked It ? Please Share

Comments

8 Responses | Post A Comment | Subscribe To Comments RSS Feed

  1. awesome tutorial sir. thanks for this.

  2. Hello, this weekend is good for me, because this time i am reading this wonderful informative article here at
    my house.

  3. excellent post, very informative. I ponder why the opposite experts of this sector don’t realize this. You should proceed your writing. I am sure, you have a huge readers’ base already!

  4. Hey there would you mind letting me know which webhost you’re working with? I’ve
    loaded your blog in 3 completely different web
    browsers and I must say this blog loads a lot quicker then most.
    Can you recommend a good hosting provider at a fair price?
    Thanks, I appreciate it!

  5. continuously i used to read smaller content which also clear
    their motive, and that is also happening with this post which I am reading now.

  6. Yet another first person shooter game this time
    around, but the first Far Cry was quite good.
    There is an opportunity for parents to offset the teacher:
    pupil ratio through practice at home. Wherever you click you are instantly overwhelmed with
    special offers: book this, buy that, fly with us, hop on this, reserve that.
    So, in conclusion, removing the headphones from
    your MP3 player is not bad, provided you don’t yank too hard on the cord. An analysis this change will give us insight into the supposed benefits they entail. Originally established as a sanctuary for the Nilgiri Tahr, the ‘The Eravikulam National Park’ has now turned into a highly popular tourist spot. They will check into a purpose built sports complex 8 miles from the venue of their first match in Rustenburg. Most visitors on a trip to Munnar invariably end up at the Tata Tea Museum and gain some delightful insights into the process of tea making. Dependency enslaves you, giving others the ultimate power over how you perceive and feel about yourself. Two people have a heated argument, voices raised, vocalized obscenities, hearts racing ‘ obvious discord all rooted in fear.

  7. Bishopscourt says:

    Thank you for the helpful information in your blog on Adding Animation using CSS3 KeyFrames
    and jQuery Scroll Top Function to Blogger.
    Bye

    my site … Bishopscourt

  8. Nikole says:

    Excellent pieces. Keep writing such kind of info on your page.
    Im really impressed by your site.
    Hey there, You have done an excellent job. I’ll certainly digg it and individually suggest to my friends. I am confident they will be benefited from this website.

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here