This time it is the turn of the Related Post widget, which can be set or customized from the Blogger Layout menu. By implementing this tutorial, template users are presented with at least 3 optional styles of the Related Posts widget which can be navigated directly on the Blogspot Layout menu. Overall, the features that can be customized from the Related Posts widget on the Layout menu are as follows:
- There are 3 choices of widget display styles or models.
- Can set the number of posts that you want to display on the widget.
- Can set the number of characters that you want to appear on the summary (post snippet), especially style 2.
- It's responsive.
- Can change the title / title of the widget.
- There is a special navigation for each device, desktop / tablet and mobile.
- The image or thumbnail of the Related Posts widget is not stretched.
An example of a widget display on the Layout menu is as shown below:
Style 1
Style 2
Style 3
How to install the Related Posts widget that can be customized directly from the Layout menu or Blogger Layout
Step 1
Go to Theme> Edit HTML
Step 2
Place the following code above the code
</main><div class = 'related-posts-widget' id = 'related-posts-widget'>
<div class = 'notex' />
<b: section class = 'relatedPost' id = 'related-post-set-desktop' maxwidgets = '1' name = 'Related Post Setting (Desktop & amp; Tablet)' preferred = 'yes' showaddelement = 'no'>
<b: widget id = 'HTML745' locked = 'true' title = 'Related Post' type = 'HTML' version = '1'>
<b: widget-settings>
<b: widget-setting name = 'content'> numPosts: 6,
widgetStyle: 3,
summaryLength: 101, </ 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 mql = window.matchMedia (& # 39; screen and (min-width: 479px) & # 39;); if (mql.matches) {
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>
<b: section class = 'relatedPost' id = 'related-post-set-mobile' maxwidgets = '1' mobile = 'yes' name = 'Related Post Setting (Mobile)' preferred = 'yes' showaddelement = 'no' >
<b: widget id = 'HTML746' locked = 'true' title = 'Related Post' type = 'HTML' version = '1'>
<b: widget-settings>
<b: widget-setting name = 'content' > numPosts: 5,
widgetStyle: 1,
summaryLength: 60, </ 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 mql = window.matchMedia (& # 39; screen and (max-width: 480px) & # 39;); if (mql.matches) (
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>
Attention:
Actually the code can be placed anywhere, as long as it is not in Blog1 or
Actually the code can be placed anywhere, as long as it is not in Blog1 or
b:sectionand is still in code <body>. You can also put it on top of code <aside id='sidebar-wrapper’>or something similar.Step 3
Find the code
<data:post.body/>(specifically for posts) or code <div class='post-footer'>then place the following code below the code earlier:<b: if cond = 'data: blog.pageType == & quot; item & quot;'>
<div class = 'related-wrapper' id = 'related-wrapper'>
<div class = 'related-post' id = 'related -post '/>
<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>
</ b: if>
Step 4
Replace your previous Related Post JavaScript widget with the following code:
<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 (/ \ /$/,"")+"/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"> </span> ', v, t, w, r,
//]]>
</script>
Step 5
It's time to improve the appearance of each Related Posts widget style, find the code
</style>then place the following CSS above the code earlier:/ * CSS Related Post * /
# related-wrapper {margin: 20px auto 0; padding: 0; display: block; 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 {-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 {font-size: 83%; color: # 656565; line-height : 1.4em; display: inline-block; text-align: left}
/ * Related Post Style 3 * /
.related-post-style-3 {margin: 0 0 0 -1%!
Important ;} .related-post- style-3 li {list-style: none; margin-left: 1%! important; padding: 0; width: calc (33.3333% - 1%); float: left;}
.related-post-style-3 .related-post-item-thumbnail (display: flex; align-items: center; justify-content: center; width: 100%; height: 125px; padding: 0; margin: 0 auto 8px; 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; overflow: hidden; line-height: 1.3em; font-size: 100%! important; color: # 111; margin: 0 auto 15px}
.related-post-style-3 a: hover.related -post-item-title {text-decoration: underline}
.related-post-style-3 span {display: none! important; height: 0; width: 0; overflow: hidden} // 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: 107%! important; color: # 2d2d2d; margin: 0 0 7px; 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 li a {line-height: 1.3em; display: block; position: relative; font-size: 100%! important; color: # 2d2d2d; margin: 0 0 7px; padding: 0 0 0 28px; font-weight: 400}
.related-post-style-1 li a: before {content: & # 39; & # 39 ;; width: 7px; height: 7px; border-radius: 100%; background-color: # 08AADB; display: inline-block; position: absolute; top: 6px; left: 7px}
.related- post-style-1 li a: hover {text-decoration: underline}
/ * Related Posts Responsive * /
@media screen and (max-width: 600px) {
.related-post-style-3 .related-post-item-thumbnail {height: 110px;}
}
@media screen and (max-width: 480px) {
.related-post-style-2 a.related-post-item -title {line-height: 1.2em; font-size: 100%! important; margin: 0 0 5px;}
.related-post-style-3 .related-post-item-thumbnail {height: 75px;}
.related -post-style-3 a.related-post-item-title {line-height: 1.2em; font-size: 95%! important; margin: 0 auto 9px}
.related-post .related-post-item-summary , .related-post-style-3 span {font-size: 79%;}
}
@media screen and (max-width: 320px) {
.related-post-style-1 li a {line-height: 1.2em; }
.related-post-style-3 {margin: 0 auto! important;}
.related-post-style-3 li {margin: 0 auto 20px! important; padding: 0; width: 100%; float: none;}
.related-post-style-3 li img {display: flex; align-items: center;}
.related-post-style-3 .related-post-item-thumbnail {height: auto; margin: 0 auto 8px;}
.related-post-style-3 a.related-post-item-title {line-height: 1.3em; font-size: 100%! important}
}
Step 6
It's time to beautify the appearance of the Layout for the Related Post widget by giving a colorful touch. To do this, find the following code:
<b: template-skin>
<! [CDATA [
Then place the following code under the code earlier:
body # layout # related-posts-widget {visibility: visible! important; display: block! important; padding: 15px 9px 5px; background-color: # 673e7d; box-sizing: border-box;}
body # layout # related- posts-widget: before, body # layout .notex: before, body # layout .notex: 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: before {content: 'Number for numPosts code is "1 - whatever"';}
body # layout .notex: before {content: 'Number for widgetStyle code is "1, 2, or 3"';}
body # layout .notex : after {content: 'The number for the summaryLength code is "0 - whatever ". (Style 2 only) ';}
body # layout # related-posts-widget .section> h4 {margin-left: 0! important}
#layout # related-post-set-desktop {background: # 5ebf79! important; border: none! important}
#layout #related -post-set-mobile {background: # 5ebf79! important; border: none! important}
Attention:
If there is no code in your template
If there is no code in your template
<b:template-skin>, you can put the CSS above the code ]]></b:skin>. It's just that the Related Posts display in the layout is colorless.Follow the tutorial on How to Colorize a Blogger Layout or Layout if you are interested in coloring any section or widget of your template in Layout.
Step 7
Save the Theme
Step 8
Please access the Layout menu, scroll down, then edit the respective Related Post Settings widgets there (desktop and mobile), with the following notes:
- For code
numPostscontent with number 1 - whatever. - For code
widgetStylecontents 1, 2 or 3. - For code
summaryLengthcontents of 0 - whatever.
Note!
- This is a modified DTE:] Related Posts widget , which has slightly configurable JavaScript. So make sure you go through Step 4.
- If you try to implement this widget but don't follow the entire set tutorial above correctly, the installation will definitely fail.
Actually the Related Posts widget can still be added to other styles, which can be up to 6 styles. Probably will be updated at another time. Thus, hopefully this is useful!