SUBSCRIBE TO GET FREE UPDATES
RSSRSSEmailEmail
       "Keep learning ~~ keep smiling ~~ keep sharing"     

Thursday, January 21, 2010

LinkWithin affects placement of Read More link!

The LinkWithin widget that is placed at the end of a blog post is such an asset! An easy widget to install, it will automatically generate thumbnails from your blog archive to link to related posts, to draw your visitors attention and keep them engaged.

The tutorial on how to install LinkWithin widget on your Blogger blog as shared in my previous post is perfect for normal standardized posts in full display, without the Read More text link

Screen shot showing the LinkWithin thumbnails above the Read More link as wrongly placedBut, if you're applying the 'Read More' feature for your posts in Blogger, then the LinkWithin widget will cause the Read More link that was created by the Jump Break to be shifted below it as seen in the left image. I find this inappropriate as the Read More link should be positioned just below the snippet instead.

Some bloggers even prefer that the LinkWithin thumbnails be shown under the post only after clicking the Read More link and not under the post summary in the home page. And, they have found a way to change that - learn at Blogger Buster on how-to remove them if you're in the same boat. I really don't mind as I find the thumbnails rather appealing, adding extra visibility and giving more options to readers!

My problem though, as indicated earlier was, the LinkWithin thumbnails should appear below the Jump Text and not above it. So, I decided to check from LinkWithin site itself and was delighted to have found a clue at LinkWithin FAQ page that included this Q&A below:
4. How can I customize the placement of the widget on my blog?
Modify your HTML template to add the code below at the place where you want the widget to appear:
<div class="linkwithin_div"></div>
Humph, that was all it showed...nothing more! What about how to apply that? Not helpful to a technically challenge person like me, huh!

Screen shot showing the LinkWithin thumbnails below the Read More link as correctly placedRegardless, I took up the challenge, put on my thinking cap and with whatever HTML knowledge that I've gained thus far, attempted to edit my blog's template following the suggestion above.
After much trial and error for about an hour, I finally succeeded in the almost impossible mission, praise God!
As desired, the 'Click here to contiune reading...' link and the LinkWithin photo thumbnails are correctly placed as seen in the left image.
Keep learning and keep smiling...that's my motto and it definitely had put a broad grin on my face when I've managed to solve the problem with determination.

Feeling very happy too, to be able to share here on
how to reposition the LinkWithin widget to be beneath the 'Read More' link.

Follow these steps :
  1. Go to Layout | Edit HTML  to edit your blog's template. Tick on Expand Widget Templates checkbox. (Remember to save a copy of your template before editing it)

  2. Press CTRL+F to find the word, jumptext and snippet of its HTML code as shaded grey in image below.

    Screen shot of Blogger's Edit Template - how to modify the placement of LinkWithin widget

  3. Then, copy and paste this code <div class='linkwithin_div'/> below the snippet of Jumptext as illustrated.

    Screen shot of Blogger's Edit Template - step 3 on how to reposition LinkWithin widget

  4. Click Save Template and you're done. Easy, right?
Hope this tutorial had put a smile on your face!
Keep learning and keep smiling! :-)

