ho to make a floating image like I do at the bottom right of my page..
side:http://angel.exabytes.com.my/idevaffiliate.php?id=3206209
This tutorial is about to create float image that will always show on your corner blog althought you drag side scroll bar. see example. You can put an image, widget, clock etc on the corner.
Step by step to create Float image.
1. Login ke blogger then click "Layout -->> Edit HTML
2. Find this code ]]></b:skin>, then put the code below above it.
side:http://angel.exabytes.com.my/idevaffiliate.php?id=3206209
Step by step to create Float image.
1. Login ke blogger then click "Layout -->> Edit HTML
2. Find this code ]]></b:skin>, then put the code below above it.
#float_corner {
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);}
3. The bold text is it’e position. you can change it with "top", "bottom", "left", "right"
4. The next step is put the code below before tag</body>
<div id="float_corner">
<a href="http://sueweetpea.blogspot.com"> <img src="
http://blogoholic.info/files/soniclari.gif" border="0" /></a>
</div>
"http://sueweetpea.blogspot.com" is a link.
"http://blogoholic.info/files/soniclari.gif" is image URL, Change it with your own image.
5. If you wanna fill it with a widget, change the red code with your widget code.
6. Save and preview your blog.
How to cartoon your image like me
Step 1 : click here http://cartoon.pho.to/
Step 2 : follow the instruction given at that page...
Step 3 : Done
How to make transparent background picture
Use Adobe Photoshop, never mind what version you use
Step 1 : open your file picture
Step 2 : use ‘Quick Selection Tools’ >> chose ‘Magic Wand Tool’
use that tools to crop path you needed only,
the you will see your picture have a dotted-line...
Step 3 : create new windows from your adobe (create new actually)
copy the part you needed and paste it here
Step 4 : Done...your pic automatically got the transparent background
save as suri.png
Step 5 : upload your photo here https://picasaweb.google.com to maintain your file format (.png)
everything I've learn from here http://rohaizamahmod.com/blog/2010/11/jom-buat-floating-image-atau-gambar-terapung-pada-blog/#axzz1QXFTMPFJ
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);}
3. The bold text is it’e position. you can change it with "top", "bottom", "left", "right"
4. The next step is put the code below before tag</body>
<div id="float_corner">
<a href="http://sueweetpea.blogspot.com"> <img src="
http://blogoholic.info/files/soniclari.gif" border="0" /></a>
</div>
"http://sueweetpea.blogspot.com" is a link.
"http://blogoholic.info/files/soniclari.gif" is image URL, Change it with your own image.
5. If you wanna fill it with a widget, change the red code with your widget code.
6. Save and preview your blog.
How to cartoon your image like me
Step 1 : click here http://cartoon.pho.to/
Step 2 : follow the instruction given at that page...
Step 3 : Done
How to make transparent background picture
Use Adobe Photoshop, never mind what version you use
Step 1 : open your file picture
Step 2 : use ‘Quick Selection Tools’ >> chose ‘Magic Wand Tool’
use that tools to crop path you needed only,
the you will see your picture have a dotted-line...
Step 3 : create new windows from your adobe (create new actually)
copy the part you needed and paste it here
Step 4 : Done...your pic automatically got the transparent background
save as suri.png
Step 5 : upload your photo here https://picasaweb.google.com to maintain your file format (.png)
everything I've learn from here http://rohaizamahmod.com/blog/2010/11/jom-buat-floating-image-atau-gambar-terapung-pada-blog/#axzz1QXFTMPFJ
No comments:
Post a Comment