Membuat Related Post dan Random Post

Membuat Related Post dan Random Post (postingan) - oke pada tutorial kali ini saya dapat dari blog mas saeful13. Widget Random Post Untuk Blogger adalah sebuah widget yang berfungsi untuk menampilkan postingan-postingan pada sidebar blog secara acak dan bergantian dengan jumlah posts yang bisa ditambah atau dikurangi. dan juga  Related Post, salah satu hal yg sangat diperlukan pengunjung saat membaca suatu artikel di blog adalah kemudahan menemukan artikel terkait lainnya. maka dari itu, diperlukan sebuah widget yg bernama Related Post / Artikel Terkait.
go to the tutorial :)

Membuat Related Post dan Random Post :1. Buka blogger

2. Template -> Edit html

3. Simpan kode dibawah diatas kode ]]></b:skin>

  /*Artikel Terkait and Random*/
.related-post h4 {margin:0;display:none;}
.syang1{float:left;margin:0;display:block;width:50%;}
.syang2{margin:0;float:right;display:block;width:50%;}
.sedunia1 {padding:0;margin-bottom:5px;height:155px;overflow:hidden;border-left:1px solid #ccc;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.sedunia2 {padding:0;margin-bottom:5px;height:155px;overflow:hidden;border-right:1px solid #ccc;border-bottom:1px solid #ccc;}
.judul1 h3 {background:#E6E9F1;border-bottom:1px solid #ccc;border-left:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;font-family:Coda;margin:0;font-weight:bold;color:#000;text-shadow:none;text-align:center;}
.judul2 h3 {background:#E6E9F1;border-bottom:1px solid #ccc;border-right:1px solid #ccc;border-top:1px solid #ccc;font-family:Coda;margin:0;font-weight:bold;color:#000;text-shadow:none;text-align:center;}
.sedunia1 ul {padding:0px !important;background:#f2f2f2; margin:0}
.sedunia1 ul li {border-bottom: 1px solid #ccc;  border-top: 1px solid #FFFFFF;list-style:none;line-height: 1.4em;padding:3px 10px;transition:all 0.7s ease-out;white-space:nowrap;text-overflow:ellipsis; overflow:hidden}
.sedunia1 li:hover, .sedunia a:hover {background:#fafafa; color:#000; display:block;text-decoration:none;white-space:nowrap;text-overflow:ellipsis; overflow:hidden}
.sedunia1 a {color:#777 }
.sedunia2 ul {padding:0px !important;background:#f2f2f2; margin:0}
.sedunia2 ul li {border-bottom: 1px solid #ccc;  border-top: 1px solid #FFFFFF;list-style:none;line-height: 1.4em;padding:3px 10px;transition:all 0.7s ease-out;white-space:nowrap;text-overflow:ellipsis; overflow:hidden}
.sedunia2 li:hover, .sedunia a:hover {background:#fafafa; color:#000; display:block;text-decoration:none;white-space:nowrap;text-overflow:ellipsis; overflow:hidden}
.sedunia2 a {color:#777 }

4. Kemudian simpan kode ini dibawah kode <div class='post-footer-line post-footer-line-1'>.

<div class='syang1'>
<div class='judul1'>
<h3>Related Posts</h3>
<div class='sedunia1'>
<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>];
  var relatedPostConfig = {
      homePage: &quot;<data:blog.homepageUrl/>&quot;,
      widgetTitle: &quot;&lt;h4&gt;Related Post:&lt;/h4&gt;&quot;,
      numPosts: 6,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: false,
      moreText: &quot;Read More&quot;,
      widgetStyle: 1,
      callBack: function() {}
  };
  </script>
  <script src='http://blogger-json-experiment.googlecode.com/svn/resources/related-post/related-post.min.js' type='text/javascript'/>
</div>
</div>
</div>
<div class='syang2'>
<div class='judul2'>
<h3>Random Posts</h3>
<div class='sedunia2'>
<div id='random-post-container'>Loading...</div>
<script>
//<![CDATA[
// Feed configuration
var homePage = 'http://saeful13.blogspot.com',
    maxResults = 6,
    containerId = 'random-post-container';
// Function to generate random number limited from `min` to `max`
// Used to create a valid and safe random feed `start-index`
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
// Function to shuffle arrays
// Used to randomize order of the generated JSON feed
function shuffleArray(arr) {
    var i = arr.length, j, temp;
    if (i === 0) return false;
    while (--i) {
        j = Math.floor(Math.random() * (i + 1));
        temp = arr[i];
        arr[i] = arr[j];
        arr[j] = temp;
    }
    return arr;
}
// Get a random start index
function createRandomPostsStartIndex(json) {
    var startIndex = getRandomInt(1, (json.feed.openSearch$totalResults.$t - maxResults));
    // console.log('Get the post feed start from ' + startIndex + ' until ' + (startIndex + maxResults));
    document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&orderby=updated&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=randomPosts"></scr' + 'ipt>');
}
// Widget's main function
function randomPosts(json) {
    var link, ct = document.getElementById(containerId),
        entry = shuffleArray(json.feed.entry),
        skeleton = "<ul>";
    for (var i = 0, len = entry.length; i < len; i++) {
        for (var j = 0, jen = entry[i].link.length; j < jen; j++) {
            link = (entry[i].link[j].rel == "alternate") ? entry[i].link[j].href : '#';
        }
        skeleton += '<li><a href="' + link + '">' + entry[i].title.$t + '</a></li>';
    }
    ct.innerHTML = skeleton + '</ul>';
}
document.write('<scr' + 'ipt src="' + homePage + '/feeds/posts/summary?alt=json-in-script&max-results=0&callback=createRandomPostsStartIndex"></scr' + 'ipt>');
//]]>
</script>
</div>
</div>
</div>

5. semoga bermanfaat :)