cara membuat artikel terkait dengan cepat dan mudah
Menambahkan artikel terkait di sebuah blog atau website merupakan sesuatu yang wajib, karena dengan artikel terkait akan menarik pengunjung untuk membuka dan membaca artikel atau postingan kita yang lain sehingga page view kita pun semakin banyak. Nah kali ini saya akan membagikan bagaimana caranya membuat artikel terkait atau related pos di blog atau website. Kali ini saya akan membagikan cara membuat artikel terkait menggunakan gambar dan tidak menggunakan gambar. Jadi sobat bisa pilih lebih bagus menggunakan yang mana.
Baiklah langsung sajaa disimak cara membuat relate post atau artikel terkait dibawah ini:
baca juga : cara cepat mendapatkan uang dari blog
Pertama kita akan mulai cara membuat artikel terkait tanpa gambar, contohnya bisa sobat lihat pada gambar dibawah ini:
Caranya :
pertama sobat masuk ke pengeditan template, jika belum tahu cara edit template silahkan baca disini
selanjutnya sobat cari script <data:post.body/> (yang pertama), untuk memudahkan pencarian sobat bisa menggunakan CTRL+F kemudian tulis script yang ingin dicari.
kemudian sobat copas script berikut ini dibawah script <data:post.body/>
<b:if
cond='data:blog.pageType
== "item"'><div
style='margin-top: 10px;'><strong>Artikel Terkait</strong> <div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px
solid #ccc;'> <div id='ardi33'/>
<script type='text/javascript'> var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel
= 4; var maxNumberOfLabels
= 10; maxNumberOfPostsPerLabel = 100; maxNumberOfLabels = 3; function listEntries10(json) { var ul
= document.createElement('ul'); var maxPosts = (json.feed.entry.length <=
maxNumberOfPostsPerLabel) ? json.feed.entry.length
: maxNumberOfPostsPerLabel; for (var i = 0; i
< maxPosts; i++) { var entry = json.feed.entry[i]; var alturl; for (var k = 0; k < entry.link.length; k++) { if (entry.link[k].rel == 'alternate') { alturl
= entry.link[k].href;
break; } } var li = document.createElement('li'); var a = document.createElement('a');
a.href = alturl; if(a.href!=location.href) { var txt = document.createTextNode(entry.title.$t); a.appendChild(txt);
li.appendChild(a); ul.appendChild(li); } } for (var l = 0; l
< json.feed.link.length;
l++) { if (json.feed.link[l].rel
== 'alternate') { var raw = json.feed.link[l].href; var label = raw.substr(homeUrl3.length+13);
var k; for (k=0; k<20; k++) label = label.replace("%20",
" "); var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt); var
div1 = document.createElement('div');
div1.appendChild(h); div1.appendChild(ul); document.getElementById('ardi33').appendChild(div1); } } } function search10(query, label)
{ var script = document.createElement('script');
script.setAttribute('src', query +
'feeds/posts/default/-/' + label + '?alt=json-in-script&callback=listEntries10');
script.setAttribute('type',
'text/javascript'); document.documentElement.firstChild.appendChild(script);
} var labelArray = new
Array(); var numLabel =
0; <b:loop values='data:posts' var='post'> <b:loop values='data:post.labels'
var='label'> textLabel
= "<data:label.name/>"; var test = 0; for (var i = 0; i
< labelArray.length;
i++) if (labelArray[i] == textLabel) test = 1; if
(test == 0) { labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ? labelArray.length
: maxNumberOfLabels; if (numLabel
< maxLabels) {
search10(homeUrl3, textLabel); numLabel++;
} } </b:loop> </b:loop> </script> </div> <script
type='text/javascript'>RelPost();</script></div>
</div> </b:if>
|
ganti teks yang berwarna merah sesuai dengan keinginan sobat, kemudian simpan dan lihat hasilnya.baca juga : cara mendaftarkan blog / website di alexa gratis
Cara yang kedua yaitu membuat artikel terkait dengan gambar, contohnya bisa sobat lihat dibawah ini:
Caranya :
caranya sama seperti langkah membuat artikel terkait pertama, tapi untuk yang menggunakan gambar scriptnya berbeda, silahkan copas scriptnya dibawh ini:
<div
class='related-post' id='related-post'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>
"<data:label.name/>"<b:if
cond='data:label.isLast
!= "true"'>,</b:if>
</b:loop></b:if>];
var relatedPostConfig = {
homePage:
"<data:blog.homepageUrl/>",
widgetTitle:
"<h4>Related Post:</h4>",
numPosts: 4,
summaryLength:
370,
titleLength:
"auto",
thumbnailSize:
80,
noImage:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC",
containerId:
"related-post",
newTabLink:
false,
moreText:
"Read More",
widgetStyle:
3,
callBack:
function() {}
};
</script>
<script
type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,showRelatedPost;(function(n,m,k){var d={widgetTitle:"<h4>Artikel
Terkait:</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,moreText:"Baca
Selengkapnya",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="related-post-style-'+A+'">',b=d.newTabLink?'
target="_blank"':"",y='<span
style="quot;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)+"…":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)+"…":"";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><img
alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"
title="'+t+'"><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+">"+d.moreText+"</a></span>"+y+"</li>"}else{if(A==3||A==4){c+='<li
class="related-post-item" tabindex="0"><a
class="related-post-item-title" href="'+v+'"'+b+'><img
alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"
title="'+t+'"></a><div
class="related-post-item-tooltip"><a
class="related-post-item-title" title="'+t+'"
href="'+v+'"'+b+">"+w+"</a></div>"+y+"</li>"}else{if(A==5){c+='<li
class="related-post-item" tabindex="0"><a
class="related-post-item-wrapper" href="'+v+'"
title="'+t+'"'+b+'><img alt="thumbnail"
class="related-post-item-thumbnail" src="'+r+'"
width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"
title="'+t+'"><span
class="related-post-item-tooltip">'+w+"</span></a>"+y+"</li>"}else{if(A==6){c+='<li><a
class="related-post-item-title" title="'+t+'" href="'+v+'"'+b+">"+w+'</a><div
class="related-post-item-tooltip"><img
alt="thumbnail" class="related-post-item-thumbnail" src="'+r+'" width="'+d.thumbnailSize+'"
height="'+d.thumbnailSize+'"
title="'+t+'"><span
class="related-post-item-summary"><span
class="related-post-item-summary-text">'+u+"</span></span>"+y+"</div></li>"}else{c+='<li><a
title="'+t+'"
href="'+v+'"'+b+">"+w+"</a></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>
|
Jika sobat mengalami kesulitan untuk membuat relate post dengan gambar sobat bisa coba cara yang satu ini yaitu membuat relate post menggunakan linkwithin.
Pertama sobat masuk ke situsnya terlebih dahulu http://www.linkwithin.com/.
selanjutnya sobat isikan data-data blog sobat lalu klik Get Widget!
setelah itu sobat klik Instal Widget, lalu ikuti langkah-langkah yang sudah tertera disitu.
contoh related post menggunakan linkwithin adalah seperti ini
Oke sobat sekian dulu untuk tutorial cara membuat artikel terkait dengan cepat dan mudah kali ini, semoga bermanfaat.
Untuk tutorial yang lain silahkan KLIK DISINI
Terimakasih.
Artikel Terbaru :