Cara Membuat Related Post atau Posting Terkait di Blog

Cara Membuat Related Post atau Posting Terkait di Blog
Posting terkait atau yang sering disebut related post adalah widget yang menampilkan beberapa artikel, entah itu hanya judul atau pun lengkap dengan gambarnya.

Related post dan matched content bisa dibilang sama, sebab keduanya menampilkan artikel kepada pengunjung dan juga fungsinya yang digunakan untuk menarik pengunjung agar membaca artikel yang ditampilkan.

Related post ini biasanya terdapat dibagian bawah artikel, namun, tidak menutup kemungkinan jika ada yang meletakkannya di atas artikel atau sidebar blog.

Tetapi coba bayangkan jika diletakkan di sidebar blog, pasti kayak gimana gitu, mungkin kalau diletakkan di atas artikel masih mendingan, tapi bahayanya, pengunjung belum membaca artikel tersebut sudah pindah ke artikel lainnya.

Jika kamu tertarik untuk membuat related post pada blog kamu, langsung saja simak tutorialnya di bawah!

Cara Membuat Related Post di Blog

1. Buka dashboard blogger kamu.
2. Pilih menu Tema > Edit HTML.
3. Tempel kode di bawah, tepat di atas kode </style>.
/* RELATED POSTS BY BANGOPIT.ID */
.related-post{margin:30px auto 0;overflow:hidden}.related-post h4{position:relative;margin:0;display:inline-block;font-weight:700;color:#212121;text-transform:uppercase;font-size:16px;z-index:1;background:#fff;padding:0 10px}.related-post ul{padding:0!important;font-size:14px;text-align:center}

4. Tempel kode di bawah, tepat di atas kode </body>.
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script>
//<![CDATA[
if(relatedPosts==1){
var randomRelatedIndex,showRelatedPost;!function(e,a,l){var g={widgetTitle:"<h4>Artikel Terkait:</h4>",widgetStyle:3,homePage:"http://www.dte.web.id",numPosts:8,summaryLength:0,titleLength:"auto",thumbnailWidth:255,thumbnailHeight:170,noImage:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",containerId:"related-post",newTabLink:!1,moreText:"Baca Selengkapnya",callBack:function(){}};for(var t in relatedPostConfig)g[t]="undefined"==relatedPostConfig[t]?g[t]:relatedPostConfig[t];var r=function(e){var t=a.createElement("script");t.type="text/javascript",t.src=e,l.appendChild(t)},A=function(e){var t,a,l=e.length;if(0===l)return!1;for(;--l;)t=Math.floor(Math.random()*(l+1)),a=e[l],e[l]=e[t],e[t]=a;return e},i="object"==typeof labelArray&&0<labelArray.length?"/-/"+A(labelArray)[0]:"";randomRelatedIndex=function(e){var t,a,l=e.feed.openSearch$totalResults.$t-g.numPosts,n=(t=1,a=0<l?l:1,Math.floor(Math.random()*(a-t+1))+t);r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+n+"&max-results="+g.numPosts+"&callback=showRelatedPost")},showRelatedPost=function(e){var t,a,l,n,r=document.getElementById(g.containerId),i=A(e.feed.entry),s=g.widgetStyle,o=g.widgetTitle+'<ul class="related-post-style-'+s+'">',d=g.newTabLink?' target="_blank"':"",m='<span style="display:block;clear:both;"></span>';if(r){for(var h=0;h<g.numPosts&&h!=i.length;h++){a=i[h].title.$t,l="auto"!==g.titleLength&&g.titleLength<a.length?a.substring(0,g.titleLength)+"&hellip;":a,n="media$thumbnail"in i[h]&&!1!==g.thumbnailWidth?i[h].media$thumbnail.url.replace(/.*?:\/\//g,"//").replace(/\/s[0-9]+(\-c)?/,"/w"+g.thumbnailWidth+"-h"+g.thumbnailHeight+"-c"):g.noImage,"summary"in i[h]&&0<g.summaryLength&&i[h].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,g.summaryLength);for(var c=0,u=i[h].link.length;c<u;c++)t="alternate"==i[h].link[c].rel?i[h].link[c].href:"#";3==s&&(o+='<li class="related-post-item" tabindex="0"><a class="related-post-item-title" href="'+t+'"'+d+'><img alt="" class="related-post-item-thumbnail" src="'+n+'" width="'+g.thumbnailWidth+'" height="'+g.thumbnailHeight+'"></a><div class="related-post-item-tooltip"><a class="related-post-item-title" title="'+a+'" href="'+t+'"'+d+">"+l+"</a></div>"+m+"</li>")}r.innerHTML=o+="</ul>"+m,g.callBack()}},r(g.homePage.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
};
//]]>
</script>
</b:if>

5. Tempel kode di bawah, tepat di bawah <data:post.body/> atau letakkan sesuai keinginan kamu.
<b:include data='post' name='relatedpost'/>

6. Cari kode (lihat gambar).
Setiap template memiliki kode-kode yang berbeda-beda, jadi, selamat bereksperimen.
7. Lalu ganti dengan kode di bawah.
<b:includable id='relatedpost' var='post'>
<div class='related-post' expr:id='&quot;related-post-&quot; + data:post.id'/>
<script>
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;div class=&#39;label-line-c&#39;&gt;&lt;h4&gt;<b:switch var='data:blog.locale'><b:case value='id'/>Artikel Terkait<b:default/>Related Post</b:switch>&lt;/h4&gt;&lt;/div&gt;&quot;,
numPosts: 8,
titleLength: &quot;auto&quot;,
thumbnailWidth: 250,
thumbnailHeight: 170,
noImage: &quot;//3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/w255-h170-c/no-image.png&quot;,
containerId: &quot;related-post-<data:post.id/>&quot;,
newTabLink: false,
moreText: &quot;Read More&quot;,
widgetStyle: 3,
callBack: function() {}
};
</script>
</b:includable>

8. Simpan tema.

Menemui kendala? silakan hubungi melalui halaman contact.
Blogger

NULIS ARTIKEL DIJOKIJENIUS DIBAYAR

  • ARTKEL YANG DITULIS ASLI BUATAN SENDIRI
  • JENIS ARTIKEL YANG DITULIS BELUM PASARAN
  • JUMLAH KATA DALAM ARTIKEL MINIMAL 700 KATA
  • SATU ARTIKEL KAMI HARGAI 10.000

0 Response to "Cara Membuat Related Post atau Posting Terkait di Blog"

Post a Comment

Catatan Berkomentar
  • Mohon Tinggalkan jejak sesuai dengan judul artikel.
  • Tidak diperbolehkan untuk mempromosikan barang atau berjualan.
  • Dilarang mencantumkan link aktif di komentar.
  • Komentar dengan link aktif akan otomatis dihapus
  • *Berkomentarlah dengan baik, Kepribadian Anda tercemin saat berkomentar.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel