Cara Membuat/Memberikan Gambar di Pojok Blog (Melayang)

Satria Perwira    6/12/2011    Trixs Blogging   

Cara Membuat/Memberikan Gambar di Pojok Blog (Melayang)

Berikut ini saya Mencoba ngebahas gimana cara membuat gambar yang selalu berlari tanpa henti dan berada di pojok (bisa atas, bawah, kiri, kanan) meskipun "scroll bar" ditarik kemana-mana. "Scroll bar" itu apa sih? itu lho kotak kecil panjang yang ada disamping itu, yg biasanya ditarik kebawah dan keatas supaya bisa ngelihat isi blog yang kepanjangan. Trus maksudnya "gambar" itu apa? "gambar " itu maksudnya bisa gambar atau photo kamu, animasi, Jam, Hit Counter, Shoutbox, Kalender, Adsense, Iklan, Widget-widget dan lain-lain.

1. Login ke blogger trus klik "Layout -->> Edit HTML

2. Cari kode ini ]]></b:skin> kalo dah ketemu taru kode berikut ini di atasnya.

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

3. Text yang dicetak tebal dan kuning adalah posisinya, kalo pingin ganti di posisi pojok kanan bawah tinggal text "left" diganti dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".

4. Langkah selanjutnya yaitu letekkan script berikut ini sebelum kode </body>

<div id="trik_pojok">

<a href="http://rafi-orilya.blogspot.com">

<img src="http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" border="0" /></a>

</div>

 

"http://trik-nyaman.blogspot.com" adalah link. ganti dengan link kamu.

"http://i700.photobucket.com/albums/ww6/mandalika3/soniclari.gif" adalah lokasi gambarmu. ganti dengan lokasi gambar kamu.

5. Jika kamu pingin yang ada disitu bukan gambar tetapi jam/kalender/hit counter/widget-widget yg lain, maka ganti text yang berwarna merah dengan script widget-widget tersebut.

6. Simpan hasil kerja kamu dan lihat hasilnya.

Post ke 2

Beberapa hari yang lalu ada salah seorang pengunjung blog ini yang bertanya tentang cara menampilkan gambar foto atau sesutu agar selalu berada di pojok terus (untuk melihat contohnya silahkan lihat poto saya yang berada di pojok kiri bawah yang ada yahoo messengernya), sebenernya pertanyaan ini sudah banyak yang masuk di blog ini baik lewat media chat box maupun langsung lewat yahoo messenger saya, tapi sebelumnya saya minta maaf karena tidak langsung memposting tutorial tentang ini karena keterbatasan waktu dan di tambah lagi kebingungan saya untuk memposting postingan di blog ini ( yang mana dulu yah yang musti saya posting duluan..? saking banyaknya bahan pembahasan untuk di jadikan tutorial.. ) perasaan inilah yang kerap mucul di pikiran saya dan yang akhirnya membuat saya jadi binun dan ga jadi memposting hehehe.... tapi saya sudah mengambil suatu kebijakan yang mana saya akan mendahulukan pertanyaan pertanyaan yang masuk lewat komentar blog ini ( biar ga binun lagi, hehehehe.. )...

Ah udah dulu ah ocehannya keburu di tinggal tidur para pembaca... hehehe. Sekarang kita menuju ke topik pembahasan yaitu cara membuat / menampilkan gambar poto atau sesuatu agar selalu berada di pojok.

Sekarang anda cukup mengcopy 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 masukkan ke bagian HEAD dan untuk lebh tepatnya biar ga binun taruhlah tepat di atas code :

]]></b:skin>

Dan sedikit tambahan jika anda ingin mengubah posisi atau tempat ke yang lain, semisal mau anda taruh di bagian pojok kanan bawah atau pojok kanan atas atau pojok kiri atas atau bahkan berada tepat di tengah tengah blog (kalo yg ini ga mungkin dech... sangat menggangu pengunjung blog yang membaca artikel anda jadinya) 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 (pokoknya di coba2 aja dech... ga meledak, hehehe)

(#) 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 nada sesuikan sendiri juga...

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...!! (jangan asal comot/copy aja tanpa memperhatikannya)

<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, seperti pada blog ini 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 binun tanyakan aja yah... n tinggalkan di kotak komentar di bawah ini... thx

Artikel Dilindungi

by Rafi Aldiansyah Asikin