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

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

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. 
CSS Read More Button with Animated Bubble effects For Blogger Templates.
4 Stars stars - "CSS Read More Button with Animated Bubble effects For Blogger Templates. " We have seen CSS bubble "Live Demo" Button for blogger templates. But CSS bubble ...

Post a Comment

Really cool. I like most this post

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.

Nice button example. Thanks.

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

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

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

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

Not work for me
how to fix ????

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

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

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.

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

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.

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

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

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.

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

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

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.

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

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 *