Berikut cara memberi background pada artikel terkait mungkin supaya terlihat menarik atau terkesan cantik guna di pasang nya background pada artikel terkait atau sering juga disebut relate post
jika anda tertarik silahkan di coba dan dipraktekkan pada halaman blog anda....
1.login ke blogger.com
2.klik tata letak
3.edit HTML,silahkan sahabat backup dulu template yang akan dirubah.Untuk berjaga-jaga bila terjadi kesalahan
4. Centang kotak kecil Expand Template Widget
5. Cari kode <p><data:post.body/></p> (ctrl+f untuk mempercepat pencarian)
lalu letakkan kode berikut dibawah kode tadi.
( Ini untuk pemasangan artikel terkait jika anda sudah mengunakannya tinggal sedikit penambahan code pada kode warna merah )
<b:if cond='data:blog.pageType == "item"'>
<div style='padding: 5px; background-image: url(http://i29.tinypic.com/1zg5jyr.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>
silahkan ganti tulisan yang berwarna merah sesuai kehendak.
- related post:silahkan diganti misal:artikel berhubungan atau apa saja
- white:warna huruf yang menjadi tittle related post
- font-size:130%:ukuran huruf pada tittle related post
- URL:ganti dengan url yang akan dijadikan background related post
tapi jika ingin memberi background pada related postnya,berikut langkah-langkahnya:
1.login ke blogger.com
2.klik tata letak
3.pilih tab HTML javascript
4.silahkan sahabat cari kode ]]></b:skin>
5.copas kode dibawah ini dan taruh diatas kode ]]></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}
berikut contoh gambar background pada related post
Ditulis Oleh : Syarif Hidayat ~ www.syarifshareilmu.blogspot.com
Sobat sedang membaca artikel tentang Cara Membuat background pada related post / artikel terkait pada blog. Oleh Admin, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya
Baca Juga Yang Ini, Seru Loo!!
