Cara Membuat Floating Image Link dengan kode CSS dan CSS3

Jika anda sering menjelajah blog, pasti pernah menjumpai gambar/image yang terpasang di pojok kanan-bawah atau kiri bawah halaman. Gambar-gambar tersebut bisa berupa gambar berekstensi .gif, .jpg atau .png. Beberapa yang lain juga memanfaatkan gambar animasi gif dan flash. Selain berfungsi menambah keindahan, pada gambar bisa ditambahkan sebuah link hingga ketika pengunjung meng-klik gambar tersebut maka dia akan dibawa ke halaman yang baru dari blog tersebut atau ke blog/web dengan alamat berbeda. Floating image yang di dalamnya berisikan link akan memberi manfaat lebih karena sebuah link penting bisa selalu "nongkrong" tepat di sebuah gambar yang terpajang di satu bagian blog yang mudah dan selalu terlihat oleh setiap pengunjung.

Penempatan di pojok kanan-bawah atau di kiri-bawah bertujuan supaya gambar gampang terlihat tidak terlalu mengganggu bagian blog yang lain. Anda bisa menggunakan gambar dengan ukuran "sesuka hati" sepanjang blog tetap nyaman untuk dinikmati pengunjung. Karena di dalamnya sudah diselipkan sebuah link, maka selanjutnya gambar ini kita sebut sebagai floating image link yang akan selalu terlihat sekalipun halaman digulung hingga ujung terbawah.

Kita bisa membuat floating image link dengan 3 macam cara:

• Hanya menggunakan xHTML.
• Menggunakan kode CSS dan xHTML.
• Memadukan kode3 CSS dan CSS3 serta xHTML.

Contoh Floating Image Link yang dibuat hanya menggunakan xHTML dapat anda lihat di halaman ini pada ujung/pojok kanan-bawah.

Jika anda ingin melihat bagaimana sebuah Floating Image Link yang dibangun dengan menggunakan kode CSS, CSS3 transformation dan CSS3 transition serta xHTMl, silahkan klik link DEMO di bawah ini. CSS3 transition dan transformation akan membuat efek yang memperindah tampilan Floating Image Link. Perlu menjadi catatan bahwa karena menggunakan kode CSS3, maka apabila anda ingin melihat bentuk efek dan tampilannya secara sempurna, anda harus menggunakan browser yang sudah mendukung CSS3 seperti Opera 1041 hingga Opera 1063, Google Chrome, Safari dan Mozilla Firefox 4.0 beta 1 hingga beta 6.

D E M O

Kode CSS

#pojok {
        position:fixed;
        left:2px;
        bottom:2px;
}  
#pojok img {
        height:167px;
        width:20px; 
        border:3px solid #888;
        padding:1px;
        background:#aaa;
        border-radius:5px;
       -moz-border-radius:5px;
       -webkit-border-radius:5px;
       -o-transition:all 1.2s ease-out;
       -moz-transition:all 1.2s ease-out;
       -webkit-transition:all 1.2s ease-out;
}  
#pojok:hover img {
        z-index:99;
        background:#993300;
        border-color:#FF0000;
       -o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
       -webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}

]]></b:skin>

xHTMl

<div id="pojok">
<a href="http://bloggerstuars.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQzOjYKgoVfJ5N1oiZuyaZX46M64SVoKSWE519J0w8GAP1P6p_X51kwkOBaPVrHNrdhTAmXRK9Hx9Vgg4kXIykU0LSUl58ec4qEFcQvWa8DTteJQ3Kmx1PM1JnD218-NVYk-EX315fz1eg/s200/gubhugreyot167.20.jpg" /></a>
</div>

</body>

Cara Membuat Floating Image/Floating Image Link

• Login : Login ke Blogger.
  • Tuliskan Email Address.
  • Tuliskan Password.
  • KLIK Login.
• Dasbor : Setelah login anda akan menjumpai halaman dasbor. Cari dan klik "Design/Rancangan".
• Design/Rancangan : klik "Edit HTML".
• Cari kode ]]></b:skin>, kemudian letakkan kode CSS di atasnya.
• Cari kode </body>, dan letakkan xHTML atasnya.
• KLIK SAVE Templates/Simpan Template.
• Buka blog dan lihat hasilnya.

Catatan & Keterangan:

• Rubah/ganti kode yang berwarna oranye dengan URL yang akan dipasang sebagai link.
• Ganti kode yang berwarna kuning dengan teks yang sesuai dengan URL.
• Ganti kode yang berwarna merah dengan URL image/gambar.
• Ganti nilai width dan height pada kode CSS dengan ukuran yang baru sesuai gambar yang akan ditampilkan.
• Gunakan gambar yang tidak terlalu besar agar tidak mengganggu tampilan blog dan kenikmatan pengunjung saat menjelajahi isi blog.

Jika anda ingin membuat Floating Image Link yang khusus hanya menggunakan xHTMl, silahkan buka tutorialnya dengan klik link di bawah ini:

Floating Image Link (xHTML only)

Tutorial Lain

Slahkan buka tutorial lain yang bisa melengkapi tutorial di blog ini!

• gubhug reyot
• Tanty Template Modification
• bgsgr Tutorial
• Mas Gitosamin