How to Show Related Post Widget on Blogger Sidebar

Nilesh    8/16/2020    widget   

For a tutorial on how to move the Related Posts widget that usually appears under articles / posts to appear in the blogspot sidebar, the basic concept is actually almost the same as the tutorial I shared some time ago. Namely, about how to install responsive related posts whose style can be changed through the Blogger layout , which is to configure several important options directly from the Blogger Layout menu. It's just that there are a few more pieces of code that need to be parsed (broken down). Well, before stepping into the tutorial, it would be nice to first listen to the various features that you will get if you install this widget. 

Features:

• There are 6 types of styles (display models) in one widget.
• You can choose 1 of the 6 styles directly from the Blogger Layout.
• Can determine how many posts you want to display on the widget via Layout / Layout Blogger.
• You can also specify the number of summaries (post snippets), directly setting it in the Layout menu.
• You can move the gadget from the Related Posts widget anywhere at will via the Blogger Layout.

This is how the Related Posts widget will appear in the blog sidebar.

How to display the Related Post widget on the Blogger Sidebar

Attention!

• Before going to the tutorial, make sure you have backed up the template first.
• Also, make sure you have gotten rid of all the code (CSS and JavaScript) from the previous Related Post widget, so that there will be no duplicate code.

Step 1
Go to Themes> Edit HTML

Step 2
Put the following code above the code </main>or above<aside id='sidebar-wrapper'>

<div class = 'related-posts-widget' id = 'related-posts-widget'>
  <div class = 'note2' />
  <b: section class = 'relatedPost' id = 'related-post-set-sidebar' maxwidgets = '1' name = 'Related Post Setting' preferred = 'yes' showaddelement = 'no'>
    <b: widget id = 'HTML790' locked = 'true' title = 'Related Post' type = 'HTML' version = '1'>
      <b: widget-settings>
        <b: widget-setting name = 'content'> numPosts: 6,
widgetStyle: 1,
summaryLength: 100, </ b: widget-setting>
      </ b: widget-settings >
      <b: includable id = 'main'>
  <! - only display title if it 's non-empty ->
  <b: if cond = 'data: title! = & quot; & quot;'>
  </ b: if>
  <div class = 'widget-content'>
  <script type = 'text / javascript'>
var relatedPostConfig = {homePage: & quot; <data: blog.homepageUrl /> & quot;, widgetTitle: & quot; <h4> <data: title /> </h4> & quot;, titleLength : & quot; auto & quot;, ThumbnailSize: 322, noImage: & quot; Data: image / png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U / gAAAADElEQVQImWOor68HAAL + AX7vOF2TAAAAAElFTkSuQmCC & quot;, containerId: & quot; related-post & quot;, newTabLink: false, moreText: & quot; Read More & quot ;, <data: content /> callBack: function () {}}
  </script>
  </div>
</ b: includable>
    </ b: widget>
  </ b: section>
    </div>

Step 3
Look for the code <div class='post-footer'>or <data:post.body/>(for posts), then put the following code below:

<div class = 'related-wrapper' id = 'related-wrapper'>
<script type = 'text / javascript'>
var labelArray = [<b: if cond = 'data: post.labels'> <b: loop values = 'data: post.labels' var = 'label'> & quot; <data: label.name /> & quot; <b: if cond = 'data: label.isLast! = & quot; true & quot;'>, </ b : if> </ b: loop> </ b: if>];
  </script>
  </div>

Step 4
It's time to add CSS to improve each style of the Related Post widget. To do this, find the code </style>then place the following code above it:

