Search here

Type a word related to the post, then click the search button !

Memuat...
English
Bru masuk angin!

Flag Counters

Flag Counter

Pengikut

Recent Comments plus Kode CSS Box Gelap

Recent Comments

blog-indonesia.com

Vertical Menu

CLICK any categories for open!
Gubhug Reyot

Sobat Ngeblogh

Sobat Ngeblogh

Buat sobat blogger yang mau ikutan jadi follower silahkan KLIK link Follower (Follow) di ujung kanan-bawah. Dari hasil monitoring, ternyata yang link-nya telah dimasukkan ke "Sobat Ngeblogh" mengalami pertambahan pengunjung secara signifikan!
Terima kasih .: Salam :.
gubhug reyot

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):


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="http://1.bp.blogspot.com/_3jpvq4jlgs8/TNJB-89JJ1I/AAAAAAAAAKA/Z8vE5IN8E2M/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="http://1.bp.blogspot.com/_3jpvq4jlgs8/TNJB-89JJ1I/AAAAAAAAAKA/Z8vE5IN8E2M/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:



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





» Happy Blogging - gubhugreyot «


8 komentar:

  1. info nya bener2 dahsyat mas...untu saya yang newbie...terimakasih banyak mas ata infonya

    BalasHapus
  2. aduh ternyata udah d perbaiki jga gambar'y !!!
    knpa emang'y kag????

    BalasHapus
  3. Aduh... apa salah ku ...
    Knapa aku di ban ama tinypic.com, ya?
    Dosa gerangan apakah yang telah aku perbuat hingga dia setega ini pada diri ku yang hanya bisa pakai image hosting serba gratisan?!
    Akan selalu seperti inikah nasib si miskin?
    Yang bru bingung cari kerja, lagi!
    Ah..., berapa lama aku harus mengganti semua gambar posting yang jumlahnya ratusan ini?
    Aku hanya bisa memohon maaf kepada semua sobat jika beberapa waktu harus terganggu dg semua kekacauan yang sama sekali tak pernah diharap ini!

    'ma kasih atas dorongan spirit n perhatian seluruh sobat bllogger!

    Salam ...

    gubhug reyot

    BalasHapus
  4. iya kang,,, emang tinny ska gitu saya jga pernah mengalami hal yg sama . . .

    pokk'y semangat trus buat gubhug reyot . . .

    BalasHapus
  5. Terima Kasih banget tuk pencipta gubhug reyot atas ilmunya...sdh sy praktekan ilmu Sampeyan di www.mahaengcell.ucoz.com

    BalasHapus
  6. nice aarticel sangat membantu saya dalam membangun blog.tukar link donk mas,thanks b4.
    rikzamusica.blogspot.com

    BalasHapus
  7. 3S aja ya (Salam Sukses Selalu)

    BalasHapus
  8. sekedar info gan file gambar di GR tidak dibanned,saya sering merhatiin kalo jam 2 dinihari ampe pagi semua utuh,tapi kalo pagi ampe selebihnya , paling sering semua hancur,kemungkinan tiny pic,imageshack, jadi masalah kalo gambar yang dipasang banyak yang make,makanya mungkin paling amannya upload gambar ditinypic /images hack dilengkapi watermark,dan di tag, alternatif gratisan lain terbaik upload image yang ukuran gede,picasa google,atau buat blog lagi di wordpress atau blogspot atau situs di 000space dengan domain yang tersedia disana,yang fungsinya cuma untuk nampung file gambar kecil yang umum seperti button image ,yakin gan lebih awet ketimbang tinypic/imageshack...sorry gan kalo ane sok tau..ane ngeblog terinspirasi artikel+tutorial 2 blog doang ( karena paling sering make CMS joomla ), salah satu Blog dari yang ane suka blog GR, blog ane banyak belajar disini makanya sering liat kondisi di GR hehe..

    BalasHapus

 
GR | Edited by | gubhug reyot