CLICK HERE on your header

Annyeonghaseyo..

Today i will show you how to make sliding box over your header.like one i had..
This tutorial i made by myself..the combination from the existing one.
I hope you happy using my tutorial.

1. Copy this code

<div style="margin-bottom:-20px;"/>
<style>
.maintitle {
border-radius: 0px 0px 15px 15px;
width:300px;
padding:10px;
color:white;
font-size:11px;
height:20px;
margin-top:150px;
margin-left:auto;
margin-right:auto;
background: #000;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}
  #isikotak {
position:fixed;
border:0px solid #FFD9E8;
width:100%;
left:0px;
top:-140px;
height:150px;
padding:4px;
text-align:left;
background-color:white;
background-color:#000;
background-position: right;
background-repeat:no-repeat;
color:#fff;
font-family:Lucida Calligraphy;
-webkit-transition: 1.0s;
font-size:10px;
-moz-transition: 1.0s;
 }
 #isikotak:hover {
top:0px;
  }
</style>
 <center><div id="isikotak"><div class="maintitle">
<center>C L I C K   H E R E</center></div>
<div style="margin-top: -80px;">
<img src="http://31.media.tumblr.com/tumblr_lgu4qd4rM81qetvgko1_500.png" style="border-bottom-left-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0px; border-top-right-radius: 0px;padding:2px;;filter:alpha(opacity=90);opacity:.9; border: 1px dotted #e2e2e2;background-color:#eee; height: 100px;margin-top:-93px; padding: 0px; width: 150px;"/><div style="margin-top:-113px;margin-left:160px;letter-spacing:.1em;"/><span style="font-style:italic;font-size:12px;color:#FFE0E9;">W</span>elcome to my blog.Continue your words here."<br/>
<span style="font-weight:bold;color:#FFE0E9;">BLOG NAME</span>:Tutorial Site<br/>
<span style="font-weight:bold;color:#FFE0E9;">SINCE</span>:2013<br/>
<span style="font-weight:bold;color:#FFE0E9;">NICKNAME OF THIS SITE</span>:Tutorbabies
 </div></div></div></center></div>

2.Paste on your HTML JAVASCRIPT.

3.Change whatever i've bold,italic and color on the code.

4.Then,save..

Just like that.. :)