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/).*

Labels: Desain Blog
14 Komentar untuk "Membuat Sendiri Related Post plus Gambar Thumbnail di Blog"

Maksud didalamnya itu gimana sih gan ??

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

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

kurang JavaScriptnya. Kalo gk percaya, coba aja sndiri gan

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

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?

Sudah diupdate, silakan coba lagi

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

Sudah diupdate, silakan coba lagi

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

T kasih masukannya Akan Saya coba smoga berhasil ,

1. Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *