Membuat Objek Melayang

Posted by Herman on Wednesday, May 20, 2009 21 comments

Jika anda sering melakukan blogwalking maka anda akan melihat ada beberapa blog yang memasang objek melayang. Objek melayang adalah objek yang selalu berada dilayar meskipun scrollbar digulung keatas ataupun kebawah. Sehingga objeknya selalu tampak oleh pengunjung. Objek ini bisa berupa teks, gambar, link, iklan, widget, flash, dll.

Nah berikut saya akan memberikan tutorial membuat objek melayang dengan fungsi redup atau opacity. Bagi anda yang pernah menggunakan photoshop pasti sudah tahu apa itu opacity. Sebagai gambaran silahkan lihat disini lalu arahkan mouse anda ke musik player yang berada di pojok. Maka musik playernya akan menjadi visible.

Ok sudah jelas ya? Nah bagi anda yang ingin mencobanya. Berikut caranya:

1. Login ke Blogger. Lalu klik Design -> Edit HTML

2. Letakkan kode dibawah ini diatas kode ]]></b:skin>

#float {
opacity: 0.6;
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); }

#float:hover {
opacity: 1.0 }

Keterangan:
0.6 merupakan tingkat keredupannya. Semakin rendah nilainya semakin redup objeknya. (nilainya mulai dari 0.1 - 1)

Tulisan yang dicetak tebal merupakan posisi objek. Jika anda ingin meletakkan diatas maka gantilah bottom dengan top. Jika anda ingin meletakkan objeknya disebelah kanan maka gantilah left dengan right.

Jika anda ingin meletakkan objek ditengah maka aturlah nilai bottom atau left-nya. Semakin tinggi nilainya semakin ketengah objeknya.


3. Setelah itu, letakkan kode berikut diatas </body>

<div id='float'>letakkan konten anda disini</div>
Silahkan ganti tulisan yang berwarna merah dengan teks, link, gambar, iklan, atau widget anda.

4. Jika sudah simpan template anda dan lihat hasilnya.


Recent Posts:

21 comments

pengguna said... 20 May, 2009
m a n t a p . . .
herman said... 20 May, 2009
thanks sob uda bersedia ngasih komen :D
Rosidi said... 23 May, 2009
halo Mas Herman....tips tipsnya bagus bagus saya suka
tambah lagi ya mas....tipsnya yg lebih keren.
salam sukses ya
bangher said... 25 May, 2009
thanks info boz ..
jani said... 31 May, 2009
halo mas herman..mo nanya/ di blog ku ada button pto,gambar,home, tapi tidak berfunsi..gimana ya caranya bisa fungsi?
jani-ungkal.blogspot.com
PMR MTs Negeri Bogor said... 23 June, 2009
makasii ya atas informasinya! artikel mas sangat membantu!!;)
Anonymous said... 07 November, 2009
assalamu'alaykum.
kalo pake multiply juga sama nggak mas?
ahendras said... 05 December, 2009
numpang tanya...
napa ya gambar sy ga keliatan,pgen ngedit lagi eh ada kesalahan XML...kira" napa ya???
fatur said... 15 February, 2010
Wah Manteb Gan Artikelnya..cb Langsung ke TeKaPe ya..? Thnks
Unknown said... 19 May, 2010
kenapa yach,, ko aq gak bisa
Unknown said... 29 June, 2010
kok pas di save gk bisa sob ?

katanya tidak well-formed
Anonymous said... 10 February, 2011
:D
Thoi Cadhikz said... 26 April, 2011
GAGAL EUY... BIKIN OBYEK PLAYER MISIK MELAYANG=((
Arifin Abifikri said... 08 October, 2011
This comment has been removed by the author.
Arifin Abifikri said... 08 October, 2011
This comment has been removed by the author.
Selamat Rijali Hadi said... 27 October, 2011
Info Yang Sangat Bagus Bagi Pemula, Thanks
http://mylive-bangmet.blogspot.com
doremifacely.blogspot.com said... 06 November, 2011
wktu itu saya pernah tau ad blog yg begitu dibuka bs kluar musikny tp gak ad musik playerny. itu carany gmn y?
makasih sblmny
Zaen said... 17 January, 2012
Banyak belajar disini...
thanks sobat herman,
salam kenal...
Unknown said... 21 April, 2012
sangat beramnfaat sob
makasih tutornya ;)
CV.CERASTA said... 24 May, 2012
ko gagal sih.? trz ga bza melayang lagi huft payah.
ҒдӉяїzдL ѕҫяєдмїлб dєдтђ мєтдӏ said... 06 August, 2012
BAGUS nih artikel nya.
mampir yah dunia-yahuud.blogspot.com

back link yah ;))

:)) :)] ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* : 8-} ~x( :-t b-( :-L x( =))

Post a Comment