I have just added the "read more" function using a linked image to my blog! Yay! I have been meaning to do this last night, unfortunately by 11p.m. I was already too sleepy so I just decided to do it during my lunch break. Here's what I did based from what I have searched on the internet:
- Insert the jump break in one of the blog posts so that I can check later on if I have installed the codes correctly.
- Go to Layout/Edit HTML in the Blogger dashboard and make sure that the "Expand widget templates" box is checked.
- Using "Ctrl F", locate this line of code:
- Immediately after the code cited above, add the following lines of codes:
Now, the "Read More" function is working! But instead of just pain text, I wanted to replace the "Read More" text with an image, so here's the trick for the linked image:
- Select an image that you think will look good with your template
- If you feel that you need to edit the chosen image, you can use Picasa
- Upload the image to Photobucket or any other site offering image hosting so we can get the image's direct link
- To replace plain text with linked image, we have to use image tags and the codes above will look something like this:
Note that the "url_of_image" is the url of the image hosted by Photobucket or other image provider of your choice.
4 comments:
if i have time i will go back here and follow your tutorial :)
Hey sis, thanks for sharing! You may also refer here so that your visitors can just copy and paste the code instead of typing what you have on the screenshot: http://www.wordyliz.com/2009/12/html-codes-to-show-html-codes.html
how about if I don't want to use the "read more", how can I remove it for the template which already have?
thanks!
@ Liz: thanks for sharing this link sis! I really had a hard time placing the codes in my post so I just decided to use screen shots. :)
@ Josie: I am really not an expert with codes...I just do it with trial and error. hehehe... have tried locating the jumplink codes? just try deleting those codes
Post a Comment