Kamis, 12 Februari 2009

MENAMPILKAN FOTO YANG SELALU ADA DIATAS

Banyak pengunjung blog yang bertanya tentang cara menampilkan gambar foto atau sesutu agar selalu berada di pojok/diatas terus (untuk melihat contohnya silahkan lihat Gambar award yang ada di atas sebelah kiri blog saya ini !! Keren kan ...??)gelakguling
sebenernya pertanyaan ini sudah banyak yang menjawabnya, tapi tidak ada salahnya jika saya mencoba untuk memposting tutorial tentang ini o.k?

Sekarang anda cukup meng-copy (ctrl+c) seluruh code di bawah ini :


#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); }


Lalu Paste (ctrl+v) tepat di atas code :

]]></b:skin>

kalau bingung cari kode diatas, gunakan ctrl+F dan tulis kode diatas o.k?!!

Dan sedikit tambahan jika anda ingin mengubah posisi atau tempat ke yang lain, umpama mau anda letakkan di bagian pojok kanan bawah atau pojok kanan atas atau pojok kiri atas ,silahkan anda berfokus pada tulisan :

position:fixed;_position:absolute;bottom:0px; left:0px;

(#) kata bottom : menunjukkan posisi di bawah, jika anda ingin mengubah posisi di atas silahkan ganti kata " bottom " menjadi " top " (tanpa tanda petik) dan nilai 0px; bisa anda sesuikan sendiri o.k?

(#) kemudian lihat pada kata left : menunjukkan posisi berada di kiri, jika anda ingin mengubah posisi menjadi di kanan silahkan ganti kata " left "menjadi " right " (tanpa tanda petik) dan nila 0px; bisa sampeyan sesuikan sendiri juga...
sengihnampakgigi


Kemudian tahap selanjutnya adalah pemasangan code script pada bagian body blog yaitu caranya copy seluruh code di bawah ini :

SEBELUM ANDA MENCOPY SELURUH CODE DIBAWAH INI MOHON DI BACA DAN DI TELITI, KARENA ADA KATA KATA YANG MUSTI DI IKUTI DAN DI GANTI DI DALAM CODE TERSEBUT...PAHAM ??!!
marah

(jangan asal comot/copy/apalagi SOK PINTER !! tanpa memperhatikan)
nerd


<div id='pojok'>
<img src='http://alamat-url-gambar-or-poto-anda.jpg' border='0' height='isiterserahanda' width='isiterserahanda'/>
</div>

( contoh script diatas jika hanya menampilkan image aja, jika ingin menampilkan image dengan link silahkan pilih code yang di bawah ini.. )

<div id='pojok'>
<a href='http://alamat-blog-anda.blogspot.com'><img src='http://alamat-url-gambar-or-poto-anda.jpg' border='0' height='isiterserahanda' width='isiterserahanda'/></a>
</div>

(dan jika anda ingin menampilkan gambar beserta sedikit tambahan tulisan, silahkan copy code script di bawah ini..)

<div id='pojok'>
<table bgcolor='pink' width='350'><tr><td align='center'><img src='http://alamat-url-poto-anda.jpg'/><a><blockquote/><a href='ymsgr:sendIM?TULISAN INI GANTI DENGAN ID YAHOO MESSENGER ANDA'><img border='0' src='http://opi.yahoo.com/online?u=TULISAN INI GANTI DENGAN ID YAHOO MESSENGER ANDA&amp;m=g&amp;t=2' width='95'/></a></a></td><td bgcolor='yellow'><div align='justify' style='font-weight:bold; color:red'>MASUKKAN KATA KATA ATAU PESAN ANDA DISINI</div></td></tr></table>
</div>


Nah setelah anda memilih salah satu atau bahkan semua script yang saya tunjukkan di atas, kemudian taruhlah tepat di atas code :

</body>

mudah kan..? selamat mencoba yah... kalo masih blom berhasil, tanya aja yah ke bapakmu... ??
Tapi kalau dah berhasil.... jangan lupa tepuk tangan yang keras !!
tepuktangan

6 komentar:

  1. mas kalau pake wordpress bisa ga?tlg bales ya???

    BalasHapus
  2. mass klo cara buat garis kayak
    <<<<--- ;;) itu gmn ya mass???
    sangat ditunggu blzannya...

    blognya perfect...
    sukses terus ya mas...

    BalasHapus
  3. kok blogku jadi ancur hahahaha=))

    BalasHapus
  4. keren bro......... sukses ya dengan trus berbagi ilmunya

    BalasHapus
  5. wah sip gan.............hebat....thanks ya...maju terus...

    BalasHapus
  6. Terimakasih banyak gan...
    Web saya jadi lebih baik :)

    BalasHapus

Silahkan tulis disini dengan santai dan tertawa2 !!