AllBlogTools.com | Blogger Templates and Tricks |  |
- Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger
- Simple Mutlak
- NewsMagazine
| Adding Animation using CSS3 KeyFrames and jQuery Scroll Top Function to Blogger Posted: 10 Jan 2013 03:24 AM PST 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjyPgymN-BKGj7ItZjqD8nZaTPEReq5DVSG8eUMTLqsYvtudKymb076_tQVhW2lZNrCu_5gq0ejpuP5w3Wf-KZcy63X1YwWyne5d_wO93pS3HMAJs3qV4zJjt1PqgZNjPYEKvQvCl11tkh/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.      |
| Posted: 09 Jan 2013 01:04 PM PST Note: There is a file embedded within this post, please visit this post to download the file.
  |
| Posted: 09 Jan 2013 01:03 PM PST Note: There is a file embedded within this post, please visit this post to download the file.
  |
| You are subscribed to email updates from Blogger Templates, Tutorials, Tools | WordPress Themes | Allblogtools.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
Hiç yorum yok:
Yorum Gönder