How To Add Read More Link with Post On Homepage?
Follow Following steps to do this.- Go to Design>Edit HTML and
- check the Expand widget templates box and search for the following code:
<data:post.body />
- Just after this line Paste the following code:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<data:post.jumpText/> </a> </div>
</b:if>
- If You want any Image at place of "Read More" text..than Use this Code:
<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'>
<div class='aiw-readmore'><image src="http://xyz.com"/></div> </a> </div>
</b:if>
- Replace http://xyz.com with your image url.
- Now search for: </b:skin>
- Immediately before this line, copy and paste following CSS.
background:#fff;
text-align:right;
cursor:pointer; color:#EB7F17; margin:5px 0; border-left:400px dashed #474747;
border-right:2px solid #474747; border-top:2px solid #474747; border-bottom:2px solid #474747; padding:2px; -moz-border-radius:6px; -webkit-border-radius:6px; font:bold 11px sans-serif; }
.aiw-readmore:hover{ background:#EB7F17; color:#fff; border-left:400px dashed #474747; border-right:2px solid #EB7F17; border-top:2px solid #EB7F17; border-bottom:2px solid #EB7F17; }
.aiw-readmore a { color:#fff; text-decoration:none; }
.aiw-readmore a:hover { color:#fff; text-decoration:none; }
- You have Done this Blogger trick. Enjoy....
No comments:
Post a Comment
Notice: Don't add "backlink". Text with Link will automatically Removed.