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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjPsG0W6c-biG0_kEmHmNKcwrxbOQaoj3KOoQNgWmu-FLzg7qT8GzL6RGqxWETvnmoklVX7cyhCYWulVTTL7d0seY-1KPMyaKNvvI09uXFI3WVtFJCxBFTsEVG3euR6bVs2tGXpFDSXJaNp/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

How to Create Beautiful Textarea using CSS3

Textarea Penuh Pesona

Bosses can have personal chats on their mobile phones for hours, but all eyes are on the workers if their phones ring. Bosses arrive late, leave early and take long lunch breaks, but workers have to watch the clock. When Bosses make mistakes, they frame them as the company's mistakes. When workers make the same mistakes, their careers are on the line.<br /><style type="text/css"><br />.box {<br /> width: 200px;<br /> hwight: 100px;<br /> padding: 10px;<br /> border: 2px solid blue;<br /> margin: 10px auto;<br />}<br /></style>

Textarea Biasa

Bosses can have personal chats on their mobile phones for hours, but all eyes are on the workers if their phones ring. Bosses arrive late, leave early and take long lunch breaks, but workers have to watch the clock. When Bosses make mistakes, they frame them as the company's mistakes. When workers make the same mistakes, their careers are on the line.<br /><style type="text/css"><br />.box {<br /> width: 200px;<br /> hwight: 100px;<br /> padding: 10px;<br /> border: 2px solid blue;<br /> margin: 10px auto;<br />}<br /></style>

Click the link below to open the tutorial!

Tutorial: Beautiful Textarea-Penuh Pesona

Original tutorial by gubhug reyot

How to Make Image Post on Center of Position (Buat Gambar di Tengah-Center)

The simplest way to make center position of the image

Use the following HTML code on the page post and widgets:

<img style="display: block; margin: 0 auto; text-align: center; width: 200px; height: 300px;" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" />

Adjust the position and size of the image with CSS:

The second way will make the code more compact html. We can add some CSS code to make the image look more beautiful. CSS code that can be added such as border, border-radius, padding, drop-shadow (shadow box), background, hover and some CSS3 code to give the animation. CSS3 code that can be exploited mainly in the form of CSS3 transition-transformation.

Example-1 : img class="centerimg-1"
margin: 0 auto;

<style type="text/css">.centerimg-1 {
 display: block;
 margin: 0 auto;
 text-align: center;
}
</style>
<img class="centerimg-1" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-2 : img class="centerimg-2"
margin: 10px auto;

<style type="text/css">.centerimg-2 {
 display: block;
 margin: 10px auto;
 text-align: center;
}
</style>
<img class="centerimg-2" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-3 : img class="centerimg-3"
margin: 60px auto;

<style type="text/css">.centerimg-3 {
 display: block;
 margin: 60px auto;
 text-align: center;
}
</style>
<img class="centerimg-3" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-4 : img class="centerimg-4"
margin: 1.5em auto;

<style type="text/css">.centerimg-4 {
 display: block;
 margin: 1.5em auto;
 text-align: center;
}
</style>
<img class="centerimg-4" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-5 : img class="centerimg-5"
margin: 2em auto;

<style type="text/css">.centerimg-5 {
 display: block;
 margin: 2em auto;
 text-align: center;
 padding: 2px;
 border: 5px solid #bbb;
}
</style>
<img class="centerimg-5" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-6 : img class="centerimg-6"
margin: 15px auto;

<style type="text/css">.centerimg-6 {
 display: block;
 margin: 15px auto;
 text-align: center;
 padding: 4px;
 background: #990000;
 border: 4px solid #9999CC;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}
</style>
<img class="centerimg-6" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-7 : img class="centerimg-7"
margin: 20px auto;

<style type="text/css">.centerimg-7 {
 display: block;
 margin: 20px auto;
 text-align: center;
 padding: 4px;
 border: 4px solid  #003399;
 border-radius: 10px;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300;
 -moz-box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300;
 -webkit-box-shadow: -1px -1px 2px #0099FF, 1px 1px 2px #0099FF, 0 0 20px #993300; 
}
</style>
<img class="centerimg-7" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-8 : img class="centerimg-8"
margin: 25px auto;

<style type="text/css">.centerimg-8 {
 display: block;
 margin: 25px auto;
 text-align: center;
 padding: 4px;
 background: #990000; 
 border: 2px solid;
 border-color: #0099FF #CCCC33 #CCCC33 #0099ff; 
 border-radius: 12px;
 -moz-border-radius: 12px;
 -webkit-border-radius: 12px;
}
</style>
<img class="centerimg-8" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image (other elements) above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

Example-9 : img class="centerimg-9"
margin: 30px auto;

<style type="text/css">.centerimg-9 {
 display: block;
 margin: 30px auto;
 text-align: center;
 width: 300px;
 height: 300px;
}
</style>
<img class="centerimg-9" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" />

In addition to adjust the center position of the image, the margin serves to regulate the distance image with text or image above or below it.
note the picture below.

The margin determines the distance is the code:

margin: ... (px), auto;

examples:

margin: 0 auto; (top = 0, bottom = 0, letf-right = center)
margin: 10px auto; (top = 10px, bottom = 10px, letf-right = center)
margin: 20px auto; (top = 20px, bottom = 0, letf-right = center)
margin: 1.5em auto; (top = 1.5em, bottom = 1.5em, letf-right = center)

N o t e :

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

Example

<div style="float: left; font-size: 14px; color: green; border: 2px solid red; padding: 10px; margin: 0 10px 10px 0;">
When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

<img src="http://img.theomegaproject.org/thumbs/2010/07/329.jpg" width="400" height="300" />

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.
</div>

<div style="clear:both;"></div>
<img class="centerimg-7" src="http://img.theomegaproject.org/thumbs/2010/07/279.jpg" width="200" height="300"/>

This box using "float-left"

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

When you use HTML code to display the image, it would be better if included extra code in the form of clear: both (especially if it contained the html code in the form of float-float-left or right). You can put clear: both under the tag that uses a float or float-left-right.

Click the link below to open the tutorial!

Tutorial Image on Center of Position

Original tutorial by gubhug reyot