How To Add Related Posts Widget To Blogger with Thumbnails alphause

Po ... How To Add Related Posts Widget To Blogger with Thumbnails 248 comments Now here is a wonderful hack for displaying related posts beneath each of your blog posts, along with thumbnails. The related articles are chosen from other posts in that same category/label/tag. With this hack many of your readers will remain on your site for longer periods of time when they see related posts of interest. Steps adding the Related Posts Widget to Blogger/Blogspot Step 1.Go To Blogger Dashboard>>Template>>Edit HTML Step 2.Click anywhere inside the template's code and press the CTRL + F keys Step 3.Search for this piece of code by typing it inside the search box: Step 4.Copy and paste the below code just before/above

Note: - change the5value frommax-results=5with the number of posts you want to be displayed - if you want the related posts to be displayed on homepage too, then remove the linesin violet Step 7.Save the Template Enjoy :) Like 50 Random Posts How To Add Related Posts Widget To Blogger with Thumbnails28/03/2012 - 248 Comments Add Keyboard Keys Effect To Your Text in Blogger with CSS23/10/2013 - 1 Comments How To Add A Tabbed Navigation Widget to Blogger29/04/2013 - 14 Comments Related Posts: How to Create Magazine Style with P... How to Create a Sitemap or Table of... Recent Rotating Post Gadget with Ex... 4 Different Styles For the Popular ... Share blog posts in social medias u... 248 comments: kawsar 4/03/2012 thanks very much worked 100% Reply Alianne Russell 4/10/2012 for the "class='post-footer-line post-footer-line-1'>" line, I have two of those in my code. how do i know which one to put it under? Reply Replies Admin 4/11/2012 Hello there, Sorry i forgot to mention there are two of them. Add it after the first line. Take care Nazmul Ahasan 6/19/2013 after or before? The 4/17/2012 Thankss .. i add it to my blog themoviesfreak.blogspot. com Reply mash 4/17/2012 friend how did you remove the blogger mark 'B' which shown at the tabs of the browsers? Reply Replies Admin 4/18/2012 Hello mash, I've added a new tutorial. Read about it here: How to change Blogger's default favicon dishan 4/24/2012 Any One can help me this is my blog http://imgbook.blogspot.c om i have use these codes.it's workin frist two months. but after few months it auto not working. i don't know what is the broblem. now i am using linkwihing.linkwithing is not good. please help me Reply Leslie Frances 4/24/2012 Thank you so much! My blog is looking good now, I had tried some other code, and it just wasn't working. http://simplybetterhom emaking.blogspot.com Reply Mark Alonzo 4/27/2012 thanks for this... it works for my blog now. http://xxxmehide.blogsp ot.com/ But one thing to ask how to add thumbnails when i never putted a picture to a post? any random pic in array? Reply Mark Alonzo 4/27/2012 also when i change the max-results=6. Only 5 related post thumbnail display what happened? i recheck everything.. Reply Replies Admin 4/27/2012 I've updated my post: change the "6" value frommax-results=6from step 6 and the one from step 4 too (if you haven't done this already) To change the "no image" picture, replace the url address in blue with the address of your own hosted picture. I hope it helps ADMIN 4/28/2012 Hi admin. can i ask? how to put it on the main page. cause i only see the related post when i open the post. but cant see it on main page. please answer me thank you! Reply Replies Admin 4/29/2012 Hi, Remove the fragments of code in violet from the step 6. Thanks for visiting! Don Norberto Gapusan 5/06/2012 Its bad but it doesnt work on my blogs. Reply Jade 5/20/2012 Worked perfectly. Thanks a lot!!! :) Reply Replies Admin 5/20/2012 I'm glad it worked :) Thanks for visiting sugarplum 5/26/2012 Hi - thanks for the post. This works, but I had to tweak it slightly to display it on homepage. The violet coloured codes need to be removed from in Step 4 and Step 6 too. I think your instruction isn't clear on that point. But thanks again. Reply Replies Admin 5/26/2012 Yeah, you're right! Now i'm going to update my post. Thanks for telling me XD Christa Aaron 5/31/2012 Hi, I can't find either of the last codes you mentioned in my blogger blog. www.allgrownup2011. blogspot.com any suggestions?? Reply Replies Admin 5/31/2012 Hi, add the code from step 6 below/after I hope this works. Moh Faiz 6/02/2012 I can't find either two codes on step 6 or code in my blogger html. Please help me. Reply Replies Admin 6/02/2012 Then search for this one:and paste the code after it. Hope it helps Juliette Gold 7/12/2012 I couldn't find either of them... Are there any other options? Ateeb Malik 8/09/2012 expand your widgets first......... Tara 1/15/2013 Mine was NOT working until I expanded my widgets. Thanks Ateeb & Admin!! Looking great now. beautyan dthebibliophile.blogspot.c om Acid admin 6/04/2012 Thanks a lot, works perftcly....! but it is showing in very small size, i want to increase its size, how can i do that ? hope u will help..! Reply Replies Admin 6/04/2012 Search in your template for this address: http://helplogger.googlec ode.com/svn/trunk /related-posts- with-thumbnails- for-blogger.js REPLACE it with this one: http://helplogger.googlec ode.com/svn/trunk /related-posts-with-big- thumbnails.js Hope it works. Thanks for visiting :) S Briggs 8/23/2012 Nice.. Tip.. I like the Big thumbnails better.. Is there any chance i could also increase the amount of Text displayed under the thumbnail? Some related posts topics makes no sense when its half. The Spouse 6/10/2012 I can't find step three with the / in my html. will it still work if I put it below the same word without the slash? Reply Replies Admin 6/11/2012 It will work but it is recommended to put it before the head closing tag. Better add it afterinstead. The Spouse 6/12/2012 Thank you so much for getting back to me so quickly! I really appreciate it! I found the code and then pasted yours. But now none of the step 5 codes are in my html. weird? is there anything i can do? Admin 6/12/2012 Make sure you have checked the 'Expand Widget Templates' checkbox then press Ctrl+F and enter one of the codes from step 5 in the Find box at the bottom or top of your browser. The codes can be found only when you check that box. Also make sure to backup your old template just in case you make a mistake. I hope this helps. And thanks for visiting :) Muhammad Waheed Iqbal 6/14/2012 Well done..its good. I have been searching for that..my blog is.. http://mag222.blogspot. com Reply V (BookBorne) 6/17/2012 None of the three lines of code in step five appear in my template. Suggestions? Reply Replies V (BookBorne) 6/17/2012 Nevermind, I figured it out :) sanjib 6/20/2012 it didnt work for me Reply Mohammed Abdur Rouf (Momen) 6/24/2012 thank you very much Reply Birgit Kerr 6/24/2012 Not working for me either. Maybe it's conflicting with some other widget/script? Reply Shakhawat Shahed 6/25/2012 Nice post. I have added this in my blog. But, I need a help. Is there any way to change the font for 'Related Posts' title? http://istash.blogspot.co m Reply threesugars-aj 6/30/2012 :( Blogger is giving me an Error code! Can't save the template. Reply Nathalia 7/03/2012 hey! how can I change the Thumbnails's dimensions? they are to small and also the images appear distorted! :( Reply Mushrraf Ali 7/06/2012 thanks Reply satheeshkumar 7/07/2012 thank u so much. Reply Stanesha Rivers 7/09/2012 It didn't work for me but this websites link in in the first post on my blog and won't go away :( Reply Tess Delaune 7/10/2012 Is there a way to adjust the width of the padding either side of each thumbnail? I would like to try and create more space in-between each of the posts didplayed. Reply Kukliki 7/11/2012 Thanks a lot for explanation! Made it yesterday - works fine. But I have another type of an issue. My blog: http://kuklikicom.blogsp ot.be/ It is bi-lingual. TO make life easy to the readers I preceede the text with a small icon with the corresponding flag. And the related posts widget picks up often this flag instead of nice pictures in the post. How to bypass this? Thanks a lot for any advices. Kukliki Reply Replies Kukliki 7/13/2012 Solved it using div with hidden image :) Start knowing CSS :) Cheers Kukliki Pacco 7/14/2012 hi, first of all, i must express my thanks to you for sharing this great tips. it works for my blog, but i'm facing a minor problem here. I removed the violet code to have the related post appeared on my homepage too, however when I click on the post, the related post doesn't appear. why is it so? hope you can help me out. because i does not wish to remove all the codes and search for another code from another author to try it out all over again. thanks Reply The Coffee Breaker 7/14/2012 I really want this to work, but I followed all of the instructions exactly and nothing on my blog has changed. What's going on?? Reply Anonymous 7/16/2012 guddd!! Reply Akshay 7/17/2012 not workinggg 4r me :(((( Reply Marissa Pink 7/20/2012 Hey my blog is http://marissapink.blogs pot.com/ I tried this but it didn't work for me =( Reply Admin 7/28/2012 Many apologies for my long missing, i've been a little busy in the last time! Thanks everybody for the feedback! @ Atlas: make sure you don't have 2 similar codes like the one from step 4 @ Blogging Sentral: Just add the code from step 6 after:

