Add Custome CSS Style Read More Button For Blogger
How To Add CSS Style Custom Read More Button For Blogger
Today i,m going to teach you the adding of a custom CSS read more button for blogger don't worry it is very easy you know that some of your blog posts are very big and if you show total this post on homepage it bring bad impression to your visitors therefore blog allows us to adds a jump link button so that our post become short on homepage but it look a bad link on your page but don't worry today i,m share the whole method of adding a custom CSS style read more button for blogger and with this tutorial you can make your blog professional
 |
| CSS style read more button |
2) Now find this code <head>
3) Copy the codes given below and paste these codes just before it <head>
<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>
4) Now find this code <data:post.body/>
5) Replace this code <data:post.body/> with given below 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>
6) Now find this code </b:skin>
7) Copy the codes given below and paste these codes just before it </b:skin>
.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); }
8) Finally click on save and your setting have been ready for use
This post was written by: Author Name
Author description goes here. Author description goes here. Follow him on Twitter
Subscribe to:
Post Comments (Atom)
0 Responses to “Add Custome CSS Style Read More Button For Blogger”
Post a Comment