Memberi background foto atau gambar pada artikel terkait / related post blog

Mungkin beberapa teman blogger sudah tahu cara pemberian foto atau gambar pada artikel terkait atau related post di blogger.  kali ini blognya LOL1ds akan sharing mengenai topik tersebut, barangkali ada sobat blogger yang masih Nubitol alias newbie kayak lol1ds ini yang masih haus dengan oprekan2 HTML / CSS di blog ini :).
sebelumnya jika blog sobat belum ada artikel terkait atau related postnya, silahkan lihat posting dimari : Artikel terkait berdasarkan category / label dengan efek scroll plus
Ok langsung saja “to the point” :

1. masuk ke dasbor blog sobat
2. pilih rancangan terus edit HTML jangan lupa centang Expand Template Widget.
3. kalo sudah cari code / kata / tulisan seperti dibawah ini :

<div class='widget-content'>
<h3>Related Tips, Tricks and Tutorials :</h3>

( di template saya codenya artikel terkait seperti itu, jadi menyesuaikan ya mas brow ).
kalo sudah ketemu sisipkan code dibawah ini TEPAT dibawah code ARTIKEL TERKAIT tadi :

<DIV style='background: transparent url(https://lh4.googleusercontent.com/-98H5ThbVOrM/TXAKrX-KcHI/AAAAAAAAAHU/1UpH9k6Mg90/s72-c/artikel+terkait.jpg) no-repeat left bottom; margin:0; padding:10px;width:ancho;height:200px;overflow:auto;border:1px solid #ccc;'>

Ket : code yang berwarna merah adalah URL foto/gambar yang harus diganti, dan warna biru “left bottom” adalah letak foto/gambar berada.
jadi bentuknya akan seperti ini jika 2 code tersebut akan digabungkan :

<div class='widget-content'>
<h3>Related Tips, Tricks and Tutorials :</h3>
<DIV style='background: transparent url(https://lh4.googleusercontent.com/-98H5ThbVOrM/TXAKrX-KcHI/AAAAAAAAAHU/1UpH9k6Mg90/s72-c/artikel+terkait.jpg) no-repeat left bottom; margin:0; padding:10px;width:ancho;height:200px;overflow:auto;border:1px solid #ccc;'>

Jika sudah selesai menyisipkan code tersebut , TUTUP code tersebut dengan code ini </DIV> .  dan letakkan di Atas code </b:if> . Untuk mencari code </b:if> silahkan geser scroll kebawah disitu nanti sobat temui satu code </b:if> sebagai penutup Widget artikel terkait itu. jadi contoh simpelnya seperti dibawah ini :

<div class='widget-content'>
<h3>Related Tips, Tricks and Tutorials :</h3>
bla… bla.. bla.. ( code artikel terkait dan seterusnya )
</b:loop>
</b:loop>
</script>
</DIV>  <<--------- code penutup foto/gambar tadi.
</div>
</div>
</b:if> <<----------- code penutup widget Artikel terkait / related post.

kalo sudah selesai dengan pekerjaan sobat, jangan lupa SAVE TEMPLATE dan lihat hasilnya.

TIPS : gunakan foto/gambar yang tidak terlalu mencolok ( kalo bisa gambar transparan / yang sudah diEDIT ) kenapa? karena supaya link text yang ada di dalam artikel terkait / related post masih dapat dilihat, sesuaikan dengan template mas2 dan mbak2.
Jika tidak ingin susah2 mengedit, sobat bisa terapkan Pemasangan artikel terkait / related post seperti pada posting blognya LOL1ds disini ( SIAP pakai ). pada artikel yang kedua (2). cuma EDIT URL foto / gambarnya saja.

Pripiew lab riset : Klik gambar u/ z00m.




ok mas brow, semoga bermanfaat sob.



tag : memberi background pada artikel terkait, background related post, memberi background gambar pada related post, hack artikel terkait, hack related post, background artikel terkait, memasang background gambar pada artikel terkait.

Article information: Description: Memberi background foto atau gambar pada artikel terkait / related post blog Rating: 4.5 - Reviewer: LolidsOfficialBlog - ItemReviewed: Memberi background foto atau gambar pada artikel terkait / related post blog

Related Tips, Tricks and Tutorials :