Spotnikola | free template

Responsive Blogger Templates is an ultimate feature that lets you show your blog according to the user’s device and screen size. It automatically adjusts its width and element size keeping design in mind. Since blogger is one of the oldest blogging platforms, it also requires modern updates, so google does that every year, previous blogger themes have two different settings where you can show desktop theme and mobile theme separately but it was neither functional nor very useful instead it looked bad and gives a bad reputation for your blog, but to solve that issue here comes custom responsive blogger themes, theses themes are made by professional blogger template designers like SoraTemplates, TemplatesYard, Way2Themes, and many others, they provide some amazing quality themes which you can place on multiple devices, that means a single theme will be displayed on the user’s device and it will automatically adjust its width and element size according to the screen size, it looks beautiful and professional at the same time.

Responsive Blogger Templates is an ultimate feature that lets you show your blog according to the user’s device and screen size. It automatically adjusts its width and element size keeping design in mind. Since blogger is one of the oldest blogging platforms, it also requires modern updates, so google does that every year, previous blogger themes have two different settings where you can show desktop theme and mobile theme separately but it was neither functional nor very useful instead it looked bad and gives a bad reputation for your blog, but to solve that issue here comes custom responsive blogger themes, theses themes are made by professional blogger template designers like SoraTemplates, TemplatesYard, Way2Themes, and many others, they provide some amazing quality themes which you can place on multiple devices, that means a single theme will be displayed on the user’s device and it will automatically adjust its width and element size according to the screen size, it looks beautiful and professional at the same time.

How to Add Related Posts Widget in Blogger

1. As always, we should go to Blogger Dashboard ->> Template ->> Edit HTML and find this code  <div class='post-footer'>. If you are having problem in finding the codes just use the CTRL+F on your keyboard, refer to the image below. If you are using the default template of Blogger you may found the code two times, but you should stop at the second.

2. Just above <div class='post-footer'> copy and paste the following codes provided below.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
<style type=’text/css’>
.related-post-title{font-size: 2em;padding: 0px 0px 15px;margin: 5px 0px;border-bottom: 1px dotted #000;} #related-posts {margin: 0px 0px 15px 0px;border-bottom: 1px dotted #000;padding-bottom: 10px; } #related-posts a { font-size: 1.2em; color: #525252; text-transform: capitalize; text-decoration: none; line-height: 20px;} #related-posts a:hover { text-decoration: none; color: #06c; } #related-posts ul { list-style-type: none; color: #000000; } #related-posts li { padding: 8px 2px; border-bottom: 1px solid #E2E2E2; clear: both; font-family: Helvetica; font-size: 12px; overflow: auto; border: 1px solid #CCC; margin: 5px 5px 8px 5px; border-radius: 4px; box-shadow: 0px 0px 5px #B6B6B6;background:#FAFAFA;} .image_left{ float: left; margin: 0px 10px 10px 2px; border: 1px solid #fff; padding: 0px; width: 80px; height: 56px; box-shadow: 0px 0px 4px #777; } #related_here{ float:left; width: 49%; padding: 0px; margin:0px; } #related_here2{ float:right; width: 49%; padding: 0px; margin:0px; } .related_all_ul{overflow: auto;}
</style>

<script type=’text/javascript’>
//<![CDATA[
function related_results_labels(e){for(var l=0;l<e.feed.entry.length;l++){var t=e.feed.entry[l];relatedTitles[relatedTitlesNum]=t.title.$t;var r=e.feed.entry[l].media$thumbnail.url,a=r.replace(“/s72-c/”,”/s100/”);if(e.feed.entry[l].media$thumbnail)var r=e.feed.entry[l].media$thumbnail.url,a=r.replace(“/s72-c/”,”/s100/”);else if(null!=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]”)/))var a=e.feed.entry[l].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]”)/)[1];else var a=”https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjE49E0Q-8_DMEHCFLHZZRvDRAjVaG199IYVXGQUBbvZ7bZDv56umb648hFVDZfWw-uqI_QMBQUF6RV-JQkLN7-zgHDz4CHIvKXhYUhO9wyZqXslcRqDg4h0KCLNxkKboWh0Iw01SyHqQI/s250-Ic42/no-thumbnail.png”;relatedImage[relatedTitlesNum]=a;for(var n=0;n<t.link.length;n++)if(“alternate”==t.link[n].rel){relatedUrls[relatedTitlesNum]=t.link[n].href,relatedTitlesNum++;break}}}function removeRelatedDuplicates(){for(var e=new Array(0),l=new Array(0),t=new Array(0),r=0;r<relatedUrls.length;r++)contains(e,relatedUrls[r])||(e.length+=1,e[e.length-1]=relatedUrls[r],l.length+=1,l[l.length-1]=relatedTitles[r],t.length+=1,t[t.length-1]=relatedImage[r]);relatedTitles=l,relatedUrls=e,relatedImage=t}function contains(e,l){for(var t=0;t<e.length;t++)if(e[t]==l)return!0;return!1}function printRelatedLabels(e){for(var l=0;l<relatedUrls.length;l++)relatedUrls[l]==e&&(relatedUrls.splice(l,1),relatedTitles.splice(l,1),relatedImage.splice(l,1));var t=Math.floor((relatedTitles.length-1)*Math.random()),l=0;for(relatedTitles.length>1;l<relatedTitles.length&&20>l&&l<maxposts;)l%2==1?document.getElementById(“related_here2″).innerHTML+=”<li><img class=’image_left’ src=\””+relatedImage[t]+'”><a href=”‘+relatedUrls[t]+'”>’+relatedTitles[t]+”</a></li>”:document.getElementById(“related_here”).innerHTML+=”<li><img class=’image_left’ src=\””+relatedImage[t]+'”><a href=”‘+relatedUrls[t]+'”>’+relatedTitles[t]+”</a></li>”,t<relatedTitles.length-1?t++:t=0,l++;relatedUrls.splice(0,relatedUrls.length),relatedTitles.splice(0,relatedTitles.length),relatedImage.splice(0,relatedImage.length)}var relatedTitles=new Array,relatedImage=new Array,relatedTitlesNum=0,relatedUrls=new Array;
//]]>
</script>
<div id=’related-posts’>
<h4 class=’related-post-title’>You may also like:</h4>
<div class=’related_all_ul’>
<ul id=’related_here’/>
<ul id=’related_here2’/>
<div style=”font-size: 9px;float: right; margin: 5px;”><a style=”font-size: 9px; text-decoration: none;” href=”http://www.internetsmash.com/2016/01/related-posts-widget-with-thumbnail.html” rel=”nofollow”>Related Posts Widget</a></div>
</div>
<b:loop values=’data:post.labels’ var=’label’>
<b:if cond=’data:label.isLast != &quot;true&quot;’>
</b:if>
<script expr:src=’&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=7&quot;’ type=’text/javascript’/>
</b:loop>
<script type=’text/javascript’> var maxposts=6; removeRelatedDuplicates(); printRelatedLabels(&quot;<data:post.url/>&quot;); </script>
</div>
<div style=’clear: both;’/>
</b:if>

Note: Sometimes the  Related Posts Widget will not able to load after putting the codes on the second <div class='post-footer'>, if that is the case, you may save it on the first <div class='post-footer'> and see if it’s working.

Customization

max-results=7: Make sure the value of max-results is greater than maxposts. This is the safest thing to do if your blog posts having only one label in order to maintain the number of posts to appear in our related posts widget.
maxposts=6: Just change this value if you want to increase or decrease the number of posts to be displayed. Again, this value should be less than the max-results.
height: 56px, width: 80px: Just change the value 80/56 to increase or decrease the width/height of the images.

youtube

<br /> <div id="sitemap-blog">

  <table>

    <tbody>

      <tr>

        <td>

          <label>Sort articles by:</label>

        </td>

        <td>

          <select id="feed-order">

            <option selected="" value="published">Latest article</option>

            <option value="updated">Last updated article</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label>Filter articles by category:</label>

        </td>

        <td>

          <select disabled="" id="label-sorter">

            <option selected="">Loading....</option>

          </select>

        </td>

      </tr>

      <tr>

        <td>

          <label>Search for articles by keywords:</label>

        </td>

        <td>

          <form id="post-searcher">

            <input id="feed-q" placeholder="" type="text" />

          </form>

        </td>

      </tr>

    </tbody>

  </table>

</div>

<br />

<header id="result-desc"></header>

<br />

<ul id="daftar-isi-blog"></ul>

<div id="feed-nav">

</div>

 

<script type="text/javascript">

var head = document.head || document.getElementsByTagName('head')[0];

var style = document.createElement('style');

style.type = 'text/css';

