Adding A Related Posts Widget To Blogger With Thumbnail

Here is one more tip to show related post widget for blogger, It is very important to add the gadget because it will increase the visitors...

Here is one more tip to show related post widget for blogger, It is very important to add the gadget because it will increase the visitors on your site without spending to much time on seo, if you go to the depth then you will easily find that related post widget or gadget comes at the main source of SEO level. So if you really interested to and want to display the related posts in which the posts are open you just have to edit some steps that i tell you here,

There are also many other related post widget over there but this one is also contain the thumbnail so you can also see the thumbnail if the post has image added. (See Category Widget Blogger)

So here is what you have to do, it is very simple

  • Go to blogger dashboard
  • Click on the Template section of the blogger that you want to add widget
  • Now a new page appear and click on Edit HTML Button
  • And next you have to find the code
  • (See RSS Feed Widget blogger)




    • [message]
      • Find this code in template </head>  After this paste this code above it

    [<b:if cond='data:blog.pageType == "item"'><style type='text/css'>#related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; }  #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style><script type='text/javascript'>var defaultnoimage="http://3.bp.blogspot.com/-PpjfsStySz0/UF91FE7rxfI/AAAAAAAACl8/092MmUHSFQ0/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script><script src='http://helplogger.googlecode.com/svn/trunk/related-posts-with-big-thumbnails.js' type='text/javascript'/><!-- remove --></b:if>]


    • [message]
      • Now find this code in template <div class='post-footer'> After this
      • Paste this code above of <div class='post-footer'> code
    [<b:if cond='data:blog.pageType == "item"'><div id='related-posts'>
    <b:loop values='data:post.labels' var='label'><b:if cond='data:label.isLast != "true"'></b:if><script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop><script type='text/javascript'>removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script></div>
    <div style='clear:both'/>
    <!-- remove --></b:if><b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'><a href='http://mbgadget.blogspot.com/2013/08/blogger-related-post.html' rel="nofollow"><img alt='Blogger related post widget' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a></b:if></b:if>]


       Now you are done and your gadget is installed successfully.

      You have to refresh your blog to see the changes, and i am fully concentrate the code and its works, i also tried it on many other blogs before adding it here.  Edited code from helplogger



      • [message]
        • 2nd method


      Find the following code in your Blogger template code

      <b:includable id='post' var='post'>


      For this tag, after a couple of lines below, there will be a closing. It might be really further down depending upon your template.
      </b:includable>

      Right before </b:includable> add the following lines of code

      [<b:if cond='data:blog.pageType == "item"'>
      <br style='clear:both;'/>
      <!--Related Posts Start-->
      <style type='text/css'>
      #related-posts h4{margin:5px 0 0;font-weight:bold;line-height:1.2em;font-size:16px;}
      #related-posts ul,#related-posts li{overflow:hidden;padding:0;margin:0;list-style:none}
      #related-posts ul{margin-top:10px}
      #related-posts li{float:left;width:48%;padding:5px}
      #related-posts .relimg{float:left;margin:0 5px 5px 0;padding:3px;border:1px solid silver}
      #related-posts p{margin:5px 0 0}
      #relloading{width:100%;min-height:150px;background:transparent url(http://1.bp.blogspot.com/-VIzmxDnV8_Y/UqH6yMEeZDI/AAAAAAAABvU/c4NmWKUB_aw/s320/loading.gif) no-repeat center;display:block;text-indent:-9999px}
      </style>
       <script type='text/javascript' src='https://googledrive.com/host/0B9VnchIrte6hOUtZNXpXTm90TE0' ></script>
      <div id='related-posts'/>

      <script type='text/javascript'>
      //<![CDATA[
      relatedposts({
      rel_title: "You May Like",
      rel_posts: 4,
      rel_thumb: 70
      });
      //]]>
      </script>
      <!--Related Posts End-->
      </b:if>
      ]


      • [message]
        • Edits:

      rel_title: Title of your "Related Posts" widget.
      rel_posts: Number of related posts to display at maximum.
      rel_thum: Thumbnail dimension in pixels. 


      • [message]
        • Why use this widget:


      You know there are many options that why we use this gadget to blogger blog. Actually if you are going to build the most page views of your blog then you have to add this gadget and ofcourse it will create much much positive response to your traffic and your page views increase many times more then normal. See how to blogger related posts

      If a reader reads the whole article then he/she is also interested to read your other articles so it is not just a gadget it also increase the website performance.

      If there is any problem by installing the widget just ask in comments and i will solve it for you free, please feel free to as it.
      Name

      adsense,2,Amazing,27,Animals,3,app,1,Arts,2,Backlinks,3,Beautiful,12,blogger edits,12,blogger templates,8,blogger widgets,27,facebook,1,Flowers,1,funny photos,1,Games,3,History,3,how to,16,Instagram,1,installing blogger template,1,Linkbuilding,3,Movies,2,news,36,professional blogger template,1,seo,4,Sexy,8,Solution,3,Space,2,the tops,11,tips,3,Top,18,Wallpapers,6,Website traffic,2,Websites,5,
      ltr
      item
      Mbgadget: Adding A Related Posts Widget To Blogger With Thumbnail
      Adding A Related Posts Widget To Blogger With Thumbnail
      https://2.bp.blogspot.com/-tW_3LARUHEw/UhzE-mOXaAI/AAAAAAAAA50/Z1B0A3n6vvk/s1600/related.png
      https://2.bp.blogspot.com/-tW_3LARUHEw/UhzE-mOXaAI/AAAAAAAAA50/Z1B0A3n6vvk/s72-c/related.png
      Mbgadget
      http://www.mbgadget.com/2013/08/blogger-related-posts.html
      http://www.mbgadget.com/
      http://www.mbgadget.com/
      http://www.mbgadget.com/2013/08/blogger-related-posts.html
      true
      170121184091600790
      UTF-8
      Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy