Membuat artikel berkaitan Dengan Tampilan warna dan gambar

[Show]

Sebelumnya Adin pernah juga Posting tentang Cara Membuat Artikel yang berkaitan Untuk Blogspot hanya bedanya pada Artikel ini saya menambahkan sedikit tentang modifikasi dari artikel yang berkaitan ini

Untuk Sobat blogger Mungkin kalo yang sudah membuat Artikel yang berkaitan atau related post yang pada umumnya memanjang kebawah namun kali ini saya ajak sobat semua untuk membuat artikel yang berkaitan di buat sedemikian rapih agar tidak berantakan dan bisa juga di variasi dengan warna dan gambar background agar tampilan bisa menawan nah bisa di lihat contohnya pada screen berikut ini:

Nah contohnya seperti yg saya gunakan ini dengan tampilan yang dapat di rubah-rubah berikut warna dan gambarnya dapat di rubah juga untuk caranya sebagai berikut :

1.Seperti biasa sobat login ke Blogger.com

2.Pilih Tata letak

3.pilih Edit HTML untuk season ini sebaiknya copy dulu template anda

4.Jangan lupa centang kotak expand template widget

5.cari kode <p><data:post.body/></p>

6. lalu masukan kode dibawah ini tepat dibawah kode tadi

<b:if cond='data:blog.pageType == "item"'>
<div style='padding: 5px; background-image: url(http://i745.photobucket.com/albums/xx100/asqia/ikon/adinsiteartikel-ok.jpg); background-repeat: repeat; background-position: center;'><span style=';font-size:130%;color:white;'>
related post</span>
</div>
<div class='rbbox'>
<div style='margin:0; padding:10px;height:200px;overflow:auto;border:1px solid #ccc;'>
<div id='albri'/>
<script type='text/javascript'>
var homeUrl3 = "<data:blog.homepageUrl/>";
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
maxNumberOfLabels = 3;
function listEntries10(json) {
var ul = document.createElement('ul');
var maxPosts = (json.feed.entry.length <= maxNumberOfPostsPerLabel) ?
json.feed.entry.length : maxNumberOfPostsPerLabel;
for (var i = 0; i < maxPosts; i++) {
var entry = json.feed.entry[i];
var alturl;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
alturl = entry.link[k].href;
break;
}
}
var li = document.createElement('li');
var a = document.createElement('a');
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 < json.feed.link.length; l++) {
if (json.feed.link[l].rel == 'alternate') {
var raw = json.feed.link[l].href;
var label = raw.substr(homeUrl3.length+13);
var k;
for (k=0; k<20; k++) label = label.replace("%20", " ");
var txt = document.createTextNode(label);
var h = document.createElement('b');
h.appendChild(txt);
var div1 = document.createElement('div');
div1.appendChild(h);
div1.appendChild(ul);
document.getElementById('albri').appendChild(div1);
}
}
}
function search10(query, label) {
var script = document.createElement('script');
script.setAttribute('src', query + 'feeds/posts/default/-/'
+ label +
'?alt=json-in-script&callback=listEntries10');
script.setAttribute('type', 'text/javascript');
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 = "<data:label.name/>";
var test = 0;
for (var i = 0; i < labelArray.length; i++)
if (labelArray[i] == textLabel) test = 1;
if (test == 0) {
labelArray.push(textLabel);
var maxLabels = (labelArray.length <= maxNumberOfLabels) ?
labelArray.length : maxNumberOfLabels;
if (numLabel < maxLabels) {
search10(homeUrl3, textLabel);
numLabel++;
}
}
</b:loop>
</b:loop>
</script>
</div>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

7.tambahan lainya untuk sobat yang ingin merubah silahkan anda rubah tulisan yang saya buat merah diatas itu dengan ciri khas blog sobat termasuk link gambar dan warna serta ukuranya

Nah pada langkah berikutnya jika sobat ingin menampilkan warna dan gambar background pada kotak artikel yang berkaitan itu, silahkan ikuti langkah selanjutnya

8.silahkan sobat cari lagi kode berikut ]]></b:skin>

/* Related post
----------------------------------------------- */
.rbbox{border:1px solid silver;background:#e0ffff url(http://i492.photobucket.com/albums/rr288/angger07/EmoExcited.gif) no-repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}
.rbbox:hover{background-color:#fff}

setelah itu silahkan rubah teks yang saya blog merah seperti warna dan link gambar sobat setelah itu udah deh selesei semoga bermanfaat info dari Adin ini jika ada kekurangan dari artikel ini, mohon masukanya agar dapat diperbaiki.salam blogger