2012 December 24 Archive - EXEIdeas

Do you want to change your “Read more” button with any other text or image? If you want to change i have very easy and simple method to change it. Its look very professional when visitors see different style of read more buttons. Lets see how to change this button. I will guide you in each and every step.Change Read more button, Change text, Add images or animations. How to customize Blogger read more button. There are the topics we are going to learn on this post. If you don’t know about blogger Jump breaks, You can read How to add Jump Breaks to Blogger posts article. Blogger will add ” Read more >> ” Text as default Jump Break text. we can easily change this text and its attributes like font, size align using basic Html and Css codes.We also can link an image file for it. Have you seen animating read more buttons? It’s very easy to do. Just make animating button and save it as .Gif image. now you can link that image to your Jump break as we learn on this post.Features:1.) Change The Text “Read More” To Another Words.2.) Add An Image/Button To Your “Read More/Jump Breaks” In Blogger Links Instead Of Plain Text.3.) Choose Your Read More Link/Button To Be Displayed On Left Side, Right Side Or Center it.How To Add In Blogspot?1.) Go To Your www.blogger.com2.) Open Your Desire Blog.3.) Go To “Template”.4.) Click “Expand The Widget Template” .5.) Now Press “CTRL+F”Find The Below Code. 6.) Now Copy The Below Code And Replace It With The Above Code.7.) Click Save, Now You Are Done.Change With Text: Read More

Change With Image:

Customization:1.) You Can Change Your Picture By Changing Blue URL.2.) You Can Change Red Text With Your Desire One.3.) Change left With right Or center As You Wish To Display The Button On That Position.Some Gif, Png, And Animated Button Are Also Available Here. #Demo {padding: 5px;border: 1px solid #ff0000; -moz-border-radius:6px; -webkit-border-radius:6px; background:#F8F8F8; box-shadow: 3px 3px 3px #D44B2C; width:185px; } #Demo{margin-bottom:5px;} #Demo a{color:#D44B2C;background:#F8F8F8;padding:8px 14px;display:inline-block;font-size:12px;line-height:12px;text-decoration:none;text-transform:uppercase;-moz-border-radius:5px;-khtml-border-radius:5px;-webkit-border-radius:5px;border-radius:5px} #Demo a:hover{color:#fff;text-shadow:0px 1px 0px #000;background:#D44B2C;text-decoration:none} Get More Button Here