 |
| Gambar Related post |
Ada beberapa orang yang selalu bertanya berapa banyak blog yang bisa menampilkan sesuatu seperti daftar "Artikel Terkait" setiap di bawah posting. Ini tidak hanya membantu pengguna menemukan topik yang relevan berikutnya tetapi juga bisa membuat pengunjung untuk jangka waktu yang lebih lama.
Secara teknis, ada banyak cara untuk menampilkan artikel atau posting terkait,namun kebanyakan tidak terlalu ditargetkan. Entah mereka tidak menarik orang atau mereka memberikan hasil yang sama sekali tidak relevan.
Mengapa Menambahkan Artikel Terkait di bawah tulisan di Blogger?
Terkadang mungkin anda ingin memberi beberapa artikel tambahan kepada pengunjung,sehingga mereka dapat meluangkan lebih banyak waktu di situs Anda.
Melibatkan pembaca untuk jangka waktu yang lebih lama adalah sesuatu yang sangat berguna untuk pertumbuhan trafick pada blog anda. Semakin banyak waktu yang dihabiskan orang di blog Anda, semakin meningkat pula kualitas yang diberikan pada blog anda.
Ada beberapa keistimewaan untuk menampilkan artikel terkait di bawah posting Anda,karena ini benar-benar membuat situs Anda terlihat profesional plus memberikan efek positif bagi para pengunjung yang mencari sesuatu yang terkait dalam pencariannya.
Cara Menambahkan Artikel Terkait pada Blogger?
Hal pertama yang perlu Anda lakukan adalah login ke akun Blogger Anda dan masuk ke >> Template >> Edit HTML,untuk mempermudah pencarian tekan CTRL F dan cari </ head> tepat di atas code tersebut pastekan kode berikut:
<style>
#related-posts {
float: left;
width: 650px;
border-bottom: 1px solid #ddd;
height: 290px;
}
#related-posts h2 {
margin-top: 50px;
border-bottom: 0px;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-bottom: 10px;
margin-left: 3px;
color: #666;
font-size: 16px;
}
</style>
<b:if cond='data:blog.pageType == "item"'>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqAj8-eTYQUrjlEQOfML3JOWosbNweGEPZz4DEg3vrLHXf1wuU7HVqK1NLuPzKkXFNx7ndF-7WBmQ6s8u84Ib6WKNUEI1ogM5zbjSLoH_qHqG0yn8mEgbZ3Nt3yt21VsDyMDn5weINahF/s1600/no_image.jpg";
var maxresults=3;
var splittercolor="#fff";
var relatedpoststitle="Related Articles:";
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
var thumburl = new Array();
function related_results_labels_thumbs(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
try
{thumburl[relatedTitlesNum]=entry.media$thumbnail.url;}
catch (error){
s=entry.content.$t;a=s.indexOf("<img");b=s.indexOf("src=\"",a);c=s.indexOf("\"",b+5);d=s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))
{thumburl[relatedTitlesNum]=d;} else {if(typeof(defaultnoimage) !== 'undefined') thumburl[relatedTitlesNum]=defaultnoimage; else thumburl[relatedTitlesNum]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizqAj8-eTYQUrjlEQOfML3JOWosbNweGEPZz4DEg3vrLHXf1wuU7HVqK1NLuPzKkXFNx7ndF-7WBmQ6s8u84Ib6WKNUEI1ogM5zbjSLoH_qHqG0yn8mEgbZ3Nt3yt21VsDyMDn5weINahF/s1600/no_image.jpg";}
}
if(relatedTitles[relatedTitlesNum].length>35) relatedTitles[relatedTitlesNum]=relatedTitles[relatedTitlesNum].substring(0, 35)+"...";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
}
}
}
}
function removeRelatedDuplicates_thumbs() {
var tmp = new Array(0);
var tmp2 = new Array(0);
var tmp3 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains_thumbs(tmp, relatedUrls[i]))
{
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp3.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
tmp3[tmp3.length - 1] = thumburl[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
thumburl=tmp3;
}
function contains_thumbs(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels_thumbs(current) {
var splitbarcolor;
if(typeof(splittercolor) !== 'undefined') splitbarcolor=splittercolor; else splitbarcolor="#DDDDDD";
for(var i = 0; i < relatedUrls.length; i++)
{
if((relatedUrls[i]==current)||(!relatedTitles[i]))
{
relatedUrls.splice(i,1);
relatedTitles.splice(i,1);
thumburl.splice(i,1);
i--;
}
}
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
if(relatedTitles.length>0) document.write('<h2>'+relatedpoststitle+'</h2>');
document.write('<div style="clear: both;"/>');
while (i < relatedTitles.length && i < 20 && i<maxresults) {
document.write('<a style="text-decoration:none;padding:5px;float:left;');
if(i!=0) document.write('border-left:solid 0.5px '+splitbarcolor+';"');
else document.write('"');
document.write(' href="' + relatedUrls[r] + '"><img style="width:200px;height:120px;border:0px;" src="'+thumburl[r]+'"/><br/><div style="padding-left:3px;height:65px;border: 0pt none ; margin: 3px 0pt 0pt; padding: 0pt; font-style: normal; font-variant: normal; font-weight: normal; font-size: 12px; line-height: normal; font-size-adjust: none; font-stretch: normal;">'+relatedTitles[r]+'</div></a>');
i++;
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
}
document.write('</div>');
relatedUrls.splice(0,relatedUrls.length);
thumburl.splice(0,thumburl.length);
relatedTitles.splice(0,relatedTitles.length);
}
//]]>
</script>
</b:if>
Masih dihalaman Edit HTML cari <data: post.body /> dan di bawahnya pastekan Code HTML berikut. Apabila Anda tidak menemukan <data: post.body />, maka Anda dapat menempelkannya tepat di bawah <div class = 'post-footer-line post-footer-line-1'> </ div>.
<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("<data:post.url/>");
</script>
</div></b:if>
Anda telah berhasil menampilkan artikel terkait di bawah tulisan di blogger. Silahkan anda tinjau kembali postingan Anda untuk melihat apakah semuanya bekerja secara berurutan atau tidak.
Semoga Metode ini bisa membantu anda dalam menampilkan artikel terkait dibawah postingan di blogger. Jika Anda memiliki pertanyaan, maka jangan merasa malu untuk bertanya.
March 11, 2018
Tags :
Tutorial
Subscribe by Email
Follow Updates Articles from This Blog via Email
No Comments