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
Baca Juga Yang Ini, Seru Loo!!
Tutorial Blogger
- Kalimat Reservasi Di Hotel
- Cara Membuat Link Otomatis Ketika Postingan Di CoPas
- Cara Memalsukan Jumlah Komentar Blog Sesuka Hati
- Cara Membuat Artikel Terkait Dibawah Posting Standar
- Cara Membuat Daftar Isi Blog | Accordion Keren
- Cara Pasang Lafalz Bismillah Pada Awal Posting Blog
- Ping Blog agar cepat di index oleh search engine
- Pasang Iklan gratis membuat blog terkenal
- Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Tanggal Posting
- Cara Membuat Daftar Isi Keren di Blog
- Cara Membuat Daftar Isi Blog Otomatis Berdasarkan Label
- Cara Membuat Permalink di Blog
- Cara Memasang Translate Pada Blog
- Cara Memasang Emoticon Gundam di Kotak Komentar Blog
- Cara Membuat Blog Tampil Lebih Cepat (Rahasia)
- Cara Mengecek Kecepatan Loading Blog Lengkap
- Cara membuat link berkelip disertai dengan kerlipan bintang
- Cara Mudah Meningkatkan Pengunjung Blog
- 5 Situs Paling Populer Untuk Download Template Blogger
- 10 Softaware Gratis Mendesain Website
- Membuat Objek Keren Pada Kursor Mouse di Blogger