Membuat Artikel Terkait Dengan CSS

Jumpa lagi dengan artikel teranyar saya yang membahas cara memasang artikel terkait atau Related Post dengan menggunakan CSS.

Sebelumnya artikel ini sudah banyak yang buat tetapi ada sedikit perbedaan dengan artikel atau tips yang saya buat ini, karena saya sudah mengincludekan kode CSS di dalamnya sehingga bisa terlihat lebih menarik.

Kegunaan memasang related post ini adalah supaya pengunjung bisa menikmati lagi artikel-artikel di blog sobat yang masih berhubungan dengan artikel yang sudah sobat bikin sebelumnya dan tentunya juga bisa membuat pengunjung bisa lebih betah duduk manis sambil menikmati artikel-artikel di blog sobat.

Tidak mengulur waktu lebih banyak lagi, langsung saja kita menuju ke TKP.

Langkah pertama yang perlu sobat lakukan adalah mengcopy kode CSS di bawah ini kemudian letakkan sebelum kode ]]></b:skin>.

.adit-terkait{margin:0 0 10px 0;color:#666666;}.sidebar a{text-decoration:none;color:#666666;}
.adit-terkait a:hover{text-decoration:none;color:#3C88B2;}
.adit-terkait h3{color:#414445;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhk9xOH9Nb6i_yy1RTe-YG-4BNPUn9PAFwUqyt2bzrVsPO8EnkFWn36R5Y6zXNQzvAeQ7h53PHLQN2jRMxna7vKBn1uJgbnM-MtDhNVVDH-geHCmSiktMR1O7EOKrcKIV8-6zCcE82S-8c/s0/widget-title-bg.png) left repeat-y;font-size:16px;line-height:16px;font-family:Arial,Helvetica,Sans-serif;font-weight:bold;margin:0 0 10px 0;padding:10px;text-shadow:0 1px 0 #fff;}
.adit-terkait ul{list-style-type:none;margin:0px;padding:0px;}
.adit-terkait ul li{padding:7px 0px 0px 16px;margin:16px;background:url(http://b.static.ak.fbcdn.net/rsrc.php/v1/yb/r/GsNJNwuI-UM.gif) left 11px no-repeat;border-bottom:1px solid #E9E9E9;}
.adit-isi{background:#F6F8F8;border:1px solid #DBE2E0;padding:10px}.adit-isi:hover{border:1px solid #90C2D7;}
.adit-isi a{color:#666666;text-decoration:none;font-family:Arial,Helvetica,Sans-serif}
.adit-isi a:hover{color:#3c88b2;text-decoration:underline}

Setelah langkah di atas, selanjutnya sobat cari kode seperti ini
<div style='clear: both;'/> <!-- clear for photos floats -->

Copy paste kode berikut sebelum atau di atas kode yang sobat cari.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div style='background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiPDO1KkX1CeElAnN8Bno5vLQhrk8I7xEppsproa7abLTnDf2_f9ap4xuiczINlXSJXL32fAPuD-duczxYLOm0-DQeph2pTdS79hX8C5HiMxRSL2qlsSJhZhiAYXETI8zYMOiQdWkk-gDLJ/s200/Download+Lable.gif) no-repeat;height:80px; width:450px;'><h3 style='color:#555;margin:0 0 10px 0;padding:30px 0px 0px 20px;font-family:arial;font-size:16px;line-height:20px;text-align:center;'>Baca yang lainnya juga ! ! !</h3></div>
<div class='adit-isi' style='margin:0; padding:10px;height:200px;overflow:auto;'>
<div class='adit-terkait' id='aditya'/>
<script type='text/javascript'>
var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 5;
function listEntries10(json) {
  var ul = document.createElement(&#39;ul&#39;);
  var maxPosts = (json.feed.entry.length &lt;= maxNumberOfPostsPerLabel) ?json.feed.entry.length : maxNumberOfPostsPerLabel;
  for (var i = 0; i &lt; maxPosts; i++) {
    var entry = json.feed.entry[i];
    var alturl;
    for (var k = 0; k &lt; entry.link.length; k++) {
      if (entry.link[k].rel == &#39;alternate&#39;) {
        alturl = entry.link[k].href;break;
      }
    }
  var li = document.createElement(&#39;li&#39;);
  var a = document.createElement(&#39;a&#39;);
  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 &lt; json.feed.link.length; l++) {
  if (json.feed.link[l].rel == &#39;alternate&#39;) {
    var raw = json.feed.link[l].href;
    var label = raw.substr(homeUrl3.length+13);
    var k;
    for (k=0; k&lt;20; k++) 
    label = label.replace(&quot;%20&quot;, &quot; &quot;);
    var txt = document.createTextNode(label);
    var h = document.createElement(&#39;h3&#39;);
    h.appendChild(txt);
    var div1 = document.createElement(&#39;div&#39;);
    div1.appendChild(h);
    div1.appendChild(ul);
    document.getElementById(&#39;aditya&#39;).appendChild(div1);
  }
 }
}

function search10(query, label) {
  var script = document.createElement(&#39;script&#39;);
  script.setAttribute(&#39;src&#39;, query + &#39;feeds/posts/default/-/&#39;+ label +&#39;?alt=json-in-script&amp;callback=listEntries10&#39;);
  script.setAttribute(&#39;type&#39;,&#39;text/javascript&#39;);
  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 = &quot;<data:label.name/>&quot;;
var test = 0;
for (var i = 0; i &lt; labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length &lt;= maxNumberOfLabels) ?labelArray.length : maxNumberOfLabels;
if (numLabel &lt; maxLabels) {
  search10(homeUrl3, textLabel);
  numLabel++;
 }
}
</b:loop>
</b:loop>
</script>
</div>
<div style='font-size:9px;text-align:center;font-color:#ececec;font-family:Arial, Verdana;'>Pengen Related Post seperti ini?<br/>klik di <a href='http://adityameilaz.blogspot.com/2011/02/membuat-artikel-terkait-dengan-css.html' target='_blank'>sini!</a>
</div>
</b:if>

Simpan template sobat dan lihat hasil dari kerja sobat tersebut.
Semoga bermanfaat...

Gabung ke group:

Follow @aditya_m_r

Share