Change Blogger Read More Links To Buttons



Read More

Read More or Jump Break Links is facility provided by blogger to break the post in between.Generally Read More Link does not look great.In my previous post o gave you solution to Change Read More Link with image.If you are using image instead of link then your blog loading speed will decrease.In this post I will give you way by which you can Convert read more links to buttons with Css3.


How To Change Read More Links To Button


  • Go To Blogger Dashboard.
  • Click On Template tab
  • Now Click On Edit HTML>> Proceed
  • Now Find  ]]></b:skin>
  • Now select any one button style and paste code above ]]></b:skin>

Style 1



.jump-link a {
background-color: #EEE;
background-image: -webkit-gradient(linear, left top, left bottom, from(#EEE), to(#CCC));
background-image: -webkit-linear-gradient(top, #EEE, #CCC);
background-image: -moz-linear-gradient(top, #EEE, #CCC);
background-image: -ms-linear-gradient(top, #EEE, #CCC);
background-image: -o-linear-gradient(top, #EEE, #CCC);
background-image: linear-gradient(top, #EEE, #CCC);
border: 1px solid #CCC;
border-bottom: 1px solid #BBB;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
color: #333 !important;
font: bold 16px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
line-height: 1;
padding: 8px 60px;
text-align: center;
text-shadow: 0 1px 0 #EEE;
display: inline-block;
margin: 0 5px;
}
.jump-link a:hover {
background-color: #dddddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#bbbbbb));
background-image: -webkit-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -moz-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -ms-linear-gradient(top, #dddddd, #bbbbbb);
background-image: -o-linear-gradient(top, #dddddd, #bbbbbb);
background-image: linear-gradient(top, #dddddd, #bbbbbb);
border: 1px solid #bbb;
border-bottom: 1px solid #999;
cursor: pointer;
text-shadow: 0 1px 0 #ddd;
text-decoration:none;
}
.jump-link a:active {
border: 1px solid #aaa;
border-bottom: 1px solid #888;
-webkit-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-moz-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-ms-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
-o-box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
box-shadow: inset 0 0 5px 2px #aaaaaa, 0 1px 0 0 #eeeeee;
}

Style 2

 


.jump-link a{ background-color:#4b3f39; font-family: 'Verdana', sans-serif; font-size:14px; text-decoration:none; color:#fff; position:relative; padding:10px 20px; padding-right:50px; background-image: linear-gradient(bottom, rgb(62,51,46) 0%, rgb(101,86,78) 100%); border-radius: 5px; box-shadow: inset 0px 1px 0px #9e8d84, 0px 5px 0px 0px #322620, 0px 10px 5px #999; }

.jump-link a:active
{ top:3px; background-image: linear-gradient(bottom, rgb(62,51,46) 100%, rgb(101,86,78) 0%); box-shadow: inset 0px 1px 0px #9e8d84, 0px 2px 0px 0px #322620, 0px 5px 3px #999; }

.jump-link a:before
background-color:#322620; background-image:url(https://lh3.googleusercontent.com/-LtgkrgnPcmI/TzzVm8tvg7I/AAAAAAAAA4Y/SO04mp9dcts/h80/helper-blogger-right-arrow.png); background-repeat:no-repeat; background-position:center center; content:""; width:20px; height:20px; position:absolute; right:15px; top:50%; margin-top:-9px; border-radius: 50%; box-shadow: inset 0px 1px 0px #19120f, 0px 1px 0px #827066; }

.jump-link a:active::before
{
top:50%; margin-top:-12px; box-shadow: inset 0px 1px 0px #827066, 0px 3px 0px #19120f, 0px 6px 3px #382e29; }

Style 3


.jump-link a {
   border-top: 1px solid #4a4a4a;
   background: #000000;
   background: -webkit-gradient(linear, left top, left bottom, from(#383838), to(#000000));
   background: -webkit-linear-gradient(top, #383838, #000000);
   background: -moz-linear-gradient(top, #383838, #000000);
   background: -ms-linear-gradient(top, #383838, #000000);
   background: -o-linear-gradient(top, #383838, #000000);
   padding: 10px 20px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffb700;
   font-size: 15px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.jump-link a:hover {
   border-top-color: #000000;
   background: #000000;
   color: #ffffff;
   }
.jump-link a:active {
   border-top-color: #0099ff;
   background: #0099ff;
   }

Style 4


.jump-link a {
   border-top: 1px solid #a371a3;
   background: #d100d1;
   background: -webkit-gradient(linear, left top, left bottom, from(#f7a3f7), to(#d100d1));
   background: -webkit-linear-gradient(top, #f7a3f7, #d100d1);
   background: -moz-linear-gradient(top, #f7a3f7, #d100d1);
   background: -ms-linear-gradient(top, #f7a3f7, #d100d1);
   background: -o-linear-gradient(top, #f7a3f7, #d100d1);
   padding: 11.5px 23px;
   -webkit-border-radius: 19px;
   -moz-border-radius: 19px;
   border-radius: 19px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: #ffffff;
   font-size: 16px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.jump-link a:hover {
   border-top-color: #000000;
   background: #000000;
   color: #ffffff;
   }
.jump-link a:active {
   border-top-color: #0099ff;
   background: #0099ff;
   }

Style 5


.jump-link a{
  border-top: 1px solid #474747;
   background: #292929;
   background: -webkit-gradient(linear, left top, left bottom, from(#4d4d4d), to(#292929));
   background: -webkit-linear-gradient(top, #4d4d4d, #292929);
   background: -moz-linear-gradient(top, #4d4d4d, #292929);
   background: -ms-linear-gradient(top, #4d4d4d, #292929);
   background: -o-linear-gradient(top, #4d4d4d, #292929);
   padding: 9.5px 19px;
   -webkit-border-radius: 40px;
   -moz-border-radius: 40px;
   border-radius: 40px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 14px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
}
.jump-link a:hover {
   border-top-color: #333333;
   background: #333333;
   color: #ccc;
}

Style 6


.jump-link a{
  border-top: 1px solid #54bdff;
   background: #005af5;
   background: -webkit-gradient(linear, left top, left bottom, from(#33adff), to(#005af5));
   background: -webkit-linear-gradient(top, #33adff, #005af5);
   background: -moz-linear-gradient(top, #33adff, #005af5);
   background: -ms-linear-gradient(top, #33adff, #005af5);
   background: -o-linear-gradient(top, #33adff, #005af5);
   padding: 12px 24px;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
   -moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
   box-shadow: rgba(0,0,0,1) 0 1px 0;
   text-shadow: rgba(0,0,0,.4) 0 1px 0;
   color: white;
   font-size: 17px;
   font-family: Georgia, serif;
   text-decoration: none;
   vertical-align: middle;
}


  • After adding One of above CSS code click on Save Template Button And Enjoy Read More Buttons.

If you are facing problem then comment your problem below I will solve it as soon as possible.

Share This Post →

Subscribe Us And Get Updates Right To Your Inbox

​
at
Labels: , ,
Subscribe to: Post Comments (Atom)
​
Powered By Blogger| Place To Download © 2013. All Rights Reserved
DMCA.com