@ Birgit Kerr: Try adding the codes again and pay attention at the code from step 6, it should be pasted after

@ Shakhawat Shahed: yes, you could easily change it by increasing/decreasing the bolded value from: #related-posts h2{ font-size:1.6em; @ threesugars-aj: Click on Edit HTML and don't save the changes, then try adding the codes again. @ Nathalia: please see the 27.a comment @ Tess Delaune: add the bolded lines to#related-posts a{: #related-posts a{ color:black; margin-left: 5px; margin-right: 5px } ... and increase the 5 value for wider space @ Pacco - I tested on my blog and it shows both on homepage and post pages. Maybe adding it again would solve the issue. Reply Replies M. G. Rabbi 5/22/2013 Thanks for your valuable post http://itunerbd.blogspot.c om/ listyo 7/30/2012 It looks great in my blog buddy,thank you very much for share this useful tips article! Nice to read your entire articles, http://www.advantoday .com/ Reply Veselé Borůvky 8/03/2012 Thank you, thank you, thank you! :) Reply Anonymous 8/10/2012 Works like a charm. Thank you. Reply සිව්පෙතියා | Suren එන්. Semage 8/11/2012 very useful tutorial. thank you very much. Reply julie duran 8/19/2012 tried to use it on my blog http://www.iplaygala xyy.blogspot.com but the prob is how to add transparency to it? and images don't show up Reply Replies Admin 8/24/2012 Change thebackground-color:#d4eaf2;from the code from step 4 tobackground-color: transparent;. LEONARDO JIMENES 8/27/2012 Its work for me. Thank you. www.weteca.com Reply olantino 8/28/2012 NICE POST Reply shikhil sharma 9/12/2012 nice work..thanku Reply Danielle 9/17/2012 what if we can't find the "post-footer-line post-footer-line-1" (all 3 options)? Reply Replies Admin 9/23/2012 Add it above