• Tutorials
  • Blogger Themes
  • Blogger SEO
  • Blogger Widgets
  • Internet
  • Mobile Phones
  • Gadgets
BloggerHero - Blogger Tuts, SEO, Themes, Gadgets
  • Home
  • Blogger
  • SEO
  • Themes
  • Internet
  • Widgets
  • Gadgets
  • About
  • search
    close

Automatic Read More Button For Blogger

 Rohitkumar  10:36  3 comments
Tweet
Unique Read More Button for Blogger
Read More Button is one of the most important things related to Blogger Blog. Adding a Read More Button to your blog can decrease your blog’s bounce rate. You might have seen various kind of Read More Buttons at many blogs or websites, specially on pro-blogger websites or those blogs which are designed by high cost and premium templates. Its really easy nowadays to customize blogger blog template easily with few CSS codes. I have shared several CSS codes and tutorials to make your blog looking like professional and with unique design. You might have seen various tutorials about adding the Read More buttons, but I don’t think they are much better than the CSS Optimized Read More Button we are going to see today. You can see the live demo image of this Read More Button below.
Read More Button

Whats New in This Read More Button ? 

1. CSS optimized.
2. Quick Response even with the high CSS coding.
3. Doesnt affect page loading time.
4. Easy To install.
5. Effective and Decent Look.
6. Fully Automated. No Need of Jump Breaks in Blogger Posts.

Now, you can have a look on below picture its snapshot of our Read More button. Its highly customized with CSS code which gives it really awesome and decent look. It really easy to install this automated Read More Button on your blog, it just need to copy paste some codes in your blogger template which I'm gonna explain step by step.

How to Install Read More Button for Your Blog ?

Just follow these easy steps :
1. Go to Blogger > Dashboard > Template. [Backup Your Blogger Template]
2. Find the code </head>
3. Now after finding this code, simply copy paste the below code just above it.
<script type='text/javascript'>var thumbnail_mode = "no-float" ; 
summary_noimg = 430; 
summary_img = 340; 
img_thumb_height = 100; 
img_thumb_width = 120; 
</script> 
<script type='text/javascript'> 
//<![CDATA[ 
function removeHtmlTag(strx,chop){ 
if(strx.indexOf("<")!=-1) 
{ 
var s = strx.split("<"); 
for(var i=0;i<s.length;i++){ 
if(s[i].indexOf(">")!=-1){ 
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
} 
} 
strx = s.join(""); 
} 
chop = (chop < strx.length-1) ? chop : strx.length-2; 
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
strx = strx.substring(0,chop-1); 
return strx+'...'; 
} 
function createSummaryAndThumb(pID){ 
var div = document.getElementById(pID); 
var imgtag = ""; 
var img = div.getElementsByTagName("img"); 
var summ = summary_noimg; 
if(img.length>=1) { 
imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>'; 
summ = summary_img; 
} 
var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>'; 
div.innerHTML = summary; 
} 
//]]></script> 
Note :
summary_ noimg= 430; >> The length of the summery if the post does not have a thumbnail.
summary_img = 340; >>The length of the summery if there is an image in the post that will be converted into a thumbnail.
null_thumb_height = 120; >> The height in pixels of the thumbnail.
null_thumb_width = 120; >>The width in pixels of the thumbnail.

4. Now find the following code <data:post.body/> and replace it with the below code.
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/> 
<b:else/> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'> 
<data:post.body/> 
<b:else/> 
<div expr:id='&quot;summary&quot; + data:post.id'> 
<data:post.body/> 
</div> 
<script type='text/javascript'> 
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;); 
</script> 
<span class='rmlink' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Read More</a></span>
<div style='clear: both;'/> 
</b:if> 
</b:if>
5. You can also change "Read More" to "Continue Reading". Now search for ]]></b:skin> and copy paste the below code just above it.
.rmlink a {  float: right;  }
.rmlink a {   border: 1px solid rgba(0, 0, 0, .2); color: #fff; display: inline-block;  text-decoration: none; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5); border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);  background: #D56540; background: linear-gradient(top, #D56540 0%, #cc6633 100%); background: -moz-linear-gradient(top, #D56540 0%, #cc6633 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#D56540), color-stop(100%,#cc6633)); background: -webkit-linear-gradient(top, #D56540 0%,#cc6633 100%);  cursor: pointer;  }
.rmlink a:hover {  background: #E1704B;  color: #fff;  text-decoration: none;  }
.rmlink a { font-size: 14px; font-family: georgia; line-height: normal;  padding: 5px 10px;  }
Note : If you want to add just "Read More" text without any CSS Button then don't add code in ]]></b:skin> section and click on save you're Done !
Don't forget to say thanks and I hope you would have Subscribed Us via Email. Kindly share this post with your friends. If you have any problems just drop them here. Stay Connected.

    Sharing is Caring!

  • Facebook
  • Twitter
  • Google+
  • StumbleUpon
  • linkedIn
  • StumbleUpon

Rohitkumar A

Posted In blogger, css, trick
Subscribe Now

Get Latest Posts Directly Into You Inbox

 3 comments :

  1. Sohel Shaikh27 November 2013 at 19:57

    it's not working........

    ReplyDelete
    Replies
    1. Rohit Asare28 November 2013 at 06:16

      Sorry for the Trouble, there was slight error in coding, now I've fixed it. You can try this out ;)

      Delete
      Replies
        Reply
    2. Reply
  2. Olivia Hou14 May 2014 at 17:26

    It's not working for me either. :( Do you know how to fix this?

    ReplyDelete
    Replies
      Reply
Add comment
Load more...

Newer Post Older Post Home
Do you like my work?

Buy Me a Coffee!
Blogger Hero

Popular Posts

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Make Your Blog Load Faster
  • MaterialMix : A Free Material Design Blogger Template
  • Materiality - Material Design Blogger Template
  • How to Download Books from Google Books for FREE
Email Newsletter

Get Latest Posts Directly Into You Inbox

Looking for Professional Website?

We provide premium corporate, business, company, portfolio, resume, E-Commerce websites at most affordable costs with FREE SEO & In-depth Aanalytics.

Get Stared Today!

Labels

Android blogger browser Buy computer css drop down menu Gadgets Google how to internet Laptops Mobile Phone phone responsive reviews SEO smartphone Social Media Social Share Widgets subscription box Template tool trick widget Wireless youtube
Powered by Blogger.

Popular Posts

  • Sensational v2.0 Responsive Blogger Template
  • High PR Forums That Can Bring You High Traffic
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger
  • BloggerHero Free Premium Blogger Template
  • How to Add Facebook Open Graph for Blogger
  • Materiality - Material Design Blogger Template

Contact Form

Name

Email *

Message *

  • Home
  • About
  • Contact
  • Sitemap
  • Services
  • Request
  • Privacy Polciy

© 2013 BloggerHero.com. All Rights Reserved. Designed with Love for Everyone!