Tutorial sidebar hover (Slide)

Assalamualaikum and annyeonghaseyo ! Ada orang tanya how to make hover Slide  sidebar  . So heree code ,, Godd luck  !

1. go to template and paste code on code ' </style>'
2. paste code it .

.sidebar{
background:#fff;
height:50px;
margin-top:5px;
color:#808080;
text-align:center;
overflow:hidden;
width:220px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;}


.sidebar:hover {
height:200px;
-webkit-transition: 1.0s;
-moz-transition: 1.0s;
}

3. Pergi dekat code Sidebar korang misalnya seperti yang di hijaukan .

<div class="sidebar">
<div class="nag">Follow</div>
<center><br>
<iframe class="btn" frameborder="0" border="0" scrolling="no" allowtransparency="true" height="25" width="106" src="http://platform.tumblr.com/v1/follow_button.html?button_type=2&tumblelog=xioyuiminglovegoojaehee&color_scheme=light"></iframe>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fainanajihah4teen%3Fref%3Dhl&amp;width=210&amp;height=70&amp;colorscheme=light&amp;show_faces=false&amp;border_color&amp;stream=false&amp;header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:210px; height:70px;" allowTransparency="true"></iframe><br>
</center>
</div>

4. Paste code <div class="sidebar"> dekat atas code sidebar korang macam code kat atas !.

5. Previewlah kalau tak ade Syntax Error haha . Menjadi komen .