Cara buat background pada related post

Berikut cara memberi background pada judul artikel terkait:


1.login ke blogger.com dengan user id sahabat tentunya
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>

lalu letakkan kode berikut dibawah kode tadi

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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 = &quot;<data:blog.homepageUrl/>&quot;;
var maxNumberOfPostsPerLabel = 4;
var maxNumberOfLabels = 10;
maxNumberOfPostsPerLabel = 50;
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;albri&#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>
<script type='text/javascript'>RelPost();</script>
</div>
</b:if>

sedikit tambahan:silahkan ganti tulisan yang berwarna merah sesuai kehendak sahabat

• 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

berikut contoh gambar tittle related post yang udah menggunakan background pada tittlenya

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





URL gambar bisa sahabat rubah sesuai selera,nah semoga bermanfaat,buat sahabat juga bisa costumize sendiri kode yang sudah ada.

Related Post:

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di zykry-trick.blogspot.com

Thx to :

Tempat ngumpul paling seru ,diskusi tentang game(cheat,straregi,bug,jual beli id,dll)Contoh game nya seperti RF Onlie,Perfect World,Point Blank.Membahas tentang internet(Tips dan trick blogging,cara membuat website,dll)pokoknya asyik deh..sok atuh klik disini..

 Print this page