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
   ]]></b:skin>.
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.

1. gubhug reyot
2. Tanty Template Modification
3. bloggerstuars

Thank you for your visit!

Greeting