Click Here

Labels

Cara bikin tampilan di pojok halaman Blog

Nahhhh....pada postingan saya yg kedua ini saya coba membahas suatu tampilan yg cukup unik...yaitu cara menampilkan gambar/animasi/banner di pojok halaman blog. sebenarnya bukan hanya gambar/animasi/banner saja yg bisa ditampilkan di pojokan halaman blog kita, bisa Jam, Shoutbox, Kalender, Adsense, Hit Counter, Iklan, Widget dan lain-lain.
Pada blog ini sample yg saya hadirkan adalah Data Rank dari Popuri. Namun saya akan memberikan contoh dengan objek gambar/banner saja.
Nah...tanpa basa-basi langsung saja ke cara pembuatannya :
  • Pertama pastinya Login dulu ke BLOGGER
  • Masuk ke Tata Letak/Layout
  • Lalu pilih Edit HTML
  • Nah, sekarang cari kode ]]></b:skin> , untuk memudahkan anda mencari kode tesebut, tekan ctrl+f  kemudian anda ketik kode tersebut, klik next untuk mencarinya.
  • Jika sudah ketemu, tempatkan kode berikut ini tepat di atas kode tersebut.
#trik_pojok {
position:fixed;_position:absolute;bottom:0px; left:0px;
clip:inherit;
_top:expression(document.documentElement.scrollTop+
document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth); }
  • Text yang berwarna biru bisa anda ganti sesuai selera anda dimana anda ingin menempatkannya. Tulisan "Bottom" bisa anda ganti dg "Top", serta tulisan "Left" bisa anda ganti dg tulisan "Right"
  • Oke, langkah selanjutnya adalah menempatkan kode gambarnya
  • cari kode berikut </body>
  • Tempatkan kode dibawah ini sebelum kode tadi
<div id="trik_pojok">
<a href="http://nama-blog-anda.blogspot.com" target="_blank">
<img border="0" alt="nama-blog-anda" src="http://link-gambar-anda/gambar-anda.jpg"/></a>
</div>
  • Ganti link http://nama-blog-anda.blogspot.com dg link anda
  • Ganti link http://link-gambar-anda/gambar-anda.jpg dg link gambar anda
  • Jika anda ingin meletakkan objek selain gambar disana, silakan ganti tulisan yg berwarna merah tersebut dg link objek yg anda inginkan
  • Simpan hasil kreasi anda, Lihat hasilnya
SELAMAT MENCOBA...
Harga Notebook Acer Aspire S3 Ultrabook

Masih belum ada yang berkomentar nih.

Silakan anda yang pertama :

Silahkan tulis komentar anda dibawah ini, namun diharapkan jangan melakukan spamming,hindari komentar yang mengandung unsur SARA, berkata kasar serta hal2 negatif lainnya, Terima Kasih, Semoga bermanfaat