Cara Membuat Floating Image(Gambar Melayang) ~ Purydhink™ on Blogger

Trik ini saya pelajari dari blog Bootingskoblog.com. Trik ini adalah cara untuk membuat sebuah objek melayang yang bisa anda lihat contohnya pada pojok kiri bawah blog saya.

Screenshot Objek Melayang.

Nah anda bisa membuat objek melayang seperti screenshot di atas dengan trik ini. Jadi, mari kita simak tutorialnya. Oh ya, selain bisa dilakukan di blogger, trik ini juga bisa anda terapkan pada blog WordPress(Self-hosted) anda.

Untuk Blogger

1. Login dulu ke dashboard anda terus masuk ke->Tata Letak->Edit HTML.

2. Setekah itu, cari kode ini-> ]]></b:skin>

3. Sudah ketemu? Pasang kode ini diatasnya:

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

4. Text yang dicetak tebal adalah posisinya. Jika anda ingin mengganti posisi objek, anda tinggal mengganti text "left" dengan "right". Begitu juga tulisan "bottom", jika pingin di posisi atas bisa diganti dengan "top".

5. Udah gitu cari kode </body>. jika sudah ketemu, letakan kode ini diatasnya

<div id="trik_pojok">
<a href="link blog kalian">
<img src="link gambar kalian" border="0" /></a>
</div>

keterangan: yang link blog kalian itu kalian isi sama url blog kalian. Terus yang link gambar kalian ganti dengan lokasi gambar tempat kalian upload gambar kalian.

6. Save template-nya.

Untuk WordPress Self-Hosted.

1. Login ke Dashboard amda.

2. Lalu, masuk ke Apparance(kalo bahasa Indonesia Tampilan) masuk ke Editor(kalo bahasa Indonesia penyunting).

3. Ketika masuk, anda akan melihat tema yang aktif, atau tema yang anda gunakan saat ini.

4. Pilih file Stylesheet utama(biasanya nama filenya style.css).

5. Copy kan script ini pada file Sylesheet tersebut:

#float {

position:fixed;_position:absolute;bottom:5px; left:5px; clip:inherit; _top:expression(document.documentElement.scrollTop+ document.documentElement.clientHeight-this.clientHeight); _left:expression(document.documentElement.scrollLeft+ document.documentElement.clientWidth - offsetWidth);

}

Keterangan

Bottom bisa kalian ganti dengan top. Left bisa kalian ganti dengan right. Tergantung kalian pengen naro gambarnya dimana.

6. Klik Update File.

7. Selanjutnya, klik header.php(Nah, kalo yang ini tergantung pada support theme anda. Jadi bisa saja support pada single.php atau header.php)

8. Copy script dibawah ini, lalu paste-kan sebelum tag </body>

<div id="float"> <a href="http://purydhink.uni.cc/"> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi17A77BH4qo5NZx0NiwEofQzcF5tXw4US5QgSSwn9aq_vhdg4aUrhigJp2BtQS_RiWg2i52wA-VMpWNoaSsmjVsHOoTxFMqlNt5mMYIspffju_G9a1jbeUaMdbmSxQ0SgNBHS2Gh0pcpTO/" border="0" /></a> </div>

Keterangan
http://purydhink.uni.cc/ adalah alamat blog kamu, ganti sama alamat blog kamu, atau bisa juga menggunakan tanda "#"(kalo kamu pakai tanda ini, maka float image akan berfungsi menjadi gambar "back to the top" yang bisa mengembalikan ke bagian atas blog)

9. Klik Update File.

Nah, sekian deh tutorialnya. Semoga bermanfaat. Maaf kalo cara penyampaiannya kurang berkenan. Jika ada yang tidak mengerti, bisa mengontak saya di halaman Contact Me

Happy Blogging! :D

Posted in: Tips-Trik Blog