Cara Dan Metode Menciptakan Related Post Simple Keren Di Blog - Works! - Template Blogger SEO Friendly Cepat Terindeks Google Terbukti 100% Download Gratis

cara Dan Teknik Membuat, Menampilkan, atau Memasang Related Post Simple, Keren, di Bawah Postingan Blog - Works!

SIMPLE tapi keren. Itulah widget related posts, posting terkait, artikel terkait, atau tulisan terkait yang akan muncul di bawah postingan blog Anda, dengan memasang kode-kode di bawah ini.

Kini banyak related post yang tidak muncul di blog sebab kodenya disimpan di Google Code. Sedangkan Google Code sudah tidak aktif lagi alias dilarang Google.

Jika Anda memasang Related Post with Thumbnail Image (Gambar), tapi postingan kebanyakan tidak ada gambar, kemungkinan besar related post juga tidak akan muncul.

cara Dan Teknik Memasang Related Post Simple

Kode widget related post ini di-share Help Logger. Yang CB share berikut ini sudah dimodifikasi sedikit, termasuk menghapus sisipan linknya.

1. Template > Edit HTML
2. Copas instruksi berikut ini di atas instruksi </head>

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {margin: 15px 0px;}
#related-posts h2 {font-size: 25px;font-weight: normal;color: #666;text-shadow: 1px 0px 2px #888;margin-bottom: 0.75em;}
#related-posts a {font-size: 14px;color: #949494;border-bottom:1px dotted #E2E2E2;display:block;padding:13px;text-decoration: none;}
#related-posts a:hover {color: #c00;background: #F4F4F4;}
#related-posts ul {padding: 0px;list-style-type: none;background: #f9f9f9;border-left: 5px solid #f2f2f2;}
#related-posts li {padding: 0px;}
</style>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write('<h2>'+relatedpoststitle+'</h2>')}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>

3. Cari (Ctrl+F) kode <b:includable id='postQuickEdit' var='post'>
4. Copas instruksi berikut ini di atas kode </b:includable> yang ada di atas kode <b:includable id='postQuickEdit' var='post'>

Keterangan:

PASANG KODE DI SINI
</b:includable>
<b:includable id='postQuickEdit' var='post'>

<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>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=6"' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script>
</div>
</b:if>

5. Save!

UPDATE
Desain Related Post Lebih Simple Lagi!
Berikut ini instruksi Posting Terkait yang lebih simple lagi. Seperti ini penampakannya:

1. Simpan instruksi berikut ini di atas instruksi </head>

<b:if cond='data:blog.pageType == "item"'>
<style>
#related-posts {margin:15px 0;}
.related-post-title{font-size:1em;margin:8px 0px;padding:3px 0;text-transform:uppercase}
#related-posts a {font-size: 1.1em;color:#2b2b2b;}
#related-posts a:hover {text-decoration: none;color: #c00;}
#related-posts ul {list-style-type: none;padding: 0px;color: #000000;}
#related-posts li {padding: 5px 0;border-bottom: 1px dashed #E2E2E2;list-style: inside;}
</style>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(json){for(var i=0;i<json.feed.entry.length;i++){var entry=json.feed.entry[i];relatedTitles[relatedTitlesNum]=entry.title.$t;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){relatedUrls[relatedTitlesNum]=entry.link[k].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var tmp=new Array(0);var tmp2=new Array(0);for(var i=0;i<relatedUrls.length;i++){if(!contains(tmp,relatedUrls[i])){tmp.length+=1;tmp[tmp.length-1]=relatedUrls[i];tmp2.length+=1;tmp2[tmp2.length-1]=relatedTitles[i]}}relatedTitles=tmp2;relatedUrls=tmp}function contains(a,e){for(var j=0;j<a.length;j++){if(a[j]==e){return true}};return false}function printRelatedLabels(currenturl){for(var i=0;i<relatedUrls.length;i++){if(relatedUrls[i]==currenturl){relatedUrls.splice(i,1);relatedTitles.splice(i,1)}}var r=Math.floor((relatedTitles.length-1)*Math.random());var i=0;if(relatedTitles.length>1){document.write()}document.write('<ul>');while(i<relatedTitles.length&&i<20&&i<maxresults){document.write('<li><a href="'+relatedUrls[r]+'">'+relatedTitles[r]+'</a></li>');if(r<relatedTitles.length-1){r++}else{r=0}i++}document.write('</ul>');relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length);}
//]]>
</script>
</b:if>

