Demo and Code Floating Box

#topbar {
position:absolute;
border:4px double #ffcc00;
padding:10px;
background:#000;
width:885px;
visibility:hidden;
z-index:100;
text-align:justify;
font-size:12px;
font-family:cursive;
font-weight:800;
color:#66ccff;
margin:0 20px;
opacity:0.4;-moz-opacity:0.4;filter:alpha(opacity=40);
}
#topbar:hover {
opacity:1.0;-moz-opacity:1.0;filter:alpha(opacity=100);
}

<script type="text/javascript">
//<![CDATA[
var persistclose=0
var startX = 30
var startY = 5
var verticalpos="fromtop" //"fromtop" or "frombottom"
function iecompattest(){return (document.compatMode && document.compatMode!="BackCompat")? 

document.documentElement : document.body}function get_cookie(Name) {var search = Name + "="
var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search)
if (offset != -1) { offset += search.length
end = document.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))}}
return returnvalue;} function closebar(){ if (persistclose)
document.cookie="remainclosed=1"
document.getElementById("topbar").style.visibility="hidden"}
function staticbar(){barheight=document.getElementById("topbar").offsetHeight
var ns = (navigator.appName.indexOf("Netscape") != -1) || window.opera;var d = document;
function ml(id){var el=d.getElementById(id);if (!persistclose || persistclose && get_cookie("remainclosed")=="") 

el.style.visibility="visible"
if(d.layers)el.style=el; el.sP=function(x,y){this.style.left=x+"px";this.style.top=y+"px";};
el.x = startX;if (verticalpos=="fromtop") el.y = startY;else{el.y = ns ? pageYOffset + innerHeight : 

iecompattest().scrollTop + iecompattest().clientHeight;el.y -= startY;}return el;}
window.stayTopLeft=function(){if (verticalpos=="fromtop"){var pY = ns ? pageYOffset : 
iecompattest().scrollTop;ftlObj.y += (pY + startY - ftlObj.y)/8;}
else{var pY = ns ? pageYOffset + innerHeight - barheight: iecompattest().scrollTop + iecompattest().clientHeight - 
barheight;ftlObj.y += (pY - startY - ftlObj.y)/8;}
ftlObj.sP(ftlObj.x, ftlObj.y);setTimeout("stayTopLeft()", 10);}
ftlObj = ml("topbar");stayTopLeft();}
if (window.addEventListener)window.addEventListener("load", staticbar, false)
else if (window.attachEvent)window.attachEvent("onload", staticbar)
else if (document.getElementById)window.onload=staticbar
//]]>
</script>

<div id="topbar">
<img src="image.jpg" width="100" height="85" style="border:4px solid #fff; float:left; margin: 0 10px;" />

--------- this your script ---------

<a href="" onclick="closebar(); return false"><img src="http://i964.photobucket.com/albums/ae124/gubhugreyot/button/2dtlqu.gif" border="0" width="50" height="30" style="float:right; margin:8px;" /></a>
</div>

Demo Text Transform Rotate 180deg For Blogger

Demo:

No Effec Hover

YOUR TEXT HERE

With Hover Effec

YOUR TEXT HERE

Code CSS

.idntex{
font-weight:bold;
transform:rotate(180deg);
-o-transform:rotate(180deg);    
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-khtml-transform:rotate(180deg);     
}

.idntef{
text-align:justify;
padding:10px 0px;
}    
.idntef span{
display:block;
font-weight:bold;
transform:rotate(180deg);
-o-transform:rotate(180deg);    
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
-khtml-transform:rotate(180deg);
tansition:transform ease-in 1s;   
-o-tansition:transform ease-in 1s;
-moz-transition:-moz-transform ease-in 1s;
-webkit-transition:-webkit-transform ease-in 1s; 
-khtml-transition:-khtml-transform ease-in 1s;     
} 
.idntef:hover span{
transform:rotate(0deg);
-o-transform:rotate(0deg);    
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
-khtml-transform:rotate(180deg);   
-khtml-transform:rotate(0deg);
}

Ku Merindukanmu

<style type="text/css">
.SyntaxHLbox{
width:auto;
border:4px solid #993333; 
overflow:auto; 
margin:20px 5px 5px;
background:#222;
}
.SyntaxHLbox h2{
font:18px Times New Roman;
font-weight:bold;
padding:3px 6px;
text-align:center;
margin:8px 5px -5px;
background: #000066 url(http://i46.tinypic.com/16bekaw.jpg);
color:white; 
display:block;
border:1px solid #66FFFF;
-moz-border-radius:12px;
}
pre {
margin:0;
padding :12px 8px;
width:10000px;
line-height:16px;
background:#222 !important;
color:lime !important;
}  
code {
font-size:12px;
}
.javascript .comment{
color :#fff;
}
.javascript .string{ 
color:#33CCFF;
}
.javascript .keywords{
color:#99FF99;
}
.javascript .global{
color:#FFCC33;
}
.javascript .brackets{
color:#FF99FF;
}
.css .comment{
color:#666; 
font-weight:bold;
}
.css .properties{  /* color : dsb*/
color:blue;
padding-left:30px;
font-family:Cursive; 
font-weight:normal;
}
.css .selectors{ /* #main dsb */
color:#99CCFF;
font-weight:bold;
font-family:Verdana;
font-size:11px;
} 
.css .units{ /* px */
color:#FF9933;
padding-left:2px; 
font-family:Verdana;
}
.css .urls{
color:#00FFFF;
}
.html .tag{ /* body, tittle, head dsb */
color:#66FF66;
} 
.html .comment{
color:#666;
font-style: italic;
}
.html .string{  /* dalam tanda " : javascript dsb */
color:#FFCC99;
}
.html .doctype{
color:#99FFCC;
} 
</style>