var css = '#sitemap-blog{padding:7px 10px;margin:0 auto}#sitemap-blog table{width:auto;margin:0 auto;border:none!important}#sitemap-blog table td{border:none!important;padding:0!important}#sitemap-blog form{font:inherit}#sitemap-blog label{display:block;text-align:right;margin:0 10px 0 0;padding:4px 0 0}#sitemap-blog select[disabled]{opacity:.4}#post-searcher{display:block;margin:0;padding:0}#sitemap-blog input,#sitemap-blog select{width:100%;border:1px solid #dedede;border-radius:5px;margin:0;padding:5px;font-family:Roboto,sans-serif!important;font-size:16px!important;font-weight:500!important;text-transform:capitalize!important;outline:0;color:#333!important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}#sitemap-blog select option{min-height:1.4em!important}#sitemap-blog input#feed-q{padding:5px 10px!important}#daftar-isi-blog{background:#fff;display:block;clear:both;margin:0;padding:0;list-style:none;overflow:hidden;position:relative;border-top:none}#daftar-isi-blog li{list-style:none;margin:0;padding:0;border-top:1px solid #eee;color:#555;width:auto;float:left;display:inline}#daftar-isi-blog li .inner{margin:15px 0;height:auto;overflow:hidden;word-wrap:break-word;text-overflow:ellipsis}#daftar-isi-blog li a{text-decoration:none;color:#2C2C2C;font-weight:500}#daftar-isi-blog li a:hover{text-decoration:none;color:#E94141}#daftar-isi-blog li .news-text{margin-top:5px;line-height:1.3em!important}#daftar-isi-blog li img{margin:0 15px 5px 0;padding:7px 7px 7px 0;float:left;display:block;width:140px!important}#result-desc{margin:0;padding:0}#result-desc div,#result-desc span{display:block;margin:0;padding:5px 0 7px;color:#D64D52}#result-desc div{color:inherit}#feed-nav{margin:10px 0 30px;text-align:center;font-weight:500}#feed-nav a,#feed-nav span{border:1px solid #dedede;border-radius:5px;padding:0;color:#757575;text-decoration:none;display:block;height:30px;line-height:32px}#feed-nav a,#feed-nav span:hover{color:#1B1B1B}#feed-nav a:active,#feed-nav a:hover{color:#555}#feed-nav span{cursor:wait}@media (max-width:600px){#sitemap-blog table{margin:0 auto;width:100%}#daftar-isi-blog,#sitemap-blog{margin:0 auto}#daftar-isi-blog li .inner{margin:5px auto;height:auto}#feedContainer li{float:none;display:block;width:auto;height:auto}#daftar-isi-blog li .news-text,#feedContainer:after,#daftar-isi-blog li img{display:none!important}}.post-body{min-height:300px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPvwTmUkAG6UBEfeZVnf3pqKB6R8GWEoEcLFPJail9nKd1NOTU5M5ZtPX98DbPlqx5NMvZ_r29oVAJasLdTiV0ecl-SyvkPMzUpecW98cc2tCy0moYbJbbVyzZR4TSLeD4Pl7PmuAEpS0/w220-h19-no/ajax-loader+%25281%2529.gif)50% 50% no-repeat!important}';

style.appendChild(document.createTextNode(css));

head.appendChild(style); 

</script>

<script type="text/javaScript">

document.write;

