Home
Blogging

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. 

25 comments

  1. Really cool. I like most this post
  2. Error parsing XML, line 1240, column 10: The element type div must be terminated by the matching end-tag div.
    • its not an error from above code.Anyway send me a backup XML file of your template. I will try to solve the Error.
  3. Nice button example. Thanks.
  4. Not work
    • kindly send me your backup xml file. I will make it work..
  5. I send my Template...
    • didn't get any email from you...plz. send it again.
  6. i have send you my template with error detail.can you please work for me.
  7. Not work for me
    how to fix ????
    • send me your template backup copy I will work on it to install this widget.
  8. Thanks Brother.. I Send It ...
    I want to Remove "undefined" On Every Post...
    Wait Your Reply...!
  9. I Can't Find Second Codes...
    • Bro Your template hasn't any auto read-more option..Without this it Readmore button won't work. That's the reason you didn't find second codes.
  10. Aww.... I Can't Add Read-Mor Option Anyway
    Really Thanks For Answering Bro...
  11. Hee ... I Can Ask One More Question...?
    :)
    Want To Remove "Undefined" On Every Post And Change Place Of " 0 Comments"
    Sorry For Waste Your Precious Time
    Please Don't Angry Because Of My Questions.
    • Your templates Posting date and time is not defined. for this reason it is showing Undefined..You have to set it manually. Its better to ask to original author..or give me the your base template name..I will give you the solution.
  12. I Think 'The Base Template Name' is BlakMagik
    Or
    Please Check This http://cl.ly/253B1z253J0j/download/BlakMagik.zip .. It is Original Downloaded Template..
    • Hi Black Magic..To fix the undefined error go to Settings-> Language and Formatting.Set the Time Zone+Timestamp Format according to you countries time zone (For example-I am from Bangladesh and my time zone is (GMT+06:00)Dhaka) and current time according to your watch, I mean when you are going to change the timestamp. Hope it will work.
  13. And The Template Does Not Have Page Navigation.I Can Add This?
    • You can use my pagination..I have released 2 design..use anyone from below link-

      http://www.bloggerspice.com/2013/01/stylish-number-page-navigation-for-your.html

      http://www.bloggerspice.com/2013/02/page-navigation-with-blog-pager-design.html
  14. Thanks you very muchhhhh! :)
    Your Are Very Kind... :D
    But .. Both Template Not Work For Me... :(
  15. Error parsing XML, line 1742,
    • Hi Aslam this code has some compatibility issue. According to template coding you have to change the Readmore widget code. So it require little HTML and CSS knowledge. Thanks.
    • hmm bro :q
Go Up