{"id":420,"date":"2010-05-23T09:58:36","date_gmt":"2010-05-23T16:58:36","guid":{"rendered":"https:\/\/bloggeruser.com\/?p=420"},"modified":"2015-03-04T02:24:04","modified_gmt":"2015-03-04T02:24:04","slug":"related-posts-widget-with-thumbnails-for-blogger","status":"publish","type":"post","link":"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/","title":{"rendered":"Related Posts Widget with thumbnails for Blogger"},"content":{"rendered":"

Are you looking to increase page views of your blog? This should be a must have widget<\/strong> for your blogger blog. Related Posts with thumbnails is not just one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template. It helps your readers to go through the similar posts they were reading and so helps to decrease your bounce rate by increasing page views. Wow! Both design and better functionality at same time.<\/p>\n

In this post we will go through the steps of adding the Related Posts Widget with thumbnails for Blogger. Ready to add to your template? Go through the steps below.<\/p>\n

Adding Related Posts widget for Blogger with Thumbnails<\/h2>\n

1. Go the Blogger Dashboard and Navigate to the Layout button of your template.<\/strong><\/p>\n

2. Go to the Edit Html of your Blogger Template.<\/strong><\/p>\n

4. Now look for <\/strong><\/p>\n

  <\/head> <\/pre>\n
 and ABOVE the code; copy the following code. <\/strong><\/p>\n
\r\n<!--Related Posts with thumbnails Scripts and Styles Start-->\r\n<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>\r\n<style type="text\/css">\r\n#related-posts {\r\nfloat:center;\r\ntext-transform:none;\r\nheight:100%;\r\nmin-height:100%;\r\npadding-top:5px;\r\npadding-left:5px;\r\n}\r\n\r\n#related-posts h2{\r\nfont-size: 1.6em;\r\nfont-weight: bold;\r\ncolor: black;\r\nfont-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;\r\nmargin-bottom: 0.75em;\r\nmargin-top: 0em;\r\npadding-top: 0em;\r\n}\r\n#related-posts a{\r\ncolor:black;\r\n}\r\n#related-posts a:hover{\r\ncolor:black;\r\n}\r\n\r\n#related-posts  a:hover {\r\nbackground-color:#d4eaf2;\r\n}\r\n<\/style>\r\n<script type='text\/javascript'>\r\nvar defaultnoimage="http:\/\/1.bp.blogspot.com\/_u4gySN2ZgqE\/SosvnavWq0I\/AAAAAAAAArk\/yL95WlyTqr0\/s400\/noimage.png";\r\nvar maxresults=5;\r\nvar splittercolor="#d4eaf2";\r\nvar relatedpoststitle="Related Posts";\r\n<\/script>\r\n<script src='http:\/\/blogergadgets.googlecode.com\/files\/related-posts-with-thumbnails-for-blogger-pro.js' type='text\/javascript'\/>\r\n<!-- remove --><\/b:if>\r\n<!--Related Posts with thumbnails Scripts and Styles End-->\r\n\r\n<\/pre>\n
5. Now find the below Code in your template. Remember easy way to locate codes if by using the Find option (ctrl+F) and copy pasting the code.<\/strong><\/p>\n
\r\n<div class='post-footer-line post-footer-line-1'>\r\n<\/pre>\n
or<\/p>\n
\r\n<p class='post-footer-line post-footer-line-1'>\r\n<\/pre>\n
6. After you have located those codes, copy the following code and add it <\/strong>AFTER the code.<\/strong><\/p>\n
\r\n\r\n<!-- Related Posts with Thumbnails Code Start-->\r\n<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>\r\n<div id='related-posts'>\r\n<b:loop values='data:post.labels' var='label'>\r\n<b:if cond='data:label.isLast != &quot;true&quot;'>\r\n<\/b:if>\r\n<script expr:src='&quot;\/feeds\/posts\/default\/-\/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=6&quot;' type='text\/javascript'\/><\/b:loop>\r\n<script type='text\/javascript'>\r\nremoveRelatedDuplicates_thumbs();\r\nprintRelatedLabels_thumbs(&quot;<data:post.url\/>&quot;);\r\n<\/script>\r\n<\/div><div style='clear:both'\/>\r\n<!-- remove --><\/b:if>\r\n<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>\r\n<a href='http:\/\/www.bloggerplugins.org\/2009\/08\/related-posts-thumbnails-blogger-widget.html'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http:\/\/image.bloggerplugins.org\/blogger-widgets.png" \/><\/a><a href='http:\/\/www.bloggerplugins.org\/' ><img style="border: 0" alt="Blogger Widgets" src="http:\/\/image.bloggerplugins.org\/blogger-widgets.png" \/><\/a>\r\n<\/b:if><\/b:if>\r\n<!-- Related Posts with Thumbnails Code End-->\r\n<\/pre>\n
Widget Configuration<\/h3>\n
To change the widget’s default configuration, you need to edit the following lines for respective settings.
\n1. To change the total no of posts displayed in your blog posts, Edit the following line of code.<\/p>\n
\r\nvar maxresults=5;\r\n<\/pre>\n
2. To Edit the title of the widget, change the following line of code.<\/p>\n
\r\nvar relatedpoststitle="Related Posts";\r\n<\/pre>\n
3. To edit the default thumbnail (the image which is displayed when no image is there in your post), edit the following line of code.<\/p>\n
\r\nvar defaultnoimage="http:\/\/1.bp.blogspot.com\/_u4gySN2ZgqE\/SosvnavWq0I\/AAAAAAAAArk\/yL95WlyTqr0\/s400\/noimage.png";\r\n<\/pre>\n
4.To Change the Colour of the Splitter Line , edit the following code.<\/p>\n
\r\nvar splittercolor="#d4eaf2";\r\n<\/pre>\n
You can make additional changes according to your need. This plugin was developed by Aneesh from Blogger plugins<\/a>. Thanks to\u00a0him for developing a really useful widget.
\nAre you using this widget or did you run into any problems with the widget ? Let us know in the comments below.<\/p>\n","protected":false},"excerpt":{"rendered":"
Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with Thumbnails for bloggerRelated Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template.<\/p>\n","protected":false},"author":1,"featured_media":608,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[12],"tags":[120,128],"yoast_head":"\nRelated Posts Widget with thumbnails for Blogger – Blogger User<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Related Posts Widget with thumbnails for Blogger – Blogger User\" \/>\n<meta property=\"og:description\" content=\"Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with Thumbnails for bloggerRelated Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/\" \/>\n<meta property=\"og:site_name\" content=\"Blogger User\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/pradeepdotco\" \/>\n<meta property=\"article:published_time\" content=\"2010-05-23T16:58:36+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-03-04T02:24:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/bloggeruser.com\/wp-content\/uploads\/Related-Posts-Widget-for-Blogger.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"559\" \/>\n\t<meta property=\"og:image:height\" content=\"198\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Pradeep Singh\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pradeep Singh\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/\",\"url\":\"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/\",\"name\":\"Related Posts Widget with thumbnails for Blogger – Blogger User\",\"isPartOf\":{\"@id\":\"https:\/\/bloggeruser.com\/#website\"},\"datePublished\":\"2010-05-23T16:58:36+00:00\",\"dateModified\":\"2015-03-04T02:24:04+00:00\",\"author\":{\"@id\":\"https:\/\/bloggeruser.com\/#\/schema\/person\/b45820c3363c7b86dc2036f8f025312a\"},\"breadcrumb\":{\"@id\":\"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/bloggeruser.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Related Posts Widget with thumbnails for Blogger\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/bloggeruser.com\/#website\",\"url\":\"https:\/\/bloggeruser.com\/\",\"name\":\"Blogger User\",\"description\":\"Blogger Users Guide | Blogger\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/bloggeruser.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/bloggeruser.com\/#\/schema\/person\/b45820c3363c7b86dc2036f8f025312a\",\"name\":\"Pradeep Singh\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/bloggeruser.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c59dd00a1bedff40b66fcdb4d4908ca2?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c59dd00a1bedff40b66fcdb4d4908ca2?s=96&r=g\",\"caption\":\"Pradeep Singh\"},\"description\":\"Pradeep is your host at BloggerUser helping you to build your blog by providing Blogger tips, tutorials, guides, free blogger templates and more.\",\"sameAs\":[\"https:\/\/Pradeep.co\",\"https:\/\/www.facebook.com\/pradeepdotco\",\"https:\/\/twitter.com\/pradeepdotco\"],\"url\":\"https:\/\/bloggeruser.com\/author\/bloggeruser\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Related Posts Widget with thumbnails for Blogger – Blogger User","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/","og_locale":"en_US","og_type":"article","og_title":"Related Posts Widget with thumbnails for Blogger – Blogger User","og_description":"Are you looking to increase page views of your blog? This should be a must have widget for your blogger blog. Related Posts with Thumbnails for bloggerRelated Posts with thumbnails is not just a one more related posts widget. This widget really looks good with the content and thus adds something worth to the overall design of your template.","og_url":"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/","og_site_name":"Blogger User","article_author":"https:\/\/www.facebook.com\/pradeepdotco","article_published_time":"2010-05-23T16:58:36+00:00","article_modified_time":"2015-03-04T02:24:04+00:00","og_image":[{"width":559,"height":198,"url":"https:\/\/bloggeruser.com\/wp-content\/uploads\/Related-Posts-Widget-for-Blogger.jpg","type":"image\/jpeg"}],"author":"Pradeep Singh","twitter_misc":{"Written by":"Pradeep Singh","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/","url":"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/","name":"Related Posts Widget with thumbnails for Blogger – Blogger User","isPartOf":{"@id":"https:\/\/bloggeruser.com\/#website"},"datePublished":"2010-05-23T16:58:36+00:00","dateModified":"2015-03-04T02:24:04+00:00","author":{"@id":"https:\/\/bloggeruser.com\/#\/schema\/person\/b45820c3363c7b86dc2036f8f025312a"},"breadcrumb":{"@id":"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/bloggeruser.com\/related-posts-widget-with-thumbnails-for-blogger\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/bloggeruser.com\/"},{"@type":"ListItem","position":2,"name":"Related Posts Widget with thumbnails for Blogger"}]},{"@type":"WebSite","@id":"https:\/\/bloggeruser.com\/#website","url":"https:\/\/bloggeruser.com\/","name":"Blogger User","description":"Blogger Users Guide | Blogger","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/bloggeruser.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/bloggeruser.com\/#\/schema\/person\/b45820c3363c7b86dc2036f8f025312a","name":"Pradeep Singh","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/bloggeruser.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c59dd00a1bedff40b66fcdb4d4908ca2?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c59dd00a1bedff40b66fcdb4d4908ca2?s=96&r=g","caption":"Pradeep Singh"},"description":"Pradeep is your host at BloggerUser helping you to build your blog by providing Blogger tips, tutorials, guides, free blogger templates and more.","sameAs":["https:\/\/Pradeep.co","https:\/\/www.facebook.com\/pradeepdotco","https:\/\/twitter.com\/pradeepdotco"],"url":"https:\/\/bloggeruser.com\/author\/bloggeruser\/"}]}},"_links":{"self":[{"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/posts\/420"}],"collection":[{"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/comments?post=420"}],"version-history":[{"count":0,"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/posts\/420\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/media\/608"}],"wp:attachment":[{"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/media?parent=420"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/categories?post=420"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bloggeruser.com\/wp-json\/wp\/v2\/tags?post=420"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}