Make Your Own Read More Link/Button With Any Style As You Want - Blogger Tutorial

Sure it's not something new to publish such a post. Many bloggers have already published such a post that may be greater some have added something "extra, or say it strange / unique trick" to generate unusual read more buttons by using scripts, css, or just whatever the terms.

Here, i'll try to share a junk trick (junk trick=common trick. Isn't it?) to display read more link or even read more button below each post on your blogger blog. The tricks that i'm about to share are realy simple, what you'll have to make is only a little move. "Yet, it doesn't mean that you don't have to pay attention on the following explanation - Let's move everybody:

A. Creating A Read More Link With Any Title As You Want

By the way, did you know? Read more link is a link that appears below each posts in the main page blog - To show a normal read more link below each posts is just easy, all you have to do is just to insert the below code right after the last word that you want to show on your main page:

Here is an example how to make it:

Here, i'll try to share a junk trick (junk trick=common trick. Isn't it?) to display read more link or even read more button below each post on blogger blog.< ! - - more - - > The tricks that i'm about to share are realy simple, what you'll have to make is only a little move. Yet, it doesn't mean that you don't have to pay attention on the following explanation - Let's move everybody.

The red write is assumed to be shown on the main page, while the blue write will be hidden and is to be loaded / shown after the visitor click the read more link.

The above trick will generate a normal read more link titled "Read more". To change the title be like what you want you need to go to your "Blogger Design Page" and then go to your "Post Column" editor. By detail you'll find it here: Your Dasboard> Design> Below your "Post Element", find a thread titled "Edit" and click it. Therein you'll find some options in connection to your main page arrangement, including an option to change the title shown as your read more link.

B. Show Your Read More Link As A Button

Don't say you don't know about this cuz i'll all just ignore it - "To create such a read more link you'll have to add a script into your template, Or in another term, you have to modify your template. But you don't realy have to modify it, i mean: you have to add only a short line of script into your template, that's it!

1. Login to your blogger.
2. Go to design.
3. Edit html.
4. Tick the expand widget template to load the entire code in your template.
5. Download or copy your entire html code for back up so if you make any unexpected thing you could still set your template back to your old design.
6. Find the below code inside your template: < b :if co nd = 'data:post.hasJumpLink' >
< d i v cla ss = 'jump-link' >
< a expr:href='data:post.url + "#more"' expr:title='data:post.title' >< data:post.jumpText / >< / a >

< / d i v >


7. Replace the above code with the below:

To be the lesser arrangement the above code looks like the below:

< b : i f c o n d = 'data:post.hasJumpLink' >
< d i v c l a s s ='jump-link' >
< a expr:href='data:post.url + "#more"' expr:title='data:post.title' > < img border='0' src='http://jsmit h11325.3mx.biz/Image/Scr000012-001.jpg' / > < / a >
< / d i v >


Just replace the url of my image http: //jsmit h11 325.3mx. biz/Imag e/Scr00 0012-0 01.jpg with your own url. Unless you realy want my read more button to show on your blog as your read more button, as such you may and are permitted to just copypass it.

8. Save your change and you are done.

* Now check if you have already had a read more button on your blog.

*what you should note is that "don't change or even greater you remove any code beyond what i have instructed.

Feel free to contact me if you confront any trouble. I'm not an expert in html code or much more in css and so on. just, to me it's something chalenging to try to fix it that you ask my help. You know where you can ask me..

0 comments:

Post a Comment