57 comments:

  1. Yes, I followed your tutorial and finally succeeded in changing the 'Continue reading this post', to appear above the Linkwithin widget. Thank you so much, you're a gem of a friend!

    ReplyDelete
  2. Thanks...such affirmative words are music to my ears, my friend! Delighted you're happy with the result! :-D

    ReplyDelete
  3. yey! thank you so much! I'm totally bookmarking your site for future needs since i'm such a novice to html. it worked perfectly!

    ReplyDelete
  4. You are a LIFESAVER! I've contacted Link Within twice and they failed to help me. Thanks!!

    ReplyDelete
  5. Katrina & Shirley:
    I'm absolutely thrilled that the tutorial worked fine for you both! Thanks for your kind feedback! Keeps me smiling to know that I've helped in a small way! :)

    ReplyDelete
  6. Hi Jacqueline...today I tried again...strange it is worst than before. The grey line ( text break ) is there on on my blogger html but when I publish post. It doesn't show. The whole post is on the mainpage. So I can do much coz I don't what happened in between that blocks the whole process. Will try again with a new post. Will let you know then. I appreciate your help :) You are so generous in sharing ur knowledge :))

    ReplyDelete
  7. thank you SO much! This had been driving me crazy and I had no clue how to fix it. What an easy to follow tutorial you've created! Thanks again :)

    ReplyDelete
  8. My pleasure, Marie...I'm delighted you've found the solution here. Thanks for the thumbs up, appreciate your feedback very much!

    ReplyDelete
  9. Man, thanks for this! I've been trying not to use the jump link because of that reason. At least now I'm not flooding my homepage with a mile long blog post. Thanks again!

    ReplyDelete
  10. You're most welcome, Gene! I know how frustrating the problem can be, unresolved. Thanks for taking the trouble to show your appreciation.

    ReplyDelete
  11. Jacqui, i congratulate you for helping many bloggers. I already have a LinkWithin which i just tried and it worked. YOur other tutorials, i am sure are very helpful, but i still cannot take risk in the previous instructions for making the collage as that one with your dogs and butterflies. Maybe because i know i don't really know how to follow computer lingo so i just have the habit of not trying. However, many of my additions in my blog, like the simple highlited link, i just imitated you and Autumn Belle, who in the same way is so patient with me. Haha. Thank you very much.

    ReplyDelete
  12. Thanks for the tut! I was so excited to first, find out that I could have a 'read more' option (after switching to the new editor) and was frustrated that my LW came before it ... all better now, lol. Thanks again!

    ReplyDelete
  13. Andrea - My pleasure. Keep learning, keep smiling, my friend.

    Madame & Esined - You're both most welcome. Great to know that the tutorial helped!

    ReplyDelete
  14. thank you so much, it worked out well!

    ReplyDelete
  15. You're most welcome, Sam.
    Thanks for your feedback, appreciate it!

    ReplyDelete
  16. Thank you so much! It was sooo annoying! :D

    ReplyDelete
  17. Thank you SO much for this! I used it to get linkwithin to post below my signature instead of above it. Worked like a charm!

    ReplyDelete
  18. My pleasure...delighted to know you're happy with the result, Rhyah!

    ReplyDelete
  19. thanks for the tips, very helpful!

    ReplyDelete
  20. Thank you very much. I have been looking for a solution on this problem for a long time.

    ReplyDelete
  21. My pleasure, Vispop! Great to know your problem has been solved!

    ReplyDelete
  22. Thanks for the tutorial...works a treat to get one's signature in the right place too.

    Definitely smiling!

    ReplyDelete
  23. You're most welcome, Jane! Great to know all's well for you! You have a lovely siggy, an image, right?
    Thanks for feedback...I'm smiling too! :)

    ReplyDelete
  24. Thanks a lot .....
    applied your trick and it worked....
    however I have one more prob.
    using 'tell a friend share button'
    now it is coming about the 'Read more'...
    let me know how to fix this...

    Thanks and Regards,
    Manish
    http://manishagarwalhyd.blogspot.com

    ReplyDelete
  25. I can't see 'Read more' in any of your posts, Manish? Thus, I don't know what's your problem!

    ReplyDelete
  26. Thanks for reply...
    check out post with title "US Banks Failed in 2010 (Part 2)" (http://manishagarwalhyd.blogspot.com/search?updated-max=2010-12-16T05:41:00-06:00&max-results=20)

    Thanks for you help...
    Manish
    http://manishagarwalhyd.blogspot.com

    ReplyDelete
  27. Viewing your blog's page source, Manish, I noticed that you've placed your script code for 'socialtwist' above the 'jump-link'. To rectify your problem, you have to go to Edit Template (check Expand Widget Templates), locate the socialtwist script code you've added earlier and reposition it to be either just above <div class='linkwithin_div'> or directly below <div class='post-footer'> as you wish. Please preview your editing and save only if you're satisfied with its outcome.
    Best to Download Full Template before any editing is done. Personally, I will normally also copy a snippet of the existing html around the related text that I'll be editing, just in case I want to revert to it should I change my mind after saving changes - just to be doubly careful as I'm not all that tech-savvy too and am still learning like you.
    Hope this helps!

    ReplyDelete
  28. Hello Jacq,
    Now it is working find. Thanks in tons for your each efforts...
    one more question:
    How to bring 'Read more' in Right hand side?

    Thanks and Regards,
    Manish

    ReplyDelete
  29. You're welcome, Manish...good to know all's well!
    Sorry, I'm unable to help this time around...I've tried using whatever knowledge I've acquired thus far but it just didn't work. Font-size can be increased and bold but I just can't get to align text to the right! Please google elsewhere.

    ReplyDelete
  30. Thanks...
    BTW, i got the following link thru google http://www.google.com/support/forum/p/blogger/thread?tid=528584df454a87b9&hl=en

    But have not tried it..let me know your view about it or you may get some clue and come up with some better option...

    Manish

    ReplyDelete
  31. Check out my latest tutorial on how to customize the Read More link @ http://jacqsbloggertips.blogspot.com/2011/01/customize-and-style-read-more-link-in.html
    Specially done for you in mind, Manish! :)

    Happy New Year 2011 to you and your loved ones!

    ReplyDelete
  32. Hello,

    I have done everything you mentioned above but it still didn't work.

    Mind helping me out?

    ReplyDelete
  33. Nevermind. Found Blogger Buster's tutorial.

    Anyways, thank you! :)

    http://bit.ly/bvXRJt

    ReplyDelete
  34. Good to know all's well for you now, Ernest!

    ReplyDelete
  35. Thank you so much!!! This was so helpful! x

    ReplyDelete
  36. My pleasure, Christina, Delighted to know you've found it helpful.

    ReplyDelete
  37. Im having a problem with my Linkwithin plugin on my Blog TechnuHub. it doesnt show anything although i had followed all the instructions on how to install it as linkwithin instructed.

    Hope you could help.. tnx =)

    ReplyDelete
  38. Sorry, I'm unable to help you, techypub. I'd suggest that you refer your problem direct to the LinkWithin team who'd be best able to help you.

    ReplyDelete
  39. Perfect!!! It works!
    Thank u so much!

    ReplyDelete
  40. You're most welcome, Lulu! Thanks for your appreciation.

    ReplyDelete
  41. Thank you so much Jacqueline :) I was about to give up! You are great...

    ReplyDelete
  42. Great to know you've found it helpful, SMYRNA! Thanks for feedback.

    ReplyDelete
  43. Thank you so much!! This did the trick! :)

    sam

    ReplyDelete
    Replies
    1. I'm happy you've found it helpful, Sam!

      Delete
  44. Just as I was about to lose my mind, you saved the day! Thank you so much for this info.

    ReplyDelete
    Replies
    1. You're most welcome Simay. I'm glad you're happy now.

      Delete
  45. I'm afraid my problem is that I want to place it under my signature (it appears above it) but no matter how much I try editing I can't make it..Any ideas??

    ReplyDelete
    Replies
    1. Hi Katia Audrey,
      Aren't you able to relocate your Signature codes to be above the LinkWithin codes at Template>Edit Html to solve your problem? That's the only suggestion I can think of.

      Delete
  46. Thanks sooomuch!!! I hated that the LinkWithin thumbnails was under the post summary. I've been looking for a way to fix it and thanks to you I have!!! Now the LinkWithin thumbnails are under the post only after clicking the Read More link and not under the post summary in the home page. I hated that... Thanks again :)

    ReplyDelete
    Replies
    1. You're most welcome, Sofia T. Great to know you're delighted with the final results. Happy blogging! ;)

      Delete
  47. Wohoooo... you are a live saver :) Million thanks for this guide ... :)

    ReplyDelete

Welcome! Kindly leave your comments which are very much appreciated with a thankful heart.

Custom Search