Kalau kamu membuka-buka blog ini pasti kamu akan bertanya-tanya kenapa gambar panah ke atas dan ke bawah tetap diam sekalipun kamu menggulung layar (menarik scroll)? Nah, itulah yang dimaksud dengan gambar melayang (float image). Jadi maksud gambar melayang disini bukannya gambar yang bisa melayang kesana kemari seperti Gatotkaca, tapi gambar yang tetap diam (statis) sekalipun scroll ditarik.
Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.
Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:
Jika kamu ingin mengubah letak gambar, ubah saja posisinya (top dan right) di atas dengan bottom untuk gambar di bawah dan left untuk gambar sebelah kiri. Dan jika kamu ingin mengubah gambar, ganti saja alamat gambar pada src="alamat gambar" dengan alamat gambar yang kamu inginkan (Bocoran gambar: kunjungi Adiwidget). Demikian juga jika kamu ingin mengubah link (tautan) untuk gambar tersebut, kamu tinggal mengubah alamat tautan pada href="alamat tautan" dengan alamat tautan yang kamu inginkan (Mengenai link lihat Membuka Link Di Halaman Tab Baru).
Lalu bagaimana jika ingin float image-nya lebih dari satu? Kamu tinggal meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'> dst., lalu ubah menjadi gambar2 dst.
Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.
Nah, mudah kan? Selamat mencoba...
Referensi: Dari berbagai sumber
Lalu apa mamfaat dari adanya float image ini dan bagaimana cara membuatnya?
Mamfaatnya selain membuat tampilan blog kamu semakin keren, juga untuk menambahkan tautan (link) pada gambar tesebut sehingga jika gambar itu diklik akan langsung ke alamat yang dijadikan tautan.
Cara membuat float image ini juga cukup mudah, kamu bisa mengikuti langkah-langkah berikut:
- Dari halaman Dashboard klik Tata Letak dan pilih Edit HTML.
- Cari kode berikut dengan menekan Control F :
]]></b:skin>
- Jika sudah ketemu, kopikan kode berikut :
#gambar1 { position:fixed; _position:absolute; top:0px; right:0px; clip:inherit; z-index:+1000;} - Letakkan kode tersebut di atas ]]></b:skin>
- Setelah itu kopikan kode berikut :
<div id="gambar1"> <a href="http://ruangsc.blogspot.com/" target="_blank" title="Tips Membuat dan Mendesain Blog"> <img border="0" src="http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif"/></a> </div>
- Letakkan kode tersebut di antara </head> dan <body>
- Lakukan Pratinjau (Preview). Jika sudah OK baru simpan.
Jika kamu ingin mengubah letak gambar, ubah saja posisinya (top dan right) di atas dengan bottom untuk gambar di bawah dan left untuk gambar sebelah kiri. Dan jika kamu ingin mengubah gambar, ganti saja alamat gambar pada src="alamat gambar" dengan alamat gambar yang kamu inginkan (Bocoran gambar: kunjungi Adiwidget). Demikian juga jika kamu ingin mengubah link (tautan) untuk gambar tersebut, kamu tinggal mengubah alamat tautan pada href="alamat tautan" dengan alamat tautan yang kamu inginkan (Mengenai link lihat Membuka Link Di Halaman Tab Baru).
Lalu bagaimana jika ingin float image-nya lebih dari satu? Kamu tinggal meng-kopi kode #gambar1 dst., lalu ubah menjadi gambar2. Kopikan pula kode <div id='gambar1'> dst., lalu ubah menjadi gambar2 dst.
Float image ini juga bisa kamu mamfaatkan untuk memberi perintah ke atas dan ke bawah halaman blog.
Nah, mudah kan? Selamat mencoba...
Berikut adalah beberapa gambar yang bisa kamu pilih (klik untuk melihat gambarnya!)
- Kupu-kupu 1
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/kupu-kupu.gif- Kupu-kupu 2
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/butterflyT.gif- Mickey Mouse
URL:
http://i563.photobucket.com/albums/ss76/peace_enes/Mickey.gif
Referensi: Dari berbagai sumber
66 komentarPosting Komentar
Gue yang pertama uey...
kini butterfly nonghol dihalaman blog gue, tambah keren deh... hatur nuhun.
waduh bos kok nga bisa ya?
@Rev Desi:
Ada dua kemungkinan jika template sobat tidak bisa ditambahkan float image:
1) Ada kesalahan pada editing yang sobat lakukan, misalnya pada pengeditan link dan/atau gambar.
2) Template sobat tidak mendukung untuk float image ini, seperti pada template Sastra Culun
Biasanya template yang tidak mendukung ditambahkan float image ini adalah template hasil konfersi dari template wordpress.
Untuk itu, coba sobat cek ulang, baik pada pengeditan maupun sumber template sobat.
Bos makasi banyak!!!
gua dari 0 jadi 9
kwkwkwkw
g' sa neh...........
gmana yah.........sulit amet!1
pdhal dh ngikuti tu perintah
@Rep Blog Snake:
Sama-sama sob...
@Rep Syakhel:
Ga salah sobat, banyak yang bisa berhasil kok. Mungkin template sobat tidak mendukung atau ada yang tidak kekopi. Soalnya untuk kode CSS, sekalipun cuma titik atau titik koma, sangat berpengaruh
bos saya uda coba dan uda jadi tapi jadinya kok ada diatas header dan gambar nya itu ga' kayak melayang hanya ada diatas aaja...gimana ya bos,terus menu - menu di web saya jadi turun semua gimana ya bos caranya.tolong di check di www.adinetwork.co.cc dan kalau bisa tambah kontak saya di yahoo messenger nih alamatnya thnkcomjrngn@yahoo.co.id
@Rep Adi:
Memang tidak semua template mensupport float image ini, terutama template-template yang menggunakan background gambar, bukan warna, jadinya float imagenya tertutup sama gambar template.
Oya, coba hilangkan verifikasi kata pada settingan komentar blog sobat. Saya mo komentar susah. Kotak verifikasi katanya gak muncul
Tolong Kunjungi Blog Saya Temen - Temen Guru Semua,,saya Ingin Banyak Menjalin Teman,,Saya Ini Pemula Blog...
sekarang kok susah sih ngelayout gambar di blogspot, dalam artian gambarnya gak bisa dibuat sejajar samping kanan dan kiri pada sebuah postingan.. layout yang saya inginkan adalah sperti ini :
[image1] [image2]
gmn yh caranya.. thx..
ninequadrat.blogspot.com
@Rep Iin:
Ada 2 kemungkinan sob:
1) Pada kode CSS template sobat memang dibuat sengaja seperti itu, coba cek kode entry-img template sobat.
2) Sobat menggunakan perintah penempelan gambar yang salah. Coba sobat pelajari artikel ini
kunjungi blog sites saya
dedprezent.co.cc
thanks be4
Waoow,..Blognya Baguss Bngeett..! Jd Pengen Bisa tp msh nyari2 bahan neh..gmn ea caranya..?
makasih mas,, artikelnya sangat bermanfaat..
Bagus,.... thx mas
maksih taz ilmunya,,...:)
Enak banget nanya di sini cepat banget di jawab ma yg punyaa.
SALUT.....
terimakasih ya atas pengetahuannya..
mas saya mau tanya dong.
gimana caranya biar orang lain gak bisa jiplak karya kita melalui klik kanan...?
tolong jawabannya dikirim ke secret_bealive@yahoo.co.id
makasih ya sebelumnya...
gak asik maen sini gk bisa di copy
makasi
mantap ni blog oom
mantap......deh.infox........
THANK YOU ..
karyanya bener2 amazing...salut buat web master
Thanks infonya mas..
mampir juga ya ke BOOK ONLINE
www.atan-hacker.blogspot.com
kok di atas truss float image nya padahal gw mau yg bottom tpi dah di coba teterusan jadi
"PIKASEUBEULEUN"
kumaha atuh kang
@Ricky:
Masa sih sob? Di tempat lain bisa. Di blog ini juga pake float di bawah untuk panah ke atas dan ke bawah.
Aya nu salah ngasupkeun meureun...
mantap sob langsung mau coba ahhh....nice post
ane mau open in new tab Gan !!!!
bukan mau ngejiplaaaakkkk plakk plakk plakkkkkkkk !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
Dah kang urang jadi alus euy blog na
NUHUN KANG
di templet aku float imagenya ikut bergeser bila kursor digeser,,,ada solusi??????????? trimsgan....
makasih gan tips nya..
ngebantu ane bgt yg masih pemula dibolg
thanks om lumayan buat mempercantiik blog
boleh dicoba tuh... trims ya, dari http://bayung.com/.
blognya keren gan, artikelnya bagus .. mampir ya ke blog ane
makasih ya kang saya banyak belajar dari sini..tapi kok URL bola dunianya gak ada...liat blog saya ya kang buat dikoreksi2 :D delni3c.blogspot.com
knp blog sy tdk mau kk tolong penjelasan nya lebih lnjut
Thanx's ya
thanks gan di ane bisa...
mampir adiprayoga.blogspot.com
maksudnya antara bidy sama head apa yyy
hatur nuhun lg kang ,,,, keren pisan euy .....
mantap gan.,thnks infonya, izin sedot ilmunya gan.,tanya donk cara nambahin tag cloud gmna gan.,gagal mulu., nehh.,ane pake blogspot juga.
terimakasih....mantap bgt...
bos thanks banget,tp sy ga bisa membuat halaman blog saya sebagus bos saya ga bisa,sy tetap menggunakan template yang di sediakan oleh blogger.
kalau untuk merubah ukuran gambarnya gimana?
@Shoshuri:
Untuk mengubah ukuran image, tambahin aja width dan height, misalnya:
<img src="LINKGAMBAR" widht="20" height="30"/>
makasih infonya, kupu2 ada dmana2.
thank you !
ada tutgan orialnya gk nich gan untuk tulisan jalan spt di kiri atas yg ilang muncul tuh, tks y
tukar link yuk,,,
makasih bnyak gan ,dicoba dl
cihuy.....
Mantap kang...
saking mantapnya sy sampe bingung mulai dari mana...he..he..
Usman Calliong Kendari
terima kasih atas bantuannya.....by aga di kofa
tanks bos
Bos Ti Ngawitan dugi ayeuna abdi satia ka blog bos...abdi mah pemula nuhunkeun bimbingana bos. Hatur nuhun sateuacana
thank's yaa... saya sangat terbantu :)
http://penulistips.blogspot.com
salam kenal kang enes, kalau kode a href di ganti dengan kode ifame kok tidak bisa ya?
apa ada cara lain?
susah juga nih
@Hermawan. usSalam kenal juga mas...
a href kan perintah link (anchor), kalo iframe kan untuk frame (kotak). Misal <iframe src="Gambar"
gak ketemu menu edit html nya di mana?
thx gan,,punya ane udah bisa...hehehe
Thanks Gan, For ALL Solution Membuat Gambar Melayang (Float Image) Pada Blogspot...
Makasih kang,,, blog ane tambah keren
mantap tipsnya gan joooooooooooos
jual obat bius>>>>http://www.vimaxpasutri.com/
Mantaap sob artikelnya, ditunggu artikel yang lainnya
Izin menyimak saja sob
http://goo.gl/Poee61
Tambahkan Komentar
Terimakasih atas semua apresiasi yang sobat berikan.