Cara Membuat Related Post Thubnail Ala Google Plus


Assalamu'alaikum wr. wb. - Pada kesempatan kali ini saya akan kasih tutorial "Cara Membuat Related Post Thubnail Ala Google Plus" yang bentuknya bulat bulat tapi tetep keren gan, langsung aja tanpa basa basi silahkan simak tutorial di bawah ini dan saya akan kasih contoh imagenya.

Tutorial :
  • Login Blogger terlebih dahulu gan
  • Kemudian masuk template lalu klik edit html
  • Cari code </head> dengan cara Ctrl + f 
  • Jika sudah ketemu codenya copy code di bawan ini tepat di atas kode </head> :
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;

var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 0; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHZ2J5JcmAbP2JdE7Gsp53QJ5G3HE5hM1rr2nKe6IpgFsPB-o9JxfjoE2CTbmrEknq_Phndr-A6ldHuCsmTn7POmMlilMdz9fAgh-yPnjB06mCrKdFQJmz132KLlNPnqNJR69uV6PhmpaV/s1600/no_image.jpg"; // default picture for entries with no image

function readpostlabels(json) {
  var entry, postimg, postcontent, cat;
  for (var i = 0; i < json.feed.entry.length; i++) {
    entry = json.feed.entry[i];
    if (i==json.feed.entry.length) { break; }
    relatedTitles[relatedTitlesNum] = entry.title.$t;
    postcontent = "";
    if ("content" in entry) {
      postcontent = entry.content.$t;
    } else if ("summary" in entry) {
      postcontent = entry.summary.$t;
    }
    relatedpSummary[relatedTitlesNum] = removetags(postcontent,relatedmaxnum);
    if ("media$thumbnail" in entry) {
      postimg = entry.media$thumbnail.url;
    } else {
      postimg = relatednoimage;
    }
    relatedThumb[relatedTitlesNum] = postimg;
    for (var k = 0; k < entry.link.length; k++) {
      if (entry.link[k].rel == 'alternate') {
        relatedUrls[relatedTitlesNum] = entry.link[k].href;
        break;
      }
    }
    relatedTitlesNum++;
  }
}
function showrelated() {
  var tmp = new Array(0);
  var tmp2 = new Array(0);
  var tmp3 = new Array(0);
  var tmp4 = new Array(0);
  for(var i = 0; i < relatedUrls.length; i++) {
    if(!contains(tmp, relatedUrls[i])) {
      tmp.length += 1; tmp[tmp.length - 1] = relatedUrls[i];
      tmp2.length += 1; tmp2[tmp2.length - 1] = relatedTitles[i];
      tmp3.length += 1; tmp3[tmp3.length - 1] = relatedpSummary[i];
      tmp4.length += 1; tmp4[tmp4.length - 1] = relatedThumb[i];
    }
  }
  relatedTitles = tmp2; relatedUrls = tmp; relatedpSummary = tmp3; relatedThumb = tmp4;
  for(var i = 0; i < relatedTitles.length; i++){
    var index = Math.floor((relatedTitles.length - 1) * Math.random());
    var tempTitle = relatedTitles[i]; var tempUrls = relatedUrls[i];
    var tempResum = relatedpSummary[i]; var tempImage = relatedThumb[i];
    relatedTitles[i] = relatedTitles[index]; relatedUrls[i] = relatedUrls[index];
    relatedpSummary[i] = relatedpSummary[index]; relatedThumb[i] = relatedThumb[index];
    relatedTitles[index] = tempTitle; relatedUrls[index] = tempUrls;
    relatedpSummary[index] = tempResum; relatedThumb[index] = tempImage;
  }
  var somePosts = 0;
  var r = Math.floor((relatedTitles.length - 1) * Math.random());
  var relsump = r;
  var output;
  var dirURL = document.URL;

  while (somePosts < relatedPostsNum) {
    if (relatedUrls[r] != dirURL) {

      output = "<div class='relatedsumposts'>";
      output += "<a href='" + relatedUrls[r] + "' rel='nofollow'  target='_self' title='" + relatedTitles[r] + "'><img src='" + relatedThumb[r] + "' /></a>";
      output += "<h6><a href='" + relatedUrls[r] + "' target='_self'>" + relatedTitles[r] + "</a></h6>";
      output += "<p>" + relatedpSummary[r] + " ... </p>";
      output += "</div>";
      document.write(output);
    
      somePosts++;
      if (somePosts == relatedPostsNum) { break; }
    }
    if (r < relatedTitles.length - 1) {

      r++;
    } else {
    
      r = 0;
    }

    if(r==relsump) { break; }
  }
}
function removetags(text,length){
  var pSummary = text.split("<");
  for(var i=0;i<pSummary.length;i++){
    if(pSummary[i].indexOf(">")!=-1){
      pSummary[i] = pSummary[i].substring(pSummary[i].indexOf(">")+1,pSummary[i].length);
    }
  }
  pSummary = pSummary.join("");
  pSummary = pSummary.substring(0,length-1);
  return pSummary;
}
function contains(a, e) {
  for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
  return false;
}
//]]>
</script>
  • Code tersebut bisa di edit sesuka agan tapi nanti harus menyesuikan code cssnya lebar dan tingginya di atas udah ada keterangan tapi di sini ane buat yang mirip template ini aja biar gag ribet.(yang di edit bagian yang ane warna aja gan)
  • Kemudian cari code /]]></b:skin>
  • jika sudah ketemu copy code di bawah ini di atas /]]></b:skin> atau di bawah /]]></b:skin>