/ * CSS Related Post for Sidebar * /
# related-wrapper {margin: 20px auto 0; padding: 0; display: block; width: 100%; max-width: 300px; overflow: hidden;}
.related-post {font -family: & # 39; Poppins & # 39 ;, sans-serif; margin: 0 auto; padding: 0; text-align: center}
.related-post h4 {margin: 5px 0 15px 0; font-size: 15px; line-height: 1.2em; padding: 0 15px; position: relative; color: # 292828; font-weight: 700; text-align: center; text-transform: uppercase; background-color: #fff; display: inline- block}
.related-post h4: before {display: block; width: 500px; height: 0; border-bottom: 1px solid #ddd; position: absolute; right: 100%; left: auto; top: 50%; content : & quot; & quot ;;}
.related-post h4: after (display: block; width: 500px; height: 0; border-bottom: 1px solid #ddd; position: absolute; left: 100%; right: auto; top: 50%; content: & quot ; & quot ;;}
.related-post .related-post-style-1, .related-post .related-post-style-2, .related-post .related-post-style-3, .related-post .related -post-style-4, .related-post-style-5 {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; display: -webkit -box; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
.related-post .related-post-item- summary, .related-post-style-3 span, .related-post-style-4 span {font-size: 83%; color: # 656565; text-align: left! important; margin: 0 auto; padding: 0 }
/ * Related Post Style 6 * /
.related-post-style-6 .related-post-item-tooltip {display: block; width: 100%}
.related-post-style-6 li .related-post-item-summary {display: none}
.related -post-style-6 li (list-style: none; margin: 0 auto 10px; padding: 0 0 10px; border-bottom: 1px solid #eee; display: block; width: 100%; position: relative; overflow: hidden}
.related-post-style-6 a.related-post-item-title {display: block; text-align: left; font-weight: 400; overflow: hidden; line-height: 1.3em; font-size : 100%! Important; color: # 111; margin: 0 auto 7px; text-align: left;}
.related-post-style-6 a: hover {text-decoration: underline}
.related-post-style-6 .related-post-item-thumbnail (display: flex; align-items: center; justify-content: center; width: 70px; height: 70px; padding: 0; margin: 0 15px 0 0; overflow: hidden; float: left}
.related-post-style-6 .related-post-item-thumbnail img {width: auto; height: 100%; display: flex; align-items: center;}
.related-post-style-6 li: first- child .related-post-item-thumbnail {width: 100%; height: 175px; float: none; margin: 0 auto 10px}
.related-post-style-6 li: first-child .related-post-item-thumbnail img {width: 100%; height: auto;}
.related-post-style-6 li: first-child .related-post-item-summary {display: inline-block}
.related-post-style-6 li: last-child {border: none}
/ * Related Post Style 5 * /
.related-post-style-5 {margin: 0 auto; counter-reset: count;}
.related-post-style-5 li {list-style : none; margin: 0 auto 10px; height: 100px; display: block; width: 100%; position: relative; border-radius: 5px; overflow: hidden}
.related-post-style-5 .related-post-item-thumbnail {display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0; margin: 0 auto; overflow: hidden}
.related-post-style-5 li img {width: 100%; height: auto; position: relative;}
.related-post-style-5 a {display: block; font-weight: 700 ; overflow: hidden; line-height: 1.3em; font-size: 100%! important; color: #fff; margin: 0 auto}.
related-post-style-5 a: hover {text-decoration: underline}
. related-post-style-5 li a span {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; height: 100px; width: 100%; position: absolute; z-index: 10; bottom: -100px; display: block; background: rgba (0,0,0, .4); transition: all .2s ease-in-out; padding: 5px 5px 5px 35px ; display: flex; flex-direction: column; justify-content: center;}
.related-post-style-5 li: hover a span {bottom: 0}
.related-post-style-5 li: before {color: #fff; counter-increment: count; content: counter (count); position: absolute; left: 0px; text-align: center; top: 0; font: bold 80px / 1 Sans-Serif; z-index: 51; transition: all .4s; height: 100px; min-width: 30px; font- size: 18px; line-height: 100px; background: rgba (26,27,30, .7); font-weight: 800; text-align: center; padding: 0; opacity: 0.7;}
/ * Related Post Style 4 * /
.related-post-style-4 {margin: 0 auto; padding: 0}
.related-post-style-4 ul li, .related-post-style-4 ul, .related-post-style-4 li {list-style: none; outline: 0; border: 0; margin: 0 0; padding: 0}
.related-post-style-4 li {list-style: none; margin: 0 auto; display: block; width: 100%; overflow: hidden}
.related-post-style-4 .related-post-item-thumbnail {display: flex; align-items: center; justify-content: center; width: 100%; height: auto; max-height: 180px; padding: 0; margin: 0 auto; overflow: hidden;}
.related-post-style-4 li img {width: 100%; height: auto;}
.related-post-style-4 a.related-post-item-title {display: block; text-align: center; font-weight: 700; overflow: hidden; line-height: 1.3em; font-size: 100%! important; color: # 111; margin: 0 auto 7px}
.related -post-style-4 a: hover.related-post-item-title {text-decoration: underline}
.related-post-style-4 span {display: table-cell;}
.related-post-style-4. related-post-item-tooltip {margin: -25px 15px 10px; padding: 10px; display: block; position: relative; background-color: #fff; overflow: hidden}
.related-post-style-4 span {text-align: center; display: inline}
/ * Related Post Style 3 * /
.related-post-style-3 {margin: 0 auto}
.related-post-style-3 li {list-style: none; margin: 0 auto; display: block; width: 100%}
.related-post-style-3 .related-post-item-thumbnail {display: flex; align-items: center; justify -content: center; width: 100%; height: auto; max-height: 180px; padding: 0; margin: 10px auto 0; overflow: hidden;}
.related-post-style-3 li img {width: 100% ; height: auto;}
.related-post-style-3 a.related-post-item-title {display: block; text-align: left; font-weight: 700; overflow: hidden; line-height: 1.3em ; font-size: 100%! important; color: # 111; margin: 10px auto 5px}
.related-post-style-3 a: hover.related-post-item-title {text-decoration: underline}
.related-post-style-3 span {display: table-cell;} // this is summary
/ * Related Post Style 2 * /
.related-post-style-2 {margin: 0 auto! important;}
.related- post-style-2 li {list-style: none; margin: 0 auto 10px; padding: 10px 0 0; display: block; width: 100%; border-top: 1px solid #eee}
.related-post-style- 2 li: first-child {border-top: none}
.related-post-style-2 .related-post-item-thumbnail {display: flex; align-items: center; justify-content: center; margin: 0 auto ; width: 125px; height: 80px; max-width: none; max-height: none; padding: 0; overflow: hidden; display: inline-block; float: left}
.related-post-style-2 .related- post-item-thumbnail img {width: 100%; height: 100%}
.related-post-style-2 a.related-post-item-title (line-height: 1.3em; display: block; text-align: left; font-size: 100%! important; color: # 2d2d2d; margin : 0 0 5px; font-weight: 700}
.related-post-style-2 a: hover.related-post-item-title {text-decoration: underline}
.related-post-style-2 a.related-post -item-more {display: none}
.related-post-style-2 .related-post-item-text {display: inline-block; text-align: left; width: calc (100% - 140px); float: right;}
/ * Related Post Style 1 * /
.related-post-style-1 {margin: 0 auto; counter-reset: count;}
  .related-post-style-1 li {font-size: 95%! important ; list-style: none; background-color: # f5f5f5; border-bottom: 1px solid #fff; display: block; position: relative; margin: 0 auto; padding: 13px 10px 13px 50px; text-align: left}
.related-post-style-1 li a {color: # 2d2d2d; font-weight: 400; line-height: 1.3em; text-align: left; display: block}
.related-post-style-1 li a: hover {text-decoration: underline}
.related-post-style-1 li: before {color: #fff; counter-increment: count; content: counter (count); position: absolute; left: 0px; text-align: center; top: 0; font-size: 70px; z-index: 51; transition: all .4s; min-width: 40px; font-size: 18px; background: rgba (0,0,0, .5); vertical-align: center; height: 100%; font-weight: 700; text-align: center; padding: 0; display: flex; flex-direction: column; justify-content: center; height: 100%;}

Step 5
Another important step that must be taken is to improve the layout of the Related Post widget, so that it is easy to make edits.

To do this, look for the code ]]></b:template-skin>or ]]></b:skin>then place the following code above the code earlier:

body # layout # related-posts-widget-side: before, body # layout .note2: before, body # layout .note2: after {
color: # 8a6d3b; background-color: # fcf8e3; border-color: #faebcc; display : block; margin: 0 5px 5px; padding: 5px 10px; box-sizing: border-box; font-size: 14px; font-weight: normal; border-radius: 3px; text-align: left! important}
body # layout # related-posts-widget-side: before {content: 'Number for numPosts code is "1 - whatever"';}
body # layout .note2: before {content: 'The number for widgetStyle code is "1, 2, 3 , 4, 5, or 6 "';}
body # layout .note2: after {content:' Number for summaryLength code is" 0 - whatever ". ';}
Body # layout # related-posts-widget-side .section> h4 {margin-left: 0! important}
#layout # related-post-set-sidebar {background: # 189169! important; border: none! important}

Note:
It is recommended to put the code in step 5 inside ]]></b:template-skin>. If there is no code in your template, please follow the method in the article How to Color a Blogger Layout or Layout .

Step 6
Save the following JavaScript above the code </body>or&lt;!--</body>--&gt;&lt;/body&gt;

<script type = 'text / javascript'>
// <! [CDATA [
if (p === 0) {return false} while (- p) {c = Math.floor (Math.random () * (p + 1)); b = a [p]; a [p] = a [c]; a [c] = b} return a}, e = (typeof labelArray == "object" && labelArray.length> 0)? "/ - /" + l (labelArray) [0]: "", h = function (b) (var c = b.feed.openSearch $ totalResults. $ td.numPosts, a = o (1, (c> 0? c: 1)); j (d.homePage.replace (/ \ /? \? m = \ d + (\ & | $) | \ / + $ /, "") + "/ feeds / posts / summary" + e + "? alt = json-in-script & orderby = updated & start-index =" + a + "& max-results =" + d.numPosts + "& callback = showRelatedPost")}, g = function (z) {var s = document.getElementById (d.containerId), x = l (z.feed.entry), A = d.widgetStyle, c = d.widgetTitle + '<ul class = "related-post-style -' + A + '">', b = d.newTabLink? ' target = "_ blank" ': "", y =' <span class = "bg_overlay"> <
//]]>
</script>

Step 7
Save Theme

Step 8
Please go to the Layout menu on your Blogger dashboard, then click Add a Gadget on the sidebar, then select HTML / JavaScript .

Then fill in the following code:

<div class = 'related-post' id = 'related-post' />

And save.

Step 8
To configure the appearance of the widget, please access and click edit the gadget titled Related Post Settings in your Blogger layout.

The configuration notes are included in the widget, the conditions are as follows:

• The number for the code numPostsis "1 - whatever"
• The number for the code widgetStyleis "1, 2, 3, 4, 5, or 6"
• The number for the code summaryLengthis "0 - whatever"

Closing note:
The best performance of this widget is in the post page section only. If forced to still want to be displayed on the homepage , the widget function is no longer a related post, but becomes a random post widget.

Thus, I hope it is successful and useful. Thank you!