Home » » Cara memberi background di related post/artikle terkait

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 :

16 Testimonial:

All About Anime :

Keren sobat triknya, tampilan related post bisa jadi lebih dinamis, salam kenal ya, trims dah mampir dan berkomentar, mari jalin silaturahmi sesama blogger, oke

All About Anime :

Wah keren sobat triknya, trims dah mau mampir dan berkomentar,salam kenal dan mari jalin silaturahmi sesama blogger okey

Mas uwah :

@All about: sip mas , salam kenal juga

threex-hans.com :

makasih triknya sob,,,

Mas uwah :

threex-hans.com: seeeep mas broo!

Merliza :

sangat bermanfaat.. moga jika nanti saya butuh yg seperti ini saya masih ingat tempatnya di sini :)

Merliza :

komeng saya lenyap?!?!

Mas uwah :

ok,, jangn sungkan kembali kesini

Naufal Aminur Rahman :

Bagus mas, tapi sebenernya lebih bagus klo hover pada backgroundnya diganti, pasti hasilnya ntar lebih unik. Tapi nih artikel mantab bgt!

DAW-XP :

Wew keren juga nih, tapi apa ini dapat memberatkan blog?

nC :

hehe mas uwah selalu sja punya tutor yg keren2 :)
eh, ngomong2 soal background, mas tau gak cara masang background di footer blog? hehe sepertinya keren :)

Mas uwah :

Naufal Aminur Rahman:yups thanks brader

Mas uwah :

DAW-XP: pasti mempengarui loading mas,,

Mas uwah :

@brader nC: thnkyu brader, bisa kodenya mirip gini kalau mau buat footer backround coba aja di pastekan di atas ]]>bskin
#footer {
width:790px;
clear:both;
margin:0 auto;
line-height: 1.6em;
text-transform:normal;
letter-spacing:.1em;
text-align: center;
background: url(alamat backroun footer) no-repeat;
font-size: 12px;
height: 70px;
padding: 20px 10px 20px 0px;
}

nC :

hehe thenkyu mas uwah :)
ayee sekarang ane udah punya guru :D

Mas uwah :

nC: jngn gtu mas bro,, sama2 belajar n tukeran ilmu

SILAHKAN KOMENTAR

Maturnuwun sampeyan sudah mampir di Blog Mas uwah, tinggalkan komentar untuk menjalin persahabatan ingat NO SPAM.

 

Copyright © 2011 Mas Uwah is proudly powered by Blogger.com | Return to top

Grab this blog to mobile version on http://trikbloggers.blogspot.com/?m=1

Mas uwah | Trik blogger | Optimasi seo