Add github style sliding link to blogger read more link

David walsh 's blog is one of my favorite blog.Few days back he wrote this post.He explained how to crate sliding links like github.In this tutorial i,m going to style blogger's Read more link with the same way.

Read more LINK

  read more LINK HOVER 

  Step1.Update your template

1.Go to blogger>login>template>edit html

2.Backup your template.

3.Find (Ctrl+f) this line

<div class='jump-link'>

4.You will also find this code below that

        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a>

5.Replace the code with this one

 <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.title/></a>h

6.Save the template.

Step:-2 ADD CSS

1.Adding css is very simple.Go to template>customize>add css.Or if you are using old template code then find }]]></b:skin>.Add css code before this code.

2.I used whole david's css.did not changed any color or anything.if u want to change you can do it.

div.jump-link {
  max-width:690px;
  position:relative;
}
.jump-link a {
  position: relative;
  height: 24px;
  display: inline-block;
  top: 7px;
  color:#fff;
  vertical-align: top;
 font-family: "Consolas",Liberation Mono,Courier,monospace;
padding: 0 7px;
  background: #444;
  background: -moz-linear-gradient(#444, #222);
  background: -webkit-linear-gradient(#444, #222);
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444',endColorstr='#222222')";
  border: 1px solid black;
  border-radius: 3px;
 font-size: 13px;
  line-height: 24px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 200px;
  transition: 0.4s max-width linear;
  -o-transition: 0.4s max-width linear;
  -moz-transition: 0.4s max-width linear;
  -webkit-transition: 0.4s max-width linear;
  -ms-transition: 0.4s max-width linear;
}
.jump-link a:hover, .jump-link a:active {max-width: inherit;}

3.Click on Apply to blog.

Step3:-adding read more text

You must add read more text before the post title.you can do it using css.

1.just add this css into your template.

.jump-link a::before{
content:"Read more of >> "
}

2.You can edit this "Read more of >> " as you like.this simply adds Content text before the classname.

Alternative way to add Read more text

1..jump-link a::before css rule does not work on IE.so there is another way to add this text.
2. Go to template>edit html
3.find this code

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.title/></a>

4.Replace that code with this one

<a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/><data:post.title/></a>

Hope this will work.if you have any problem let me know.dont forget to share the tutorial.

Thanks For reading.