Cara Membuat Artikel Terkait - Related Post Part II [With New Style]

Met siang teman-teman semua, hari ini saya ingin share kembali tentang bagaimana Cara Membuat Artikel Terkait - Related Post Part II [With New Style]. Sebenarnya ini adalah tutorial blog by request dari sobat Endigolabs dan kebetulan juga saya ada waktu langsung saja saya postingkan tutorial nya hari ini.

Ok, jika sebelumnya saya juga telah membuat tutorial tentang bagaimana Cara Membuat Artikel Terkait Dengan Kolom Scroll Down di Bawah Postingan Blogspot, maka anggap saja tutorial kali ini adalah Update terbarunya, hehehe.

Fungsi dari pemasangan Artikel Terkait ini di dalam blog adalah untuk meningkatkan/menaikkan pageview blog kemudian untuk menampilkan artikel-artikel kita yang lama namun masih terkait dengan artikel baru yang masih 1 label.

Keistimewaan Artikel Terkait Part II With New Sytle ini adalah tentu dari penampilan lebih terlihat FRESH (segar dilihat) lalu akan memunculkan artikel dari label yang lainnya jika kita membuat 1 postingan dengan 2 label. Lalu saya edit sedikit scriptnya biar judul dari Artikel Terkait nya bisa kedap-kedap alias blink-blink sehingga para pembaca bisa melihat dan tertarik untuk membaca Artikel Terkait lainnya yang ada di dalam blog.

lihat screenshoot

Mantab toh? Keren toh? hahaha.

Ok, langkah-langkahnya adalah sebagai berikut:

1. Login ke akun blogspot teman-teman >> Design/Tataletak >> Edit HTML >> klik check box Expand Template Widget,

2. Cari kode: ]]></b:skin>

3. Lalu copy paste kode dibawah ini persis berada di atas kode ]]></b:skin>

/* Kode CSS untuk Artikel Terkait */
#underpost{
font-family:Arial, Tahoma, Verdana, Sans-serif;/* Jenis font. */
font-size:small;/* Ukuran font. */
color:#0080FF;/* Warna teks. */
background:#81BEF7;/* Warna latar belakang. */
clear:both;
float:left;
width:410px;/* Lebar area artikel terkait. Sesuaikan dengan lebar main-wrapper (kolom posting) anda. */
-moz-border-radius:10px;
border:0;
height:auto;
margin:0 auto;
padding:10px;
}
#underpost h2{
font-family:'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif;/* Jenis font heading. */
font-size:large;/* Ukuran font heading. */
color:#0080FF;/* Warna teks heading. */
margin-bottom:5px;
border-bottom:1px solid #0080FF;/* Warna garis pembatas dibawah teks heading. */
padding:0 0 5px;
}
#underpost a,#underpost a:link,#underpost a:active,#underpost a:visited{
color:#0B243B;/* Warna link */
text-decoration:none;
}
#underpost a:hover{
text-decoration:underline;
}
#artikel-terkait{
overflow:auto;
width:auto;
height:400px;/* Tinggi dari artikel terkait */
padding:10px;
}

4. Lalu cari kode ini lagi: <p><data:post.body/></p>

5. Copy paste kan kode di bawah ini persis berada di bawah kode <p><data:post.body/></p>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='underpost'>
<div class='similiar'>

<div class='widget-content'>
<h2><blink>Artikel Terkait Lainnya Seputar:</blink></h2>
<div id='artikel-terkait'>
<div id='relposts'/><br/><br/>
<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;

maxNumberOfPostsPerLabel = 100;
maxNumberOfLabels = 3;

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;b&#39;);
h.appendChild(txt);
var div1 = document.createElement(&#39;div&#39;);
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById(&#39;relposts&#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>

</div>
</div>
</b:if>

6. Jika sudah maka tinggal klik Save Templates dan lihat hasilnya.

Note:
a. Teman-teman bisa ubah untuk tinggi dan lebarnya kolom dengan melihat keterangan yang ada di dalam kode,
b. Untuk merubah kode warna background dan lain-lain silahkan lihat di sini Kode Warna,

NB:
Saya tambahkan sedikit pict antara Artikel Terkait yang lama dengan yang sekarang saya buat, sehingga teman-teman bisa melihat perbedaannya.

pict Artikel Terkait 1 (kolom scroll down)

pict Artikel Terkait 2 (with New Style)

Kira-kira seperti itulah Cara Membuat Artikel Terkait - Related Post Part II [With New Style], semoga bisa bermanfaat dan selamat mencoba.