gubhug reyot
Energy Saving Mode using CSS3

Move your mouse to go back to the page!
Gerakkan mouse anda dan silahkan nikmati kembali posting kami!

Copyright 2010 gubhugreyot.blogspot.com - All rights reserved

CSS nggolekisearchporm

Drop-in Content DIV

Drop-in Content DIV-Box- DEMO

bgsGR Tutorial (http://bgsgr.blogspot.com) contains a demo of some of the designs created through the HTML code, which consists of the CSS code, CSS3, Javascript and xHTML. We tried to dedicate this HTML designs, hope it's improve the spirit of blogger friends to continue working and provide the best offerings for the reader. happy blogging and create a new useful things. Regards ...
gubhug reyot (http://gubhugreyot.blogspot.com)

gubhug reyot

Click to Close!

Dimitar Berbatov's rejuvenation continued as his brilliant hat-trick gave Manchester United a fully deserved win against Liverpool at Old Trafford.
The Bulgarian striker scored either side of the interval - the second a stunning overhead kick - to put Sir Alex Ferguson's side in complete control against a subdued Liverpool.

Tanty Template Modificaton

Dimitar Berbatov's rejuvenation continued as his brilliant hat-trick gave Manchester United a fully deserved win against Liverpool at Old Trafford.
The Bulgarian striker scored either side of the interval - the second a stunning overhead kick - to put Sir Alex Ferguson's side in complete control against a subdued Liverpool.

Create Floating Image Link using CSS3

Floating Image Link can be placed in the bottom-right corner, lower-left corner, upper-right corner, upper-left corner or in any part of the blog page. Changes in position in the set with the code left, right, top or bottom.

To change the position of Floating Image Link, you can set with left, right, top or bottom code. If you add the value of left, right, top or bottom bigger and biggger, so the Floating Image Link will be move to the middle of page, opposite of the code (left, right, top or bottom).

You can use the image with .gif, .jpg or .png file extention. When using a flash file, so only DIV tag will be used. Put flash file between opening DIV tag and closing DIV tag.

In the lower-left corner you can see the floating image link created using CSS3 with image extensions ". Jpg"!

CSS Code


#pojok {
position:fixed;
left:2px;
bottom:2px;
}  
#pojok img {
height:167px;
width:20px; 
border:3px solid #888;
padding:1px;
background:#aaa;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-o-transition:all 1.2s ease-out;
-moz-transition:all 1.2s ease-out;
-webkit-transition:all 1.2s ease-out;
}  
#pojok:hover img {
z-index:99;
background:#993300;
border-color:#FF0000;
-o-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-moz-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
-webkit-transform:rotate(380deg) scale(1.3) translate(25px,-30px);
}

xHTML


<div id="pojok">
<a href="http://gubhugreyot.blogspot.com/" target="_blank" title="You may learn about 500 of blogger tutorial, here!">
<img src="http://3.bp.blogspot.com/_550XeJhg_o8/TNJ_XRkFxMI/AAAAAAAAArM/lRw4C6CPyXU/s200/gubhugreyot167.20.jpg" /></a>
</div>


Put CSS code above ]]></b:skin> and xHTML above </body>


Click the link below to open the tutorial!

Tutorial: Floating Image Link!

Original tutorial by gubhug reyot

Recent Posts Using jQuery-CSS3

 
GR | Edited by | gubhug reyot