Customizing Read More/ Jump Buttons With Images And Other Words, Positioning Them In Different Sides

Dear friends welcome to another session of discussion. Well friends don’t you feel that although we have already learned  things regarding integration of various plug-in buttons in our blog , But still I feel that some subject is lagging and little modification in that will enhance the relevance of our blog, yes you guessed right or you can say I understood your point. I know you are definitely thinking for modifications in Read more/ jump breaks buttons into your blog. So now let us start our tutorial which focuses on Customizing Blogger Read More Links With image Buttons,


After the end of tutorials you will be able to change the Read More in these ways :


  •  Either you change “read more” with some other influential word
  • Install a picture in place of read more/ jump breaks , in links rather than text
  • Or place your read more/ jump buttons either on left side, right side or center of your blog

Mandatory Action: Before you perform any of the above mentioned actions you need to back up your blog. 

1. The first step of this operation is to integrate the following code in template of your blog;

               <b:if cond='data:post.hasJumpLink'>
               <div class='jump-link'>
        <a expr:href='data:post.url + "#more"'>Read More </a>
               </div>
       </b:if >


Now let us learn where this code should be placed, however before integrating this in your template it is necessary to confirm that you have not already inserted this in your blogger template.

Now go to dashboard and go to Layout widget and move Edit HTML option and click on expand widget template. You can search for the above mentioned code on your search engine browser.  But if the code is already present in your template than you need to skip the step, but before skipping it just make sure that the third line of the above code appears like this;



<a expr:href='data:post.url + "#more"'>Read More </a>


And not like this;



<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>


If it appears like this then you should replace it as mentioned above . But if any how it is not in your template than you have to add it. Now let us see how to add this code in your template. For this go to dashboard of blogger and move Layout option and select Edit HTML option in that and click on Expand Widget Templates and search for code mentioned below  on your Internet search engine browser.



<data:post.body/>
 


Just below it place the following code;



<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More </a>
</div>
</b:if >
 


Now as operation of integrating code is complete there is need to learn how to customize it.

Let us now start next phase of our operation:


1. Changing words of “read more” to other words: 


This is considered as the simplest way to make your blog catchier. For this you are required to integrate following code in your template.



<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >

The above code displays text “read more” like this: Read More. And to change this you just need to change the Read More option with any other suitable word which you feel suits better to your Read More option. This may be either continue reading, keep reading, proceed further for more reading etc. After that save the template and notice the changes.

2. Integration of an image/or button rather than the plain content: 


There is one more way to make your read more option more attractive.  So after finishing the first step you should have the following code in your template;



<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
 


The above code will appear like Read More, and to change it to image/button option you should replace it with Read More in the code as follows:



<img border="0" src="Paste here the button image URL"/>
 

Once you have finished with the above code it will appear like this:



<img border="0" src="http://www.ribbun.com/images/crk.jpg"/>

Now by just clicking on save button your exercise of integrating an image/button to your Read More is finished.

3. Positioning Read More/ Button option to any side of your blog:  


For this let us revert to first step and add code mentioned below in your template;



<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'>Read More</a>
</div>
</b:if >
 

As an impact of this code Read More option will be in default format, and it may be displayed either to any side of your blog i.e, right or left. But if you want to place it according to your choice than you should make additional changes in your code. These changes are displayed in blue color for your convenience.


<b:if cond='data:post.hasJumpLink'><div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="xxxx">Read More</p></a></div></b:if >


xxxx is the place where you can write the position where you want to place your option left, right or center. This will facilitate you to adjust placement of your Read More button according to your choice. For a better understanding go through the given examples:

Illustration 1




<b:if cond='data:post.hasJumpLink'>

<div class='jump-link'>

<a expr:href='data:post.url + "#more"'><p align="Left">Read More</p></a>

</div>

</b:if >
 

This will place your read more button to left.

Illustration 2:

This will position your read more option to right side of your blog.



<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><p align="Right"><img border="0"
 src="http://www.ribbun.com/images/crk.jpg"/></p></a>
</div>
</b:if >
 


I am sure this simple tutorial will help you inn clarifying all  your doubts and enable you to place your Read more option according to your choice. If you  have any  doubts please  feel free to ping me.


No comments:

Post a Comment

Man Behind Ribbun Software

vikas Singal Vikas Singal is a professional Internet marketer from Jaipur, India.

Apart from Blogging , he is a fun loving person. His areas of Interest are php, wordpress and joomla.

At Ribbun-Software he Writes about Blogging, Wordpress, Technology, Making Money online.

You can read more about him at About me page.

@ribbuntweeting

My Tweeter Updates

    Follow me @ribbuntweeting

    Also Check