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

But, 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!

Regardless, 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.
   
   
   
   
3. Then, copy and paste this code <div class='linkwithin_div'/> below the snippet of Jumptext as illustrated.
   
   
   
   
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! :-)