Cara Membuat Artikel Terkait di Bawah Postingan Blogspot (part 2)

Viyan Pradita Kamis, September 02, 2010

Melanjutkan postingan saya sebelumnya yaitu tentang Cara Membuat Artikel Terkait Dengan Kolom Scroll Down di Bawah Postingan Blogspot (part 1), pada cara kedua ini bedanya yaitu pada tampilannya yang bisa kita rubah warna dari background artikel terkait-nya sesuai selera kita. dan juga dengan atikel terkait part2 ini yaitu di tambah jg menu blink, pada judul artikel terkait-nya. dibandingkan dengan menu artikel terdahulu part1 tentulah artikel part2 ini lebih menarik. penasaran kan ?? lihat contoh gambar artikel terkait part2 dibawah ini.

Lihat Gambar

Ikuti langkah-langkah berikut :

1. Login ke Blogger
2. klik Tata Letak dan pilih Edit HTML
3. Kalau sudah, klik Expand Template Widget
4. Lalu cari kode berikut (Ctrl + F) : ]]></b:skin>
5. Kemudian copy paste kode dibawah ini persis berada diatas 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;
}

Keterangan :
Sebelum membuatnya sobat edit-edit dulu lebar dari kolom artikel terkait tsb. dan sobat juga bisa ubah warna backgroennya sesuai selera sobat. pada script diatas kiranya sudah cukup jelas. untuk kode warna silahkan klik disini.

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

7. Kemudian kopy paste-kan kode dibawah ini tepat 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>

8. Bila sudah klik Simpan.


Nah.. begitulah kiranya, perbedaan dengan cara part1, yaitu terletak pada menu judul artikel yang berkedip2 dan juga bisa di edit2 menu background dan lainnya.
Selamat mencoba, semoga sukses.

Ditulis Oleh :

Artikel Cara Membuat Artikel Terkait di Bawah Postingan Blogspot (part 2) ini dipublish pada hari: Kamis, September 02, 2010. Semoga artikel ini bermanfaat untuk Anda. Copy paste wajib dengan ijin saya, serta menggunakan link sumber seperti di bawah. Gunakan etika. Saya akan berlakukan DMCA COMPLAINT secara langsung tanpa pemberitahuan atas copas tanpa mengikuti ketentuan yg berlaku.

10 komentar
Terjun Ke Kolom Komentar

  1. gan saya cari kode y data:post.body kok g ada yha

    BalasHapus
  2. Memang setiap template berbeda-beda sob,, coba cari ada gak.

    BalasHapus
  3. iyah kok disayah juga ga ada data post bodynya .
    berpengaruh nga sih kalau sayah pke readmore .

    BalasHapus
  4. Gampang2 susah emank sob, coz masing2 template pasti berbeda-beda, apalagi templat bawaan dari blogger.

    sebelumnya coba lihat disini dulu sob : http://kode-blogger.blogspot.com/2010/09/cara-membuat-artikel-terkait-dengan.html

    BalasHapus
  5. arrrrrrrggggggg........kode yg ke duanya ga ada si om..:((

    BalasHapus
  6. gni caranya kalo g ada cari yang ini ~data:post.body/!~/b:if!~/p!dan pastekan sesudahnya ,,,,,,,,, dan lihat hasilnya,,,
    previewnya dsni http://gamefreefulldownload.blogspot.com/2011/04/tips-and-tric-blogspot-how-to-edit-your.html
    o ya aqw mau tanya,,

    kk koq bisa tahu code2 seperti itu,,, bsa ksh tahu kuncinya g ???

    maklum msh newbie

    waaa kgk bsa tunjukin kalo g boleh pakai tag html T_T

    yang ~ ganti dengan < dan yang ! ganti dengan >

    BalasHapus
  7. mantaappp gan, thanks yaa :)

    BalasHapus
  8. langsung tak coba....
    trimakasih toturialnya....
    :D

    BalasHapus
  9. trima kasih sobat infonya, sudah ku coba, Alhamdulillah hasilnya bagus,,,
    trima kasih banyak.........

    BalasHapus
  10. thanks gan,,, mau tanya gan,, itu udah termasuk ama scroll nya..?

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>


web design blogs Bloggers - Meet Millions of Bloggers