var loadToc, loadCategories, _toc = {

    init: function() {

        var cfg = {

                homePage: window.location.origin,

                maxResults: 10,

                numChars: 270,

                thumbWidth: 140,

                thumbHeight: 95,

                navText: "Show the next article &#9660;",

                resetToc: "Back to the Beginning",

                noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-qPZ_DsSAfk1qLi9LAt7pUNlAPfXIkUcfEZLSGr-a7EtvCSkMaNsioVbPwd9L1h0UJqCyVudDzRGw7cS4nkX8wAJqpBd6SsajnKMc9VgC9niW1FiJuSy2rqnDQCfSWiRSuZ0N4R2lbXre/s1100/no-thumbnail.png",

                loading: "<span>Load...</span>",

                counting: "<div>Loading articles...</div>",

                searching: "<span>Looking for...</span>"

            },

            w = window,

            d = document,

            el = function(id) {

                return d.getElementById(id);

            },

            o = {

                a: el('feed-order'),

                b: el('label-sorter').parentNode,

                c: el('post-searcher'),

                d: el('feed-q'),

                e: el('result-desc'),

                f: el('daftar-isi-blog'),

                g: el('feed-nav'),

                h: d.getElementsByTagName('head')[0],

                i: 0,

                j: null,

                k: 'published',

                l: 0,

                m: ""

            },

            fn = {

                a: function() {

                    old = el('temporer-script');

                    old.parentNode.removeChild(old);

                },

                b: function(param) {

                    var script = d.createElement('script');

                    script.type = "text/javascript";

                    script.id = "temporer-script";

                    script.src = param;

                    if (el('temporer-script')) fn.a();

                    o.h.appendChild(script);

                },

                c: function(mode, tag, order) {

                    o.i++;

                    o.e.innerHTML = cfg.counting;

                    o.g.innerHTML = cfg[mode == 1 ? "searching" : "loading"];

                    if (mode === 0) {

                        fn.b(tag !== null ? cfg.homePage + '/feeds/posts/summary/-/' + tag + '?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc' : cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&orderby=' + order + '&callback=loadToc');

                    } else if (mode == 1) {

                        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + ((o.i * cfg.maxResults) + 1) + '&max-results=' + cfg.maxResults + '&q=' + tag + '&orderby=' + order + '&callback=loadToc');

                    }

                    o.j = (tag !== null) ? tag : null;

                    o.l = mode;

                    o.a.disabled = true;

                    o.b.children[0].disabled = true;

                },

                d: function(json) {

                    var _h;

                    o.g.innerHTML = "";

                    o.e.innerHTML = o.l == 1 ? '<span>Search results for keywords <b>&#8220;' + o.m + '&#8221;</b> (' + json.feed.openSearch$totalResults.$t + ' Hasil)</span>' : '<div>Total: ' + json.feed.openSearch$totalResults.$t + ' Artikel</div>';

                    if ("entry" in json.feed) {

                        var a = json.feed.entry,

                            b, c, _d, e = "0 Komentar",

                            f = "",

                            g;

                        for (var i = 0; i < cfg.maxResults; i++) {

                            if (i == a.length) break;

                            b = a[i].title.$t;

                            _d = ("summary" in a[i]) ? a[i].summary.$t.replace(/<br ?\/?>/ig, " ").replace(/<(.*?)>/g, "").replace(/<iframe/ig, "").substring(0, cfg.numChars) : "";

                            g = ("media$thumbnail" in a[i]) ? a[i].media$thumbnail.url.replace(/.*?:\/\//g, "//").replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "") : cfg.noImage.replace(/\/s[0-9]+\-c/, "\/s" + cfg.thumbWidth + "");

                            for (var j = 0, jen = a[i].link.length; j < jen; j++) {

                                c = (a[i].link[j].rel == "alternate") ? a[i].link[j].href : "#";

                            }

                            for (var k = 0, ken = a[i].link.length; k < ken; k++) {

                                if (a[i].link[k].rel == "replies" && a[i].link[k].type == "text/html") {

                                    e = a[i].link[k].title;

                                    break;

                                }

                            }

                            _h = d.createElement('li');

                            _h.innerHTML = '<div class="inner"><img style="width:' + cfg.thumbWidth + 'px;height:' + cfg.thumbHeight + 'px;" data-src="' + g + '" src="' + g + '" alt="' + b + '" title="' + b + '"><a class="toc-title" href="' + c + '" target="_blank" title="' + b + '">' + b + '</a><div class="news-text">' + _d + '&hellip;<br style="clear:both;"></div></div>';

                            o.f.appendChild(_h);

                        }

                        _h = d.createElement('a');

                        _h.href = '#load-more';

                        _h.innerHTML = cfg.navText;

                        _h.onclick = function() {

                            fn.c(o.l, o.j, o.k);

                            return false;

                        };

                    } else {

                        _h = d.createElement('a');

                        _h.href = '#reset-content';

                        _h.innerHTML = cfg.resetToc;

                        _h.onclick = function() {

                            o.i = -1;

                            o.e.innerHTML = cfg.counting;

                            o.f.innerHTML = "";

                            fn.c(0, null, 'published');

                            o.a.innerHTML = o.a.innerHTML;

                            o.b.children[0].innerHTML = o.b.children[0].innerHTML;

                            return false;

                        };

                    }

                    o.g.appendChild(_h);

                    o.a.disabled = false;

                    o.b.children[0].disabled = false;

                },

                e: function(json) {

                    var a = json.feed.category,

                        b = '<select id="label-sorter"><option value="" selected disabled>Pilih Kategori...</option>';

                    for (var i = 0, len = a.length; i < len; i++) {

                        b += '<option value="' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '">' + encodeURIComponent(a[i].term).replace(/%20/g, " ") + '</option>';

                    }

                    b += '</select>';

                    o.b.innerHTML = b;

                    o.b.children[0].onchange = function() {

                        o.i = -1;

                        o.f.innerHTML = "";

                        o.g.innerHTML = cfg.loading;

                        fn.c(0, this.value, o.k);

                    };

                }

            };

        loadToc = fn.d;

        loadCategories = fn.e;

        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&start-index=' + (o.i + 1) + '&max-results=' + cfg.maxResults + '&orderby=published&callback=loadToc');

        fn.b(cfg.homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&orderby=published&callback=loadCategories');

        o.a.onchange = function() {

            o.i = -1;

            o.f.innerHTML = "";

            o.g.innerHTML = cfg.counting;

            o.b.children[0].innerHTML = o.b.children[0].innerHTML;

            fn.c(0, null, this.value);

            o.k = this.value;

        };

        o.c.onsubmit = function() {

            o.i = -1;

            o.f.innerHTML = "";

            o.m = o.d.value;

            fn.c(1, o.d.value, o.k);

            return false;

        };

    }

};

_toc.init();

</script>