16 Cara memberi background di related post/artikle terkait

Cara memberi background pada related post/artikle terkait
Assalamualaikum Buat teman-teman puji syukur saya masih bisa berbagi ilmu dengan sobat semua pada kesempatan kali ini saya ingin berbagi tentang bagaimana Memberi  background pada related post atau artikle terkait sudah tau kan pastinya berikut skrinsotnya :

Atau kalau ndak ya lihat aja related post punya Mas uwah.. lansung saja ikuti tutorialnya :

NB: Jika sobat sudah menggunakan Related post Saya saranin hapus Related post yang anda pakai (belum ada background) dan ganti saja dengan yang ini, tapi kalau sudah ahli Css pasti tau tidakanya!

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://i1096.photobucket.com/albums/g335/b3r4nd4/Masuwahtrikblog.png); 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>

Silahkan ganti tulisan yang berwarna Biru dengan gambar 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

Langkah selanjutnya masih tentang Cara memberi background pada related post

Silahkan sahabat cari kode ]]></b:skin>
Copas kode dibawah ini dan taruh diatas kode ]]></b:skin>

/* Related post
----------------------------------------------- */
.rbbox{border:1px solid silver;background:#fff url(http://img69.imageshack.us/img69/5210/zykryrelated.png) no-repeat right bottom;-moz-border-radius:5px;margin:5px;padding:5px}
.rbbox:hover{background-color:#fff}

URL gambar bisa sahabat rubah sesuai selera,nah semoga bermanfaat, Semoga trik Cara memberi background pada related post/artikle terkait bermanfaat buat teman-teman semua, akhir kata Wassalam.

Anda suka atau merasa artikel ini bermanfaat? Jika ya, mohon kesediaannya untuk meng-klik tombol Plus One yang ada di samping ya. Terima kasih

related post :