Membuat slide navigation di blog

copy paste code berikut ini dan tempatkan di ruangan code html/javascript

<center><style type="text/css">

.slide {

width: 250px;

padding: 5px;

background: ;}

.slide2 {

padding:3px;

display:block;

height:13px;

width:240px;

background:#fff;

-webkit-transition-duration:.8s;

-moz-transition-duration:.8s;

overflow:hidden;}

.slide2:hover {

height: 150px;

}

nav1{

font-family:consolas;

padding-top:1px;

font-size:12px;

color:#000;

text-align:center;

text-transform :uppercase;

background: pink;

letter-spacing:2px;

height:25px;

padding-left:6px;

display:block;

-moz-transition: 0.5s;

-webkit-transition: 0.5s;}

</style>

<div class="slide"><div class="slide2"><nav1>artikel Tips dan Trik BLOG</nav1>

<div style="height:150px; overflow:auto;margin-top:3px;">

isi pesan/artikel ada disini

</div></div></div>

<div class="slide"><div class="slide2"><nav1>Internet dan jaringan</nav1>

<div style="height:150px; overflow:auto;margin-top:3px;">

isi pesan/artikel ada disini


</div></div></div>

<div class="slide"><div class="slide2"><nav1>Kreasi tema Blogspot</nav1>

<div style="height:150px; overflow:auto;margin-top:3px;">

isi pesan/artikel ada disini


</div></div></div></center>


hasilnya seperti contoh