• 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. Unknown27 November 2013 at 19:57

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

    ReplyDelete
    Replies
    1. Rohitkumar A28 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 @ The Whimsical Olive14 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!

Popular Posts

  • MaterialMix : A Free Material Design Blogger Template
  • How to add Custom Fonts in Blogger or Any Website
  • How to use full ISP bandwidth to speed up downloading
  • Download Materiality Blogger Template
  • Resume Lite - One Page Resume Blogger Template
  • Best Social Media Widget for Blogger | 2017
Email Newsletter

Get Latest Posts Directly Into You Inbox

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

  • High PR Forums That Can Bring You High Traffic
  • Sensational v2.0 Responsive Blogger Template
  • Materiality - Material Design Blogger Template
  • BloggerHero Free Premium Blogger Template
  • MaterialMix : A Free Material Design Blogger Template
  • [Fixed] Facebook Share Thumbnail Is not Showing on Blogger

Contact Form

Name

Email *

Message *

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

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