Memuat Halaman
"Membuat Artikel Terkait Dengan CSS"
Koneksi lambat? | Gunakan blog dalam versi mobile.
Tetap berusaha terhubung dengan Adityas Blog
Coba gunakan blog dalam versi mobile atau tekan F5 untuk memuat ulang halaman.

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(http://4.bp.blogspot.com/_rKLBTcXIDJY/TTXs4H5vSJI/AAAAAAAACEQ/Slo8Xf45MRg/s000/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:

Artikel Terkait

9 Respon Komentar

Unknown, said...
April 24, 2011 at 10:15 PM

sama" gan...
jgn pernah kapok main k sini... :e:

Maiser, said...
May 25, 2011 at 11:12 AM

:m:
Anw gan... kalau pake CSS eksternal biza ngga gan ???

:l:

CARA-ATSMAR, said...
July 12, 2011 at 4:54 PM

Sobat yang baek hati dan tidak sombong,pengen buat kayak punya you,,,bisa kasih tahu ga' ya caranya...? itu loh yang ada tulisan "baca juga yang lainya" trus ada gambar tangan nunjuk-nunjuk...di blog ini di posting ga...? Mohon penjelasannya and thanks bgt...!!!

CARA-ATSMAR, said...
July 13, 2011 at 4:03 AM

@CARA-ATSMAR
O,ini tho related postnya...he..he...tak kirain recent post...bisa bantuin buat cse bisa gak boss...
Thank's bgt boss buat postingannya...!!!

Unknown, said...
December 17, 2012 at 4:44 PM

GAN GIMANA MAU NGOPINYA KODE NYA KLIK KANAN NYA AJA DI DISABLE !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Unknown, said...
December 17, 2012 at 4:47 PM

:f: :f: :f: :f: :f: :f: :f: :f: :f: :f:
:a: :a: :a: :a: :a: :a: :a: :a: :a: :a:

Unknown, said...
December 17, 2012 at 4:57 PM

:16: :16: :16:
:4: :4: :4:
:3: :3: :3:
:9: :9: :9:

Unknown, said...
December 17, 2012 at 5:21 PM

@bayu naxtegal di block semua dulu gan, habis itu d Ctrl+C untuk copy.. :w:
:4:/sweat

Unknown, said...
January 11, 2013 at 2:35 PM

tenang gan ini bukan spam...minta izin pake scriptnya buat blog ane gan,,,tenag aja ada referensinya ko,ok gan

Tinggalkan Komentar Anda?

Komentar anda akan dihapus jika :
1. SPAM atau meninggalkan komentar mengandung unsur SARA
2. Berkata kasar atau kata-kata negatif lainnya
3. Meninggalkan komentar dengan link hidup
4. Komentar tidak berhubungan dengan tema
5. Jika anda ingin berlangganan "komentar" dari artikel ini, pilih link "Subscribe by email" pada bagian bawah form komentar

:a: :b: :c: :d: :e: :f:
:g: :h: :i: :j:

Emotion lainnya?