Add Widget Related Post Responsive 3 Style [ Update 2020]

How To Install Responsive Related Posts whose Style Can Be Changed Through Blogger Layout / Layout

This time it is the turn of the Related Post widget that can be set or customization from the Blogger Layout / Layout menu. By applying In this tutorial, there are at least 3 template users optional style Related Posts widget that can be navigated directly to Blogspot Layout menu.

How To Install Responsive Related Posts whose Style Can Be Changed Through Blogger Layout / Layout

Overall, there are features that can be customized from the widget Related Posts in the Layout menu are as follows:

√ There are 3 choices in widget styles or display models.

√ Can set the number of posts you want displayed on the widget.

√ Can set the number of characters you want to display on the summary

(post snippet), specifically style 2.

√ Already responsive.

√ Can change the title / widget title.

√ There is a special navigation for each device,desktop / tablet and mobile.

√ Related Posts widget thumbnails or images are not stretched.

Example of widget display on the Layout / Layout menu as shown following:

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's not in in Blog1 or | b: section | and still in the <body> code. You can also place it above the <sidebar-wrapper ’> or who looks like him

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:

<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 JavaScript Related Post widget with the following code:

<script type='text/javascript'>
    //<![CDATA[
    var randomRelatedIndex,showRelatedPost;(function(n,m,k){var
    d={widgetTitle:"<h4>Related
    Posts:</h4>",widgetStyle:1,homePage:"http://www.dte.web.id",numPosts:7,summaryLength:125,titleLength:"auto",thumbnailSize:200,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,moreText:"Baca
    Selengkapnya",callBack:function(){}};for(var f in
    relatedPostConfig){d[f]=(relatedPostConfig[f]=="undefined")?d[f]:relatedPostConfig[f]}var
    j=function(a){var
    b=m.createElement("script");b.type="text/javascript";b.src=a;k.appendChild(b)},o=function(b,a){return
    Math.floor(Math.random()*(a-b+1))+b},l=function(a){var
    p=a.length,c,b;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.$t-d.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,u;if(!s){return}for(var
    q=0;q<d.numPosts;q++){if(q==x.length){break}t=x[q].title.$t;w=(d.titleLength!=="auto"&&d.titleLength<t.length)?t.substring(0,d.titleLength)+"&hellip;":t;r=("media$thumbnail"in
    x[q]&&d.thumbnailSize!==false)?x[q].media$thumbnail.url.replace(/.*?:\/\//g
    , "//").replace(/\/s[0-9]+(\-c)?/,
    "/s"+d.thumbnailSize):d.noImage;u=("summary"in
    x[q]&&d.summaryLength>0)?x[q].summary.$t.replace(/<br ?\/?>/g,"
    ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.summaryLength)+"&hellip;":"";for(var
    p=0,a=x[q].link.length;p<a;p++){v=(x[q].link[p].rel=="alternate")?x[q].link[p].href:"#"}if(A==2){c+='<li><div
    class="related-post-item-thumbnail"><img alt="" src="'+r+'"
    width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><div
    class="related-post-item-text"><a class="related-post-item-title"
    title="'+t+'" href="'+v+'"'+b+">"+w+'</a><span
    class="related-post-item-summary"><span
    class="related-post-item-summary-text">'+u+'</span> <a href="'+v+'"
    class="related-post-item-more"'+b+">"+d.moreText+"</a></span></div>"+y+"</li>"}else{if(A==3||A==4){c+='<li
    class="related-post-item" tabindex="0"><a
    class="related-post-item-title-thumb" href="'+v+'"'+b+'><div
    class="related-post-item-thumbnail"><img alt="" src="'+r+'"
    width="'+d.thumbnailSize+'"
    height="'+d.thumbnailSize+'"></a></div><div
    class="related-post-item-tooltip"><a class="related-post-item-title"
    title="'+t+'"
    href="'+v+'"'+b+">"+w+"</a><span>"+u+"</span></div>"+y+"</li>"}else{if(A==5){c+='<li
    class="related-post-item" tabindex="0"><a
    class="related-post-item-wrapper" href="'+v+'"
    title="'+t+'"'+b+'><div class="related-post-item-thumbnail"><img
    alt="" src="'+r+'" width="'+d.thumbnailSize+'"
    height="'+d.thumbnailSize+'"><span
    class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><div
    class="related-post-item-tooltip"><div
    class="related-post-item-thumbnail"><img alt="" src="'+r+'"
    width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"></div><a
    class="related-post-item-title" title="'+t+'"
    href="'+v+'"'+b+">"+w+'</a><span
    class="related-post-item-summary"><span
    class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a
    title="'+t+'"
    href="'+v+'"'+b+">"+w+"</a></li>"}}}}}s.innerHTML=c+="</ul>"+y;d.callBack()};randomRelatedIndex=h;showRelatedPost=g;j(d.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+e+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")})(window,document,document.getElementsByTagName("head")[0]);
    //]]>
    </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:

/* 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 Layout look for the Related Post widget by giving it a colorful touch. To do this, find the following code:

<b:template-skin>
    <![CDATA[

Then place the following code below the code:

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: 'Angka untuk kode
    numPosts adalah "1 - terserah"';}
    body#layout .notex:before{content: 'Angka untuk kode widgetStyle
    adalah "1, 2, atau 3"';}
    body#layout .notex:after{content: 'Angka untuk kode summaryLength
    adalah "0 - terserah". (khusus style 2)';}
    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 <b: template-skin> code in your template, you can place the CSS above the code ]]> </ b: skin>. It's just that the display of Related Posts in the layout becomes colorless.

Step 7

Save Theme

Step 8

Please access the Layout menu or Layout, scroll down, then edit on each widget Related Post Settings there (desktop and mobile), with the following notes:

√ For the code | numPosts | fill with number 1 - whatever.

√ For code | widgetStyle | fill with numbers 1, 2 or 3.

√ For code | summaryLength | fill with numbers 0 - whatever.

Note!
√ This is a modification of the DTE Related Posts widget whose JavaScript is slightly configured. So make sure you do Step 4.
√ If you try to apply this widget but do not follow the entire set of the above tutorial correctly, you can be sure that the installation will fail miserably.

Actually the Related Posts widget or Related Articles can still be added to other styles, which can be up to 6 styles. It might be updated next time. Thus, hopefully useful!

Add Widget Related Post Responsive 3 Style [ Update 2020]

Advertiser