.relatedsumposts {
  float: left;
  margin: 0px 5px;
  overflow: hidden;
  text-align: center;
  /* width and height of the related posts area */
  width: 150px;
  height: 223px;

}

.relatedsumposts a {
  /* link properties */
color: #linkcolor;
  display: inline;
  font-size: 13px;
  line-height: 1;
}
.relatedsumposts img {
  /* thumbnail properties */
margin-top: 2px;
  height: 130px;
  padding: 5px;
  width: 130px;
border: 1px solid #fff;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
.relatedsumposts h6 {
  /* title properties */
  display: table-cell;
  height: 5em;
  margin: 5px 0 0;
  overflow: hidden;
  padding-bottom: 2px;
  vertical-align: middle;
  width: 130px;
}

.relatedsumposts p {
  /* summary properties */
border-top: 1px dotted #777777;
border-bottom: 1px dotted #777777;
color: #summarycolor;
  font-size: 10px;
  height: 4em;
  line-height: 1;
  margin: 5px 0 0;
  overflow: hidden;
  padding: 5px 0 15px 0;
  text-align: left;
}
  • Text yang ane kasih color merah itu ukuran kotak per post bisa di edit sesuai kebutuhan anda
  • Langkah selanhutnya cari kode sepert di bawah ini :
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
  • Kemudian copy code di bawah ini tepat di bawah code yang agan cari tadi :
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>
  • Maka hasilnya sebagai berikut :
<b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' type='text/javascript'/>
  </b:if>

          </b:loop> 
  • Code warna merah itu code yang di paste
  • Kemudian taruh kode widget di bawah ini sesuia keinginan anda mau di taru di bawah posting silahkan ada sesui mod anda :
            <!-- Related Post Widget Start -->
              <b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div class='post-footer-line post-footer-line-4'>
    <div id='relatedpostssum'><div style='text-align: left; font-size: 20px; margin-bottom: 10px; font-weight: bold; border-bottom: 2px solid #000;'>RELATED POSTS</div>
      <script type='text/javascript'>showrelated();</script>
    </div>
    <div style='clear:both;'/>
  </div>
</b:if>
            <!-- Related Post Widget End -->
  • Jika sudah preview template untuk mengecek ada kode yang error engga.
  • Jika sudah sukses maka simpat template
  • Finish
Sekian tutorial dari ane gan kurang lebihnya saya mohon maaf jika ada pertanyaa atau ada code yang error bisa di tanyakan di komerntar. Sukses Blogger Indonesia
Wassalamu'alaikum wr. wb.

Artikel yang Munkin Anda Cari :

Previous
« Prev Post

8 Responses to "Cara Membuat Related Post Thubnail Ala Google Plus"

  1. mantap bro, cuman takut agak beratin blog, soal nya skg dah mulai berat gara gara iklan.

    ReplyDelete
  2. waah.,. bagus juga nh gan kalau pake ini :) izin coba yaa gan... hehe

    ReplyDelete