Add MBT Animated Read More stylished buttons With Thumbnail To Blogger/Website.

So now I am going to share one new gadget for blogger which is auto read more thumbnail for blogger with some CSS buttons. You know that adding some read more button to the blog post brings some professionalism in the blog because people want to read the post so in the homepage of your site or blog only some selected length of content of article displayed and after that the read more button appear and visitor easily navigate from homepage to required post. Here you can also create your own CSS button by the CSS Button Generator.

 With this way reader can easily see the other posts on homepage of the blog because it display as many post as they are. If we not add any read more point then it’s little difficult to read another post.

Blogger allows you to add read more in the post if you want to add while writing post on blogger but it’s not automatically added if the content or post text increases so we have to add some type of automatically code to blogger template to looks professional and auto adding the read-more point.

Well this is very easy and better to add the code you just have to do little work on your blogger template editing box and it will be displayed auto, here are some steps that you have to do on your site or blog.

• Now just open your blogger dashboard
• Click on Template section of your blogger blog
• Click on Edit HTML like shown in the picture
• And finally you have to add some code in it.

• Now search for </head> code in html section of template
• And add this code above or before the head tag

                        <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>
                                                    

• Now find this code <data:post.body/>
• And replace it with this code

                        <b:if cond='data:blog.pageType == "item"'> <data:post.body/> <b:else/> <b:if cond='data:blog.pageType == "static_page"'> <data:post.body/> <b:else/> <div expr:id='"summary" + data:post.id'> <data:post.body/> </div> <script type='text/javascript'> createSummaryAndThumb("summary<data:post.id/>"); </script> <span class='jump-link' style='font-weight:bold;padding:5px;float:right;text-align:right;'><a expr:href='data:post.url'>Continue Reading...</a></span><div style='clear: both;'/> </b:if> </b:if>

(So when you replace the code please preview the template then go for next otherwise there are total of three codes in the whole template once you did this with once of them, try to replace with 2nd one and then preview, in every template its place is different.)

So at this time after adding the above code we have to add some css buttons to look professional, here are some css buttons you can also create your own if you want.

Now find this code ></b:skin> Aand place the this code above or before the tag.

                                                                                   Add This Code
                                               .jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #42aaff 0%, #003366); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); }  

            OR        


  .jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #42aaff 0%, #003366); background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366)); -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px; border: 1px solid #003366; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3); }

                                               
              OR        

   .jump-link { display: block; font-size: 12px; font-weight: bold; text-align:right; } .jump-link a { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #ffffff; padding: 6px 15px; background: -moz-linear-gradient( top, #eaeaea 0%, #000000); background: -webkit-gradient( linear, left top, left bottom, from(#eaeaea), to(#000000)); -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #a2a89f; -moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); -webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 2px rgba(255,255,255,1); text-shadow: 0px -1px 0px rgba(000,000,000,0.4), 0px 1px 0px rgba(255,255,255,0.3); }



So finally you have installed the read more for your blogger blog, you know the importance and some merits of this type of looks in blog; here I am going to show you.

You can also Generate your custom CSS Button

How May I Help You?

If you're still having problems with the CSS Button Generator code to display properly, let me know.  Comment below and I will be happy to assist you.

Cheers!