Membuat Related Post / Artikel Terkait Ala Arlina Design

Cara membuat artikel terkait atau related post sangat berguna untuk pengunjung melihat postingan lainnya yang masih terkait dalam postingan tersebut, biasanya akan menampilkan postingan atau artikel dengan perlabel.

Tidak hanya berguna untuk pengunjung atau visitor, artikel terkait atau related post juga mempercantik tampilan template blog Anda. Apa lagi related post ala arlina mempunyai disain yang elegan dan enak di pandang oleh pengunjung.

Membuat Related Post / Artikel Terkait

Langkah pertama :

Login ke Blogger > Tema > Edit HTML. Lalu Copy kode CSS di bawah ini di bawah kode </style> atau di atas </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type='text/css'>

/* Related Posts */

#related-post {margin:0 auto;padding:0;text-align:center;}

#related-post h4{font-size:14px;margin:0 0 10px 0;background:#4f93c5;color:#fff;padding:15px 20px;font-weight:700;position:relative;text-align:left;text-transform:uppercase;overflow:hidden}

#related-post h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;background-color:#4786b5;color:#fff;top:0;right:0;padding:16px 20px;position:absolute}

.relhead {font-size:100%;font-weight:normal;line-height:150%;padding:0 0 10px 0;overflow:hidden;box-shadow:inset 0 0 0 1px #e9e9e9;}

#relate-summary .news-text{display:block;text-align:left;font-weight:normal;color:#888;font-size:12px;margin-top:10px}

ul#relate-summary{margin:0 auto;padding:0 10px;list-style:none;word-wrap:break-word}

ul#relate-summary li{position:relative;list-style:none outside none;overflow:hidden;margin:0 10px;padding:10px 0;border-bottom:1px solid rgba(0,0,0,0.12)}

ul#relate-summary li:last-child{border:0}

ul#relate-summary li a{display:block;}

ul#relate-summary li img{background-color:#fafafa;display:block;width:100%;height:auto;max-width:90px;max-height:70px;vertical-align:middle;overflow:hidden;float:left;margin:0 10px 0 0;border:1px solid rgba(0,0,0,0.12);padding:3px;background:#fff;transition:all 1s ease-out}

ul#relate-summary li:hover img {opacity:0.96;}

ul#relate-summary li a.relinkjdulx{position:relative;color:#4c6fb8;display:block;font-weight:700;line-height:normal;overflow:hidden;text-align:left;text-transform:none}

ul#relate-summary li a.relinkjdulx:hover{color:#f8695f;}</style></b:if>

Langkah kedua :

Silakan Taruh kode dibawah ini ke bawah kode </article> atau yang lainnya, mungkin saja di setiap template berbeda

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<script type='text/javascript'>

//<![CDATA[

//Related Post

var relnojudul = 0;

var relmaxtampil = 5;

var numchars = 120;

var reljudul=new Array();var relurls=new Array();var relcuplikan=new Array();var relgambar=new Array();function saringtags(g,h){var e=g.split("<");for(var f=0;f<e.length;f++){if(e[f].indexOf(">")!=-1){e[f]=e[f].substring(e[f].indexOf(">")+1,e[f].length)}}e=e.join("");e=e.substring(0,h-1);return e}function relpostimgcuplik(h){for(var e=0;e<h.feed.entry.length;e++){var g=h.feed.entry[e];reljudul[relnojudul]=g.title.$t;postcontent="";if("content" in g){postcontent=g.content.$t}else{if("summary" in g){postcontent=g.summary.$t}}relcuplikan[relnojudul]=saringtags(postcontent,numchars);if("media$thumbnail" in g){postimg=g.media$thumbnail.url}else{postimg="http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF"}relgambar[relnojudul]=postimg;for(var f=0;f<g.link.length;f++){if(g.link[f].rel=="alternate"){relurls[relnojudul]=g.link[f].href;break}}relnojudul++}}function contains(a,e){for(var f=0;f<a.length;f++){if(a[f]==e){return true}}return false}function artikelterkait(){var v=new Array(0);var w=new Array(0);var x=new Array(0);var A=new Array(0);for(var u=0;u<relurls.length;u++){if(!contains(v,relurls[u])){v.length+=1;v[v.length-1]=relurls[u];w.length+=1;w[w.length-1]=reljudul[u];x.length+=1;x[x.length-1]=relcuplikan[u];A.length+=1;A[A.length-1]=relgambar[u]}}reljudul=w;relurls=v;relcuplikan=x;relgambar=A;for(var u=0;u<reljudul.length;u++){var B=Math.floor((reljudul.length-1)*Math.random());var i=reljudul[u];var s=relurls[u];var y=relcuplikan[u];var C=relgambar[u];reljudul[u]=reljudul[B];relurls[u]=relurls[B];relcuplikan[u]=relcuplikan[B];relgambar[u]=relgambar[B];reljudul[B]=i;relurls[B]=s;relcuplikan[B]=y;relgambar[B]=C}var r=0;var D=Math.floor((reljudul.length-1)*Math.random());var z=D;var q;var t=document.URL;while(r<relmaxtampil){if(relurls[D]!=t){q="<li class='news-title clearfix'>";q+="<a href='"+relurls[D]+"' rel='nofollow' target='_top' title='"+reljudul[D]+"'><div class='overlayb'></div><img src='"+relgambar[D]+"' /></a>";q+="<a class='relinkjdulx' href='"+relurls[D]+"' target='_top'>"+reljudul[D]+"</a>";q+="<span class='news-text'>"+relcuplikan[D]+" ... </span>";q+="</li>";document.write(q);r++;if(r==relmaxtampil){break}}if(D<reljudul.length-1){D++}else{D=0}if(D==z){break}}};

//]]>

</script>

<div id='related-post'>

<div class='relhead'>

  <h4><span>Artikel Terkait</span></h4>

<div class='clear'/>

          <b:loop values='data:post.labels' var='label'>

               <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;amp;callback=relpostimgcuplik&amp;amp;max-results=50&quot;' type='text/javascript'/>

          </b:loop>

          <ul id='relate-summary'>

               <script type='text/javascript'>artikelterkait();</script>

          </ul>

     </div>

</div></b:if>

Silakan Anda Save template blog Anda.

Jika mengalami error sebaiknya Anda berkomentar, agar bisa saya bantu untuk mencari solusi dari kesalahan tersebut.

Related Post