18 April 2012

Cara Buat Arikel Terkait Berwarna

Sambil menunggu bola first leg liga champions antara tim jagoan saya Real Madrid melawan Bayern Munchen, semoga saja tim jagoan saya menang, Oupppzzz ko jadi ngomongin bola ya,,, ^_^

Pada kali ini saya akan berbagi Cara Buat Artikel Terkait Berwarna yang berdasarkan random acak menurut label/kategori tanpa mencantumkan nama label nya, karena bola sudah mulai, langsung saja yukkk...

*) Langkah Pertama :
  • Masuk ke Blogger
  • Pilih Template Edit HTML
  • Centang pada Expand Template Widget
  • Gunakan Ctrl + F cari kode </head>
  • Tempatkan kode dibawah ini diatas </head>
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}}}}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' +
relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>    
*) Langkah Kedua :
  • Kemudian cari kode <data:post.body/>
  • Jika ada dua pilih <data:post.body/> yang pertama, untuk lebih jelasnya lihat yang dibawahnya ada kode ini <b:if cond='data:post.hasJumpLink'>
  • Jika sudah ketemu tempatkan kode berikut ini dibawah <data:post.body/>  yang pertama tersebut
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels&amp;max-results=20&quot;' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<h3><b>Artikel Terkait :</b></h3>
<div style='border: 2px solid #FAF8CC; margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color:#5CB3FF; '>
<div style='border: 1px solid #eee; overflow: auto; width: 500px; height: 180px; text-align: left; '>
<script type='text/javascript'>removeRelatedDuplicates();printRelatedLabels();</script>
</div>
</div>
</b:if>
  • Simpan Template
Keterangan, silahkan ganti dan kembangkan menurut selera :
1. Yang berwarna Orange merupakan warna border garis tepi luar
2. Yang berwarna Biru merupakan warna background
3. Yang berwarna Hijau merupakan warna batas kotak scroll, jika tidak ingin memakai warna batas kotak scroll hapus saja kode border: 1px solid #eee;
4. Yang berwarna Pink merupakan jumlah postingan / artikel yang ingin ditampilkan

Selamat Mencoba.


7 komentar:

  1. kok gua ga bisa yah gan?? mohon pncerahanya..

    BalasHapus
  2. blog kamu apa? mungkin salah taruh kode ke-2 nya pilih yang pertama, coba pakai browser chrome jadi tahu yg pertama dan kedua,,

    BalasHapus
  3. klu mau bikin yang artikel terkait dimasukin di kotak kaya bloknya kita gimana bang??

    http://katumbu.blogspot.com

    BalasHapus
  4. Kamu artikel terkaitnya beda sama ane,,,
    tpi coba deh cari ditempat kamu kode Artikel yang berkaitan tambahin kode ini dibawahnya :
    <_div_ style='border: 2px solid #FAF8CC; margin: 10px 0px; padding: 10px; -moz-border-radius: 10px 10px 10px 10px; width: auto; height: auto; background-color:#5CB3FF;'>

    terus tambahin kode /div sebelum /b:if

    hapus tanda garis bawah pada div
    dan kasih dalam kurung /div dan /b:if

    BalasHapus
  5. ok brow gua kan coba,, klu ga bisa aye balik nanya lagi nhe,, hehehe

    BalasHapus
  6. cara membuat ada warna biru di archive content gimn sih???

    BalasHapus

Popular Posts

Copyright@2015 999 Blog || Designed ByBlogger Templates-Blogger