CSS Read More Button with Animated Bubble effects For Blogger Templates.

CSS Read More Button with Animated Bubble effects For Blogger Templates.
Readmore button

We have seen CSS bubble "Live Demo" Button for blogger templates. But CSS bubble "Read More" button is  unique. So I am going to share with you a trick that how to add CSS bubble "Read More" button in your blogger templates. You can see the Demo in my templates. So let's proceed to the tutorial. Remember Back Up your templates first. After that follow the below tutorial-

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Click on  Now click on -> Template -> Edit HTML

Step 3 Now Find this code ]]></b:skin> by pressing Ctrl+F (Windows) or CMD+F (Mac) 

Step 4 Paste the below code Before/above ]]></b:skin> and Save the templates.


/*---CSS bubble "Read More" by www.bloggerspice.com ---*/
.readmore { float:right; display:block; height: 16px;line-height: 16px;background:#fc7e1a;text-transform:uppercase;font-size:12px;padding:0 3px}
a.readmore {color:#fff}

.jump-link { font-weight:bold; border-radius:0px; padding:0 15px; float:right; background:#C0C0C0; height:20px; line-height:20px }
.jump-link{ font:15px Calibri, Arial, sans-serif; text-shadow:1px 1px 0 rgba(255,255,255,0.4); text-decoration:none !important; white-space:nowrap; display:inline-block; vertical-align:baseline; position:relative; cursor:pointer; padding:10px 20px; background-repeat:no-repeat; background-position:bottom left; background-image:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'); background-position:bottom left, top right, 0 0, 0 0; background-clip:border-box; -moz-border-radius:8px; -webkit-border-radius:8px; border-radius:8px; -moz-box-shadow:0 0 1px #fff inset; -webkit-box-shadow:0 0 1px #fff inset; box-shadow:0 0 1px #fff inset; -webkit-transition:background-position 1s; -moz-transition:background-position 1s; transition:background-position 1s; height:100; width:100px; font-size:20px; }
.jump-link:hover{ background-position:top left; background-position:top left, bottom right, 0 0, 0 0; }
.jump-link:active{ bottom:-1px; } /* The three buttons sizes */

.jump-link.medium { font-size:18px;}
.jump-link.small { font-size:13px;} /* BlueButton */
.jump-link{ color:#0f4b6d !important; border:1px solid #84acc3 !important; background-color: #48b5f2; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(89,208,244,1) 0,rgba(89,208,244,0) 100px), -moz-linear-gradient(#4fbbf7, #3faeeb); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(89,208,244,1)), to(rgba(89,208,244,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#4fbbf7), to(#3faeeb)); } .jump-link:hover{ background-color:#63c7fe; background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), -moz-radial-gradient( center bottom, circle, rgba(109,217,250,1) 0,rgba(109,217,250,0) 100px), -moz-linear-gradient(#63c7fe, #58bef7); background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBFAmSq_fJFBffHdC4q2sV4RNy6WStMgtcPuCzqNfgSbcK7epPcjDmHRjZyiHQxKrhvsaVWIge8A3jR90D0YvViUjHUAxGkGRoYU-3Sdxxt4zKB3LAiCWr-Hl0wmFX0GApPO5oqyHpYcLO/s144/button_bg.png'), -webkit-gradient( radial, 50% 100%, 0, 50% 100%, 100, from(rgba(109,217,250,1)), to(rgba(109,217,250,0))), -webkit-gradient(linear, 0% 0%, 0% 100%, from(#63c7fe), to(#58bef7)); }
Step 6 Now again find the below code
    <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + &quot;#more&quot;' expr:title='data:post.title'><data:post.jumpText/></a> 
      </div>
    </b:if>
Step 7 Now replace the above code with below code and Save the templates.
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read more</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read more</a>
</b:if></b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div dir='ltr' style='text-align: left;' trbidi='on'>
</div>
</b:if>
 If you face any problem just leave a comment below. 
Go Up