Home » » Membuat Sendiri Related Post plus Gambar Thumbnail di Blog

Membuat Sendiri Related Post plus Gambar Thumbnail di Blog

Related Post plus Gambar Thumbnail
Cara Membuat Related Post (Artikel/Posting Terkait) plus Gambar Thumbnail di Bawah Posting Blog.

KAYANYA semua blog saat ini sudah punya widget related posts di bawah tiap postingan. Namun, hati-hati, suka ada sisipan link dalam kodenya jika kita tidak berhati hati.

CB sedah sering memposting soal artikel terkait ini. Anda bisa buka Related Post Widget untuk melihatnya. Posting ini merupakan UPDATE dari semua tips posting terkait itu.

Agar related post kita aman dari sisipan link, "intip" saja jika kode posting terkait itu menyertakan link javascript, dengan cara copas linj js-nya ke browser.

Baca juga: Related Post yang Aman dari Sisipan Link.

Untuk keamanan dan kenyamanan, kita bisa membuat related post sendiri, pilihan sendiri, di laman yang sudah disediakan dengan sangat baik oleh DTE.

Ada enam jenis related post yang bisa kita pilih di sana, seperti dalam gambar berikut ini. Sangat lengkap. Jadi, Anda gak usah pergi ke tempat lain untuk mendapatkan kode related post. Cukup di sini:

Macam-macam Related Post plus Gambar Thumbnail


CB sendiri memilih  Related Post plus Gambar Thumbnail. Kayaknya lagi "trending" model related post begini. Lebih berat ketimbang yang simple (judul posting doang), namun lebih menarik dan seo friendly karena menggunakan gambar.

Kita bisa lakukan konfigurasi sendiri di sana, melihat previewnya, dan mengambil/memasang kodenya dengan aman di blog kita.

Cara Membuat Related Post plus Gambar Thumbnail

1. Template > Edit HTML
2. Copas atau pasang kode CSS dan HTML/Javascript di bawah ini:

KODE CSS
Dipasang di atas kode ]]></b:skin> atau </style>

/* ==== Related Post Widget Start ==== */

.related-post {
  margin:2em auto 0;
  font:normal normal 11px/1.4 Arial,Sans-Serif;
}
.related-post h4 {
  font-size:150%;
  margin:0 0 .5em;
}

/* Style 2 */
.related-post-style-2,
.related-post-style-2 li {
  margin:0;
  padding:0;
  list-style:none;
}
.related-post-style-2 li {
  padding:10px;
  border-top:1px solid #eee;
  overflow:hidden;
}
.related-post-style-2 li:first-child {border-top:none}
.related-post-style-2 .related-post-item-thumbnail {
  width:80px;
  height:80px;
  max-width:none;
  max-height:none;
  background-color:transparent;
  border:none;
  padding:0;
  float:left;
  margin:2px 10px 0 0;
}
.related-post-style-2 .related-post-item-title {
  font-weight:bold;
  font-size:110%;
}
.related-post-style-2 .related-post-item-summary {
  display:block;
  overflow:hidden;
}
.related-post-style-2 .related-post-item-more {}

/* ==== Related Post Widget End ==== */

KODE XML & JAVASCRIPT
Disimpan di atas kode <div class='post-footer'> (atau di mana saja di dalam kode <b:includable id='post' var='post'/> dan <b:includable id='mobile-post' var='post'/>. Be careful!)

<!-- Related Post Widget Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
  <div id='related-post' class='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 Posts:&lt;/h4&gt;&quot;,
      numPosts: 5,
      summaryLength: 370,
      titleLength: &quot;auto&quot;,
      thumbnailSize: 80,
      noImage: &quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC&quot;,
      containerId: &quot;related-post&quot;,
      newTabLink: true,
      moreText: &quot;&quot;,
      widgetStyle: 2,
      callBack: function() {}
  };
  </script>
  <script type='text/javascript' src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js'/>
</b:if>
<!-- Related Post Widget End -->

Jumlah posting (numPost), panjang ringkasan (summaryLength), dan ukuran gambar (thumbnailSize) bisa diatur lagi di template.

3. Save template!

UPDATE!
Atas masukan Anda di komentar, link kode script berikut ini:

<script type='text/javascript' src='http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js'/>

sudah mati. Maka, silakan hapus kode tersebut dan ganti dengan kode berikut ini:

<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:370,titleLength:"auto",thumbnailSize:72,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:false,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="rel-style-'+A+'">',b=d.newTabLink?' target="_blank"':"",y='<span style="display:block;clear:both;"></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(/\/s[0-9]+(\-c)?/,"/s"+d.thumbnailSize+"-c"):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><a title="'+t+'" href="'+v+'"><img alt="'+t+'" class="rel-thumb" src="'+r+'" width="'+d.thumbnailSize+'" height="'+d.thumbnailSize+'"/></a><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+"></a></span>"+y+"</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>

Demikian cara Membuat Sendiri Related Post plus Gambar Thumbnail di Blog, tanpa "terinfeksi" injeksi link blog orang lain. Good Luck! (http://www.contohblog.com/).*

Thanks for reading & sharing Membuat Sendiri Related Post plus Gambar Thumbnail di Blog

Previous
« Prev Post

14 comments:

Comment Page:
  1. Maksud didalamnya itu gimana sih gan ??

    ReplyDelete
  2. kurang lengkap nih gan. Kurang JavaScriptnya, jadinya gak Work deh

    ReplyDelete
    Replies
    1. kurang lengkap gimana, kebanyakan desainer blogger menggunakan related post dari DTE ini, silakan ke TKP

      Delete
    2. kurang JavaScriptnya. Kalo gk percaya, coba aja sndiri gan

      Delete
    3. bukan kurang, link dari dte-nya sudah mati. Sudah diupdate, silakan coba lagi

      Delete
  3. punyaku gk work gan.
    ini untuk template bawa'an blogger atau template hasil download

    ReplyDelete
    Replies
    1. Sudah diupdate, silakan coba lagi

      Delete
  4. yang membuat gak work itu kode sumber javascript nya http://dte-project.googlecode.com/svn/trunk/related-post/related-post.min.js

    disitu 404 not found, ada yang punya kode script itu?

    ReplyDelete
    Replies
    1. Sudah diupdate, silakan coba lagi

      Delete
  5. pakai update-nya juga gak work gan? sejak saya pakai template NJW-Simple related post jadi gak muncul... tolong bantuannya gan, please....

    ReplyDelete
  6. T kasih masukannya Akan Saya coba smoga berhasil ,

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox