Thursday, June 30, 2011
Membuat Gambar Melayang di Blog
Saat ini saya akan membahas bagaimana cara membuat gambar melayang di blog. gambar melayang adalah gambar yang letaknya selalu tetap dan tidak terpengaruh scrool mouse. Apakah sobat tertarik membuatnya ???. Sebelum membuatnya, sobat harus menyiapkan gambar. terserah sobat mau gambar bergerak yang biasanya berformat .gif atau gambar bisa yang berformat .jpeg atau bisa juga gambar foto kita...hehehe biar narsis.
Gambar yang ingin dipasang lalu di upload atau disimpan di image hosting. sobat bisa menyimpannya di photobucket.com, imageshack.com, flickr.com atau image hosting lain. Tetapi untuk gambar dengan format .gif saya biasa menyimpannya di imageshack.com. ooo...iya saya sarankan, gambar yang ingin dibuat melayang sebaiknya gambarnya jangan besar-besar karena dapat mengganggu pengunjung blog kita.
Nah untuk step-step selanjutnya akan saya tulis lebih ringkas. Setelah sobat menyimpan di image hosting, inilah yang harus sobat lakukan :
1. Login Acount blogger anda.
2. Masuk pada Pengaturan.
3. Pilih Tata letak.
4. Edit html.
5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >
Ket : Kode yang tercetak kuning ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.
6. Berikutnya cari lagi di dalam template anda kode < /body >
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.
Ket : kode yang berwarna kuning diganti dengan url tempat gambar anda disimpan.
7. Simpan,
Gambar yang ingin dipasang lalu di upload atau disimpan di image hosting. sobat bisa menyimpannya di photobucket.com, imageshack.com, flickr.com atau image hosting lain. Tetapi untuk gambar dengan format .gif saya biasa menyimpannya di imageshack.com. ooo...iya saya sarankan, gambar yang ingin dibuat melayang sebaiknya gambarnya jangan besar-besar karena dapat mengganggu pengunjung blog kita.
Nah untuk step-step selanjutnya akan saya tulis lebih ringkas. Setelah sobat menyimpan di image hosting, inilah yang harus sobat lakukan :
1. Login Acount blogger anda.
2. Masuk pada Pengaturan.
3. Pilih Tata letak.
4. Edit html.
5. Kemudian copy code dibawah ini dan paste di atas kode ]]> < /b:skin >
#melayang {
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); }
Ket : Kode yang tercetak kuning ( bottom dan left ) menunjukan letak gambar. Letak gambar dapat di ubah dengan mengganti kode tersebut (left=kiri, bottom=bawah, right=kanan, top=atas) sesuai dengan keinginan anda.
6. Berikutnya cari lagi di dalam template anda kode < /body >
Kemudian copy pastekan code berikut ini dan letakkan diatas kode tersebut.
<div id='melayang'>
<img src='http://i478.photobucket.com/albums/rr146/tovarossi/bird_ann.gif'/></a>
</div>
Ket : kode yang berwarna kuning diganti dengan url tempat gambar anda disimpan.
7. Simpan,
Labels:
CSS
Subscribe to:
Post Comments (Atom)
Blog Archive
- 2012 (7)
-
2011
(362)
- December(5)
- November(6)
- October(5)
- September(9)
- August(20)
- July(227)
-
June(90)
- Membuat Sub Dropdown Pada Horizontal Menu
- Membuat Dropdown Pada Horizontal Menu
- Membuat Horizontal Menu di blog 2
- Membuat Horizontal Menu
- Penyebab Pengunjung Tidak Jadi Berkomentar
- Membuat Navbar Blogger Auto Hide
- Mengembalikan Navbar Blog yang Hilang
- Membuat Navbar menjadi Transparan
- Membuat Gambar Melayang di Blog
- memberi efek blur pada gambar
- Membuat Slide Headlines
- Membuat Artikel yg Berhubungan / Related Post
- Membuat Menu Slide Show Tab View
- Comment Owner Berbeda dengan Pengunjung
- Mengubah Ukuran Template Blog
- Membuat Footer 3 Kolom dengan Background
- Blogger sudah support fungsi Readmore
- Customisasi Tampilan Read more
- Google Translate Versi Baru
- Cara Menghilangkan Tulisan di Poskan Oleh: dan Lab...
- Cara Membuat Back To Top
- Tips Menghilangkan Bau Badan..Sudah Terbukti!!
- Membuat Link Berkedip Pada Saat Disorot Mouse
- Menghilangkan Sidebar Saat Membuka Posting
- Cara Membuat Search Engine Di Blog
- Mengganti Tampilan Cursor (Mouse)
- Cara Membuat Artikel Blog Tidak Bisa di Copy
- Cara Membuat Related Post Thumbnail/You Might Also...
- Tips Menghilangkan Pesan Windows Is Not Genuine Di...
- Cara Membuat Gambar atau Teks Berjalan ke Atas
- Cara Memasang Widget Animasi Entri Populer Pada Blog
- Cara Pasang Follow me Twitter di Blog
- Mozilla Firefox 5
- Background Buku Tamu
- Folder Marker Pro v3.2.0 Full Serial
- File Splitter & Joiner 3.3 Free
- Avatar Bobble Battles Full Version
- Game Fruit Ninja HD v1.6.1 Full Cracked
- Unlocker 1.9.0 Free
- Full Crack
- Pasang Counter Di Blog
- Cara menghilangkan Tanggal Posting
- Cara Membuat Buku Tamu Blog Show/Hide di Bagian Atas
- Membuat Chatbox Bergaya Absolute Vertical Sliding ...
- Pasang Jam Animasi Colorfull With CSS & jQuery
- Pasang Energy Saving/Power Save Mode di Blog
- Cara Membuat Buku Tamu Blog Tanpa Di Klik Terbuka
- Cara mudah membuat Scroll pada widget
- TuneUp Utilities 2011
- Membuat Number Page Navigation Blogspot
- Cara Membuat Artikel Terkait (Related Post) dengan...
- Cara Membuat Artikel Terkait (Related Post) dengan...
- Emotion Cw Sexy
- Emotion Monyet
- Emotion Kakus
- Emotion Upin & Ipin
- Cara Memasang Google Translator versi dropdown
- Cara Membuat Reply Komentar
- Cara Menghilangkan Tanda Obeng Pada Blog
- Membuat Scroll Menu Otomatis Buat Arsip Blog
- Cara Membuat Read More Otomatis
- Cara Merubah Tulisan Next Page Dengan Gambar
- Cara Membuat Menu Diatas Top Header
- Cara Pasang Widget SMS Gratis di Blogspot
- Cara Menampilkan YM di Blog
- Scrip Cursor Ular-Ularan
- Cara Pasang Buku Tamu Tersembunyi
- Cara Mendaftarkan Sitemap Ke Google
- Pasang Widget Google Translate
- Cara Merubah Navbar Bawaan Blogger
- Google Friend Connect
- Tips Mengganti Logo Blogspot
- HJSplit
- Menjadikan Windows XP seperti Vista
- Free Logon Screen XP
- Download Windows Xp Seven Ultimate SP3 2010
- Windows XP SP3
- Cara Membuat Banner
- Cara merubah Domain Blogspot Menjadi CO.CC
- Cara mempercepat Mozilla Firefox
- Kode Warna
- Mau Tukeran Link/Banner,...??
- CSS Compressor
- Contact Us
- Daftar Isi
- Parse Kode Script HTML
- Guest Book
- Daftar Banner Teman
- Daftar Link Teman
- Chat Room
About Me
- Sibuk Banget
0 comments:
Post a Comment