gubhug reyot
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 - All rights reserved

CSS nggolekisearchporm

How to add animation to the blogger "READ MORE" using CSS3 Transition-Transformation

This is a simple way to make blogger (blogspot) "read more" become more attractive. We will only use the CSS code to create some animation on "read more" by using CSS3-Transisition-Transformation. Makes it very easy because you only save the CSS code above the code ]]> and then "click"-SAVE-Template.

CSS Code

.jump-link {
padding: 10px 0;
height: 40px;
.jump-link a {
padding: 0px 10px;
border: 2px outset #993300;
background: #888;
text-decoration: blink;
text-align: center;
float: right;
border-radius: 6px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
font: 16px Times;
font-weight: bold;
color: #99FFFF;
text-shadow: 1px 1px 1px #000;
-o-transition: all 1.2s ease-in;
-moz-transition: all 1.2s ease-in;
-webkit-transition: all 1.2s ease-in;
.jump-link:hover a {
color: red;
background: #66CCFF;
font-size: 18px;
-o-transform: translate(-40px) scale(1.1) rotate(-10deg);
-moz-transform: translate(-40px) scale(1.1) rotate(-10deg);
-webkit-transform: translate(-40px) scale(1.1) rotate(-10deg);
text-decoration: none;
border-radius: 12px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
.jump-link a:active {
color: #0000CC;
background: #aaa;
border:2px outset #333;
-o-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-webkit-transition: all 0.2s ease-out;

How to save the CSS code :

  1. Login to Blogger
  2. Dasboard : Click "Design".
  3. Design : Click "Edit HTML".
  4. Edit HTML : find code below
  5. Copy-Paste : Copy the CSS code and place it above the ]]></b:skin>.
  6. SAVE Templates
  7. Open your blog and see the results.

Click the link below to open the tutorial!

Tutorial: Animated Read More

Original tutorial by gubhug reyot

You can see other best tutorial below ...

Please open the links below to read the others bloggers tutorial who can complete the tutorials and demos on this blog.Thank you for your visit!


Bila tak pegal di tangan
silahkan tulis sebuah komentar!

gubhug reyot

Recent Posts Using jQuery-CSS3

GR | Edited by | gubhug reyot