2. Simpan instruksi berikut ini di bawah instruksi <data:post.body> yang kedua atau ketiga:

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<h4 class='related-post-title'>Related Posts</h4>
<b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <b:if cond='data:blog.pageType == "item"'> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> <script type='text/javascript'> var maxresults=5; removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>"); </script>
</div>
</b:if>

cara Dan Teknik Menampilkan Related Post Simple Lainnya:

Kode CSS:
Simpan di atas ]]></b:skin>

#related-posts {float:left;width:100%;margin:10px 0;padding:0 0 10px}
#related-posts .widget h2,#related-posts h3{font:18px Oswald;color:#000;text-transform:none;margin:0 0 10px;padding:0;font-weight:500}
#related-posts a{color:#0973CF;font:14px Arial,Sans-serif;}
#related-posts li{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgs1Zt_PFYV4MUV3Xx9NDvftb99Daq5UIVY3xTHvCUZ3huntXtjLeqB1Sj53Wmp8YmURrTiaO1DP6MnSEAi3_oDTVQ8Ggsy1nayGIv8qu9RpKg8Y6YXIJOr7AATAtc06CvX7P8eTFvAXU/s1600/bullet-list.gif) no-repeat 0 10px;text-indent:0;line-height:1.3em;border-bottom:1px dotted #ccc;margin:0;padding:3px 0 8px 12px}
#related-posts a:hover{color:#c00;text-decoration:none}
#related-posts .widget{margin:0;padding:0}
#related-posts ul{list-style:none;margin:0;padding:0}

HTML/JAVASCRIPT:
Simpan di atas </head>

<script type='text/javascript'>
var numposts = 5;
var showpostthumbnails = false;
var showpostdate = false;</script>
<script type='text/javascript'>
var relatedpoststitle="Related Posts";
</script>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles=new Array();var relatedTitlesNum=0;var relatedUrls=new Array();function related_results_labels(c){for(var b=0;b<c.feed.entry.length;b++){var d=c.feed.entry[b];relatedTitles[relatedTitlesNum]=d.title.$t;for(var a=0;a<d.link.length;a++){if(d.link[a].rel=="alternate"){relatedUrls[relatedTitlesNum]=d.link[a].href;relatedTitlesNum++;break}}}}function removeRelatedDuplicates(){var b=new Array(0);var c=new Array(0);for(var a=0;a<relatedUrls.length;a++){if(!contains(b,relatedUrls[a])){b.length+=1;b[b.length-1]=relatedUrls[a];c.length+=1;c[c.length-1]=relatedTitles[a]}}relatedTitles=c;relatedUrls=b}function contains(b,d){for(var c=0;c<b.length;c++){if(b[c]==d){return true}}return false}function printRelatedLabels(a){for(var b=0;b<relatedUrls.length;b++){if(relatedUrls[b]==a){relatedUrls.splice(b,1);relatedTitles.splice(b,1)}}var c=Math.floor((relatedTitles.length-1)*Math.random());var b=0;if(relatedTitles.length>1){document.write("<h3>"+relatedpoststitle+"</h3>")}document.write("<ul>");while(b<relatedTitles.length&&b<20&&b<maxresults){document.write('<li><a href="'+relatedUrls[c]+'">'+relatedTitles[c]+"</a></li>");if(c<relatedTitles.length-1){c++}else{c=0}b++}document.write("</ul>");relatedUrls.splice(0,relatedUrls.length);relatedTitles.splice(0,relatedTitles.length)};
//]]>
</script>

Kode JAVASCRIPT:

Simpan di bawah <data:post.body/> yang kedua atau ketiga, atau di atas instruksi <div class='post-footer'>

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels("<data:post.url/>");
</script>
</div>
<div class='clear'/>
<div style='clear: both;'/>
</b:if>

Demikian cara Dan Teknik Memasang Related Post Simple Keren di bawah Postingan Blog, khususnya untuk blog yang minim gambar dan yang related postnya tidak berfungsi.

Good Luck & Happy Blogging! (http://www.contohblog.com).*

Sumber http://www.contohblog.com/

Cara Dan Metode Menciptakan Related Post Simple Keren Di Blog - Works!

4/ 5

Oleh Unknown

Unknown Oktober 04, 2016

Main Menu Bar