News Article :

Catatan Belajar | Tips Dan Trik

Home » » Cara Buat Gambar Melayang / Floating Image di Blog

Cara Buat Gambar Melayang / Floating Image di Blog

Cara Buat Gambar Melayang / Floating Image di Blog 

Hari ni Puenas nya mianta ampiun , rencananya sih tadi tu mau main kerumah temen , tapi karena terlalu panas jadi males dweh keluar rumah takut kulit jadi item hehhehe [ padahal udah item]…
Di rumah lagi sepi ,Orang rumah lagi pada keluar , jadinya ane sendirian di rumah ,O ya ternyata asik juga loh di rumah sendirian ,bisa lebih tenang tanpa ada yang ngomel- ngomel..
Udah ah sob ceritanya takut orang rumah tau , bisa panjang urusan nya…


Mendingan  langsung aja kita bahas postingan kali ini Tentang  Cara Buat Gambar Melayang / Floating Image di Blog Jika diantara sobat ada yang tertarik dengan judul diatas , silakan sobat bungkus saja judul diatas tadi heheheheh…….
Atau mungkin sobat blog  ingin tahu cara bikinnya Seperti gambar yang ada di bawah postingan ane ini,
ya sekedar untuk mempercantik blog ataupun dengan alas an-alasn lain silakan ikuti tutorial di bawah ini :
__________________________________________________
1. Silakan login ke akun blog sobat
2. di dalam menu drop down pilih yang tata letak
3. lalu pilih add Gadget 
4. selanjutnya pilih HTML / Java Script
5. Jika sudah silakan Copy / Paste Code di bawah :
_______________________________________________
posisi kanan bawah :

<a style=”display:scroll;position:fixed;bottom:0;right:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
---------------------------------------------------------------
posisi kiri bawah :

<a style=”display:scroll;position:fixed;bottom:0;left:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
_____________________________________________
posisi kanan atas
<a style=”display:scroll;position:fixed;top:0;right:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
______________________________________________
posisi kiri atas :

<a style=”display:scroll;position:fixed;top:0;left:0;”>
<img src=”https://googledrive.com/host/0B_CilEZcRURkdG0yMGRfQWhua3c/”/></a>
______________________________________________
Cttn : Teks Yang Warna Merah  silakan sobat ganti dengan Url Gambar sobat
_____________________________________________
Jika ingin gambarnya di buat transparan silakan tambahkan code html  ini
setelah “Url Gambar”style=”opacity:0.1;filter:alpha(opacity=10);”/></a>

Contoh :  aslnya seperti ini
<a style=”display:scroll;position:fixed;bottom:0;right:0;”>
<img src=”Url Gambar”/></a>

Jadi seperti ini :

<a style=”display:scroll;position:fixed;bottom:0;right:0;”>
<img src=”Url Gambar style=”opacity:0.1;filter:alpha(opacity=10);”/></a>
__________________________________________________
cttn : opacity =ukuran  transparannya bisa 0.1 dan 10 atau 0.2 dan 20
          Silakan sesuaikan mana yang sobat suka

Jka sudah selesai Silakan Simpan / save , Lalu lihat Hasilnya Semoga Bermanfa'at

2 komentar:

 
Support : Copyright © 2014 Catatan Belajar | Tips Dan Trik - All Rights Reserved
Blog creatif By : Wildan Taupiq | Proudly powered by : Blogger