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

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

Comments: 27
data:blog.title
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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/s144/button_bg.png'), url('https://lh6.googleusercontent.com/-4cWMlF-uqh4/TltCfL8C4DI/AAAAAAAABhE/qNaNueMVpCU/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. 

Related Post

Speak Your Mind

Really cool. I like most this post

Mohan Varma says: 3/06/2013

Error parsing XML, line 1240, column 10: The element type div must be terminated by the matching end-tag div.

Mohammad Rabbi says: 3/06/2013

its not an error from above code.Anyway send me a backup XML file of your template. I will try to solve the Error.

Ali says: 3/21/2013

Nice button example. Thanks.

ইসমাইল হোসেন রানা says: 4/27/2013

Not work

Mohammad Fazle Rabbi says: 4/28/2013

kindly send me your backup xml file. I will make it work..

Mohammad Naeem Sarkar says: 5/15/2013

Nice Post...

Mohammad Naeem Sarkar says: 5/15/2013

I send my Template...

Mohammad Fazle Rabbi says: 5/15/2013

didn't get any email from you...plz. send it again.

shoaib shuja says: 7/04/2013

i have send you my template with error detail.can you please work for me.

Adeel Amjad says: 7/10/2013

Great work. Keep it up .
http://www.adeelzsoft.blogspot.com/

Mr. Magic says: 7/22/2013

Not work for me
how to fix ????

Mohammad Fazle Rabbi says: 7/22/2013

send me your template backup copy I will work on it to install this widget.

Black Magic says: 8/18/2013

Thanks Brother.. I Send It ...
I want to Remove "undefined" On Every Post...
Wait Your Reply...!

Black Magic says: 8/18/2013

I Can't Find Second Codes...

Mohammad Fazle Rabbi says: 8/18/2013

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.

Black Magic says: 8/18/2013

Aww.... I Can't Add Read-Mor Option Anyway
Really Thanks For Answering Bro...

Black Magic says: 8/18/2013

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.

Mohammad Fazle Rabbi says: 8/18/2013

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.

Black Magic says: 8/18/2013

I Think 'The Base Template Name' is BlakMagik
Or
Please Check This http://cl.ly/253B1z253J0j/download/BlakMagik.zip .. It is Original Downloaded Template..

Black Magic says: 8/18/2013

And The Template Does Not Have Page Navigation.I Can Add This?

Mohammad Fazle Rabbi says: 8/19/2013

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.

Mohammad Fazle Rabbi says: 8/19/2013

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

Black Magic says: 8/19/2013

Thanks you very muchhhhh! :)
Your Are Very Kind... :D
But .. Both Template Not Work For Me... :(

Aslam Parvez says: 5/01/2014

Error parsing XML, line 1742,

Mohammad Fazle Rabbi says: 5/05/2014

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.

Aslam Parvez says: 5/07/2014

hmm bro :q

Facebook Group Community Code ConverterHide Code Converter Show EmoticonHide Emoticon

If you Got questions? Ask ’em below! While we’re here, you might like to leave a comment and let me know if you have any stories or questions.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *