√ Cara Membuat Related Post atau Posting Terkait di Blog - BangOpit ID
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.

Sekian dan Terima Kasih telah membaca artikel saya tentang Cara Membuat Related Post atau Posting Terkait di Blog. Sampai Jumpa!
Buka Komentar
Tutup Komentar

1 Komentar untuk "Cara Membuat Related Post atau Posting Terkait di Blog"

Peraturan Berkomentar
1. Jangan menggunakan kata-kata kotor dan kasar
2. Jangan menyertakan link dalam berkomentar
3. Jangan membahas keluar topik, jika keluar topik sebaiknya gunakan Contant Form yang disediakan

Iklan atas artikel

Iklan tengah artikel 1

Iklan tengah artikel 2

Iklan bawah artikel