Cara Praktis Membuat Floating Image Link

Floating Image Link sebenarnya adalah sebuah gambar yang ditempatkan di salah satu bagian blog yang akan selalu terlihat setiap saat. Floating image ini kita gabungkan dengan sebuah link sehingga ketika pengunjung meng-klik gambar/image yang terlihat maka akan terbuka sebuah halaman yang baru. Beberapa blogger memanfaatkan untuk menempatkan gambar animasi, gambar statis dan gambar animasi flash. Jika yang digunakan animasi flash, tag yang dipergunakan dalam bentuk DIV, akan tetapi jika sampeyan menggunakan gambar yang berekstensi jpg, jpeg, gif, dan png, sebuah tag img sudah bisa digunakan.

Untuk menggabungkan floating image dengan link, kita letakkan tag image di antara tag pembuka <a> dan tag penutup </a>, dalam bentuk seperti di bawah ini:

<a href="URL"><img src="image.jpg" style="position:fixed;height:..px;height:..px; ... dst;"></a>


Bagaimana bentuk sebenarnya dari floating image yang dimaksud di atas dan diposisi sebelah mana floating image ditempatkan, apa saja gambar yang bisa ditampilkan sebagai floating image? Untuk lebih jelasnya, silahkan sampeyan buka link DEMO berikut ini (lihat di ujung kanan bawah):

D E M O

Setelah sampeyan melihat DEMO, mungkin menjadi lebih jelas bahwa semua gambar dengan ukuran yang tepat sangat menarik untuk dipasang sebagai floating image. Gambar bisa dalam ukuran kecil berbentuk meninggi (vertikal) ataupun gambar dalam ukuran sedang dan kecil dalam bentuk melebar (horizontal). Gambar gif berupa animasi akan membuat blog jauh lebih cantik. Pada demo terlihat tips yang muncul ketika cursor diletakkan/digerakkan di atas gambar. Tips seperti ini akan terlihat ketika sebuah link dipasang di dalamnya. Saat klik dilakukan maka pengunjung akan dibuka menjelajahi halaman baru yang berupa halaman dari blog lain atau dalam blog itu sendiri. Selain murni menggunakan xHTMl, floating Image Link dapat juga dibuat dengan memanfaatkan kode CSS, CSS3 dan xHTML. Penggunaan kode CSS dan CSS3 memungkinkan diciptakannya beberapa efek serta pemakaian xHTML yang lebih simple. Kita akan bahas cara berbeda dengan kode CSS di http://bloggerstuars.blogspot.com (bloggerstars1)!

Cara Membuat Floating Image Link


  • Login : Login ke Blogger dengan cara:
    • Tulis Alamat Email.
    • Tulis Password.
    • KLIK "Login".
  • Dasboard/Dasbor : Akan dijumpai sesaat setelah KLIK "Login". Banyak link atau teks link terdapat di halaman ini. Cari dan klik link "Design/Rancangan.
  • Kembali lanjutkan dengan klik link "Edit HTMl".
  • Back-up Templates :
    • KLIK Download template Lengkap/Download Full Templates.
    • Simpan file template di folder PC.
    • Kembali di halaman Edit HTML.
  • Cari kode : </body> Gunakan Ctrl+F untuk mempercepat dan mempermudah pencarian kode!
  • Letakkan kode berikut tepat di atasnya.

    • <a href="http://gubhugreyot.blogspot.com" target="_blank" title="You may learn about 500 of blogger tutorial, here!"><img style="position:fixed;bottom:2px;left:2px;width:20px;height:167px;border:2px solid #999;padding:2px;background:#666;border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6b8QiMpENNCuqEMFZBj9wWbrNnJY0n_5SzINCWQCJdrvE1rXkGqpjpjOm25yQauXJG_Dw2njjWC5ThgBUDezyqTPW9MRzOy2sPjgQBfjkhjANurpk2dbsUTGvCJVjtK9JvtW3Y7F4XH4/s200/gubhugreyot167.20.jpg" /></a>

  • KLIK "SAVE Templates/Simpan Template".
  • Buka blog dan lihat hasilnya dengan membuka halaman blog kemudian arahkan cursor di atas Floating Image Link!


Catatan/Keterangan:

  • Kode di atas digunakan untuk membuat Floating Image Link dengan posisi di sebelah kanan bawah. Bila ingin merubahnya menjadi disebelah kiri maka ganti kode right:2px; menjadi left:2px;. Jika posisi di atas rubah bottom:2px; menjadi top:2px;. Perubahan kode seperti di atas bisa dilakukan untuk meletakkan gambar di 4-posisi atas-kiri, atas-kanan, bawah-kiri dan bawah-kanan.
  • Pengaturan jarak gambar dari sebelah kiri atau kanan dilakukan dengan merubah nilai 2px pada right:2px; . Semakin besar nilainya gambar akan semakin ke tengah.
  • Perubahan nilai pada bottom:2px; berfungsi mengatur jarak dari bawah blog. Semakin besar akan semakin ke atas. Hal seperti ini akan berlaku juga saat sampeyan merubahnya menjadi top:2px;
  • Kode yang berwarna biru adalah pembentuk link. Ganti dengan URL yang sesuai/diinginkan.
  • Kode yang berwarna kuning untuk menampilkan tips.
  • Kode dengan warna hijau merupakan pengatur style gambar.
  • Kode berwarna oranye di isi dengan URL Image/gambar.
  • Rubah nilai height dan width sesuai gambar yang digunakan.
  • Jika sampeyan ingin menggunakan kode paling sederhana, silahkan gunakan kode seperti berikut:

    • <a href="http://gubhugreyot.blogspot.com"><img style="position:fixed;bottom:2px;left:2px;width:20px;height:167px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6b8QiMpENNCuqEMFZBj9wWbrNnJY0n_5SzINCWQCJdrvE1rXkGqpjpjOm25yQauXJG_Dw2njjWC5ThgBUDezyqTPW9MRzOy2sPjgQBfjkhjANurpk2dbsUTGvCJVjtK9JvtW3Y7F4XH4/s200/gubhugreyot167.20.jpg" /></a>



Jika anda ingin membuat Floating Image Link yang menyertakan efek dari CSS3, silahkan buka link di bawah ini dan ikuti tutorialnya:

CSS3 Floating Image Link


Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :





» Happy Blogging - gubhugreyot «


Comments

Post a Comment