Link Download: How To Add Related Posts Widget To Blogger

Thursday, April 27, 2017

How To Add Related Posts Widget To Blogger

Blogger is a great platform to make free blogs and it is the product of Google. You can also make money with Google AdSense in this platform without paying anything. You Just have to make a good blog and then you can apply for Google AdSense. Every blogger want to make a beautiful blog with good design but blogger provides only simple templates. We can add some widgets which can make our blog professional. So here we come with a beautiful widget than will show related posts just below the posts.

Steps to Add Related Posts Widget In Blogger

Step-1. Go to Blogger Dashboard > Template. ( See below image )

Step-2. Click on Edit HTML. Now press CTRL+F and search for </head>. Now copy the below code and paste just above the </head> tag.

<if cond=data:blog.pageType == "item"><style type=text/css>#related-posts{float:left;width:auto;} #related-posts a{border-right: 1px dotted #eaeaea;} #related-posts a:hover{background: #EEEEEE;} #related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;} #related-posts .related_img {margin:5px;border:2px solid #f2f2f2;width:110px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;-webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } #related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;} #related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style><script type=text/javascript src=http://newtechnologyhub.blogspot.com /></if>

Note: You can change width and height of thumbnail by just changing these values in the code width:110px;height:100px. ( change 110 and 100 according to your requirement ).

Step-3. Now search for this tag <div class=post-footer> and paste the below just above this tag

Note: You can change the value in thew code max-results=5 with the number posts you want to display. ( if you want to 6 posts in the widget, then change it to 6 ).

Now press Save Template. Now this widget will shown below every post with posts having same label as of your post.

Available link for download