Cara Memasang Artikel Terkait di Bawah Postingan Blog

Ingin Tahu Cara Memasang Artikel Terkait di Bawah Postingan Blog ? Jika Sahabat Ingin Cara Memasang Artikel Terkait di Bawah Postingan Blog disini saya akan membahasnya buat sahabat semuanya tetapi sebelum saya lanjutkan pembahasannya silahkan simak juga postingan sebelumnya tentang Info Kursus SEO dan Internet Marketing Terbaik di Jakarta 2014 serta Cara Membuat Dynamic Heading SEO Friendly nah bagi sahabat yang ingin membuat postingan terkait tepat dibawah artikel setiap postingan blog Sahabat disini saya akan memberikan tutorialnya buat sahabat semuanya, untuk cara-caranya silahkan simak berikut ini:

Contoh Gambar Artikel Terkait di Bawah Postingan Blog

Untuk Sahabat yang ingin membuat artikel terkait tepat berada dibawah postingan blog untuk tata caranya atau cara pemasangannya silahkan simak berikut ini; dan Contohnya bisa Sahabat lihat tepat pada gambar diatas berikut;

1. Pada langkah pertama silahkan masuk pada menu TEMPLATE lalu EDIT HTML kemudian cari kode <data:post.body/> dan Jika ada 2 sampai 3 kode sama, silahkan pilih saja yang paling bawahnya lalu Simpan kode dibawah ini tepat dibawah kode <data:post.body/>

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

<p style='font-style:bold;'>Artikel Lainnya Yang Mungkin Belum Anda Baca:</p>

<div class='rbbox'>

<div style='margin:0; padding:10px;height:150px;overflow:auto;border:1px solid #ccc;'>

<div id='albri'/>

<script type='text/javascript'>

var homeUrl3 = &quot;<data:blog.homepageUrl/>&quot;;

var maxNumberOfPostsPerLabel = 4;

var maxNumberOfLabels = 15;

maxNumberOfPostsPerLabel = 25;

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;albri&#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>

<a href='http://www.jasaseoblog.com/'>Jasa SEO Blog - Cara Belajar SEO</a></div>

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

</div>

</b:if>

2. Jika pada langkah yang pertama sudah sahabat lewati sekarang ke bagian ke 2 yaitu penambahan kode CSS'nya dan pastikan anda masih berada pada dalam pengeditan TEMPLATE blog sahabat dan pada langkah pertama tidak usah disimpan dulu langsung saja ke bagian yang kedua ini, Selanjutnya Sahabat cari kode ]]></b:skin> lalu copy paste kode dibawah ini tepat diatasnya kode kode ]]></b:skin>

.rbbox{border: 1px solid #000000;padding: 5px;

background-color: #F2F2F2;-moz-border-radius:5px; margin:5px;}

.rbbox:hover{background-color: #F0F8FF;}

.rbbox ul li {

display : block;

background : url(http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png) no-repeat 0px 0;

margin-left : -10px;

padding-top : 0;

padding-right : 0px;

padding-bottom : 1px;

padding-left : 20px;

margin-bottom : 5px;

line-height : 1em;

border-bottom:1px dotted #cccccc;}

Jika sudah selesai dan Sahabat yakin pada langakah 1 dan langkah 2 telah terlewati kemudian Simpan Template Sahabat dan lihat hasilnya apakah sudah muncul atau belum?

Keterangan Tambahan Tutorial Diatas:

Artikel Lainnya Yang Mungkin Belum Anda Baca:= bisa diganti sesuai dengan keinginan sahabat.

height:170px = untuk mengatur tinggi kotakan artikel terkait

maxNumberOfPostsPerLabel = 25;  = jumlah posting terkait yang ingin Sahabat tampilkan

maxNumberOfLabels = 3;  = jumlah label terkait yang sahabat ingin ditampilkan

background-color: #F2F2F2; = warna background kotakan artikel terkait serta bisa diganti sesuai dengan selera sahabat.

background-color: #F0F8FF; = warna background saat kursor sahabat menyorot kolom tersebut

http://i1237.photobucket.com/albums/ff469/indolaron/icon/005.png = icon atau gambar didepan link tersebut.

Untuk kebutuhan kode warna html silahkan CEK DISINI dan untuk Copas Kode Kode diatas silahkan AMBIL DISINI

Nah itu saja postingan Pada Malam kali ini menyangkut dengan Cara Memasang Artikel Terkait di Bawah Postingan Blog Semoga tips serta tutorialsederhana ini bermanfaat buat sahabat semuanya serta atas kunjungannya Kami ucapkan Terima Kasih.