Tips Membuat Floating Image

Para ahli blogger memang sangat kreatif untuk selalu menciptakan sesuatu yang baru demi menciptakan blog yang friendly dan menarik baik dari sisi content (isi), layanan (kemudahan), tampilan, maupun accessories yang lainnya. Nah, sehubungan dengan yang terakhir tersebut, perkenankan Blog Tips Trik NgeBlog ini untuk men-share lagi tentang tips floating image yang saya dapatkan dari Trik Tips Blogging dan untuk ini Blog ini mengucapkan terima kasih. Tips ini akan membuat image menjadi statis berada di halaman blog sehingga akan menambah estetika tampilan blog Anda.

Bagi yang newbie, mungkin penasaran dengan postingan kali ini, jika, ya, tunggu beberapa saat di bloh ini hingga muncul image (gambar) yang berada di sebelah kiri atas. Nah, sudah muncul, kan, imagenya.

Jika tertarik ingin menempatkan image seperti itu, silakan ikuti langkah-langkahnya sebagai berikut.

1. Login ke http://blogger.com hingga masuk Panel Kontrol >> Tata Letak (layout) >> Edit HTML

2. Temukan kode ]]></b:skin> jika sudah ketemu letakkan kode di bawah ini persis di atas kode tersebut.

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

Bottom >> gambar akan berada di posisi bawah, dan jika menginginkan Anda dapat mengganti dengan up (gambar akan berada pada posisi atas)

Left >> gambar akan berada di sebelah kiri, dan jika menginginkan, Anda dapat menggantinya dengan right (gambar akan berada di sebelah kanan)

3. Letakkan kode berikut ini sebelum kode </body>

<div id="floating_image">
<a href="http://tips-trik-blog.blogspot.com">
<img src="http://www.geocities.com/yono_pati/intan.gif" border="0" /></a>
</div>

Anda dapat mengganti url http://tips-trik-blog.blogspot.com dengan url blog Anda dan url image hosting tempat Anda menyimpan image atau photo yang ingin Anda gunakan sebagai floating image tersebut.

4. Kemudian simpan template

5. Selesai

Sekarang, coba refresh blog Anda dan pastikan image yang Anda pasang sudah terpampang dengan cakepnya. Hasilnya dapat dilihat di blog Tips n Trik Blog ini.

(sumber : Trik Tips Blogging)

Baca juga yg ini

1. Beratnya Sholat Lima Waktu
2. Script Kupu-Kupu Terbang
3. Script Bintang Berjatuhan

Description: Tips Membuat Floating Image Rating: 4.5 Reviewer: Unknown - ItemReviewed: Tips Membuat Floating Image