Cara Membuat Headline Disamping Scrollbar

Halo sobat sobat blogger kali ini saya akan share hasil dari ekperimenku yaitu Cara Membuat Headline Dengan Efek Hover Disamping Scrollbar  . Nah yang diatas itu udah ada ss headlinenya , berikut dengan ss efek hovernya

Nah gimana keren kan? kayanya engga deh :v , nih kalo yang mau buat tinggal ikuti caranya aja

CSSnya taro diatas ]]></b:skin>

#headline {
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
color:#fff;
top: 100px;
right: -335px;
-webkit-transition:1s;
-moz-transition:1s;
-o-transition:1s;
-ms-transition:1s;
}
#headline:hover{
z-index: 1000;
border-radius: 15px;
position: fixed;
width: 375px;
height: 130px;
background: rgba(41, 41, 43, 0.77);
border: 5px solid #f03;
top: 100px;
right: 0px;
-webkit-transition:0.5s;
-moz-transition:0.5s;
-o-transition:0.5s;
-ms-transition:0.5s;
}
#headline h2{
font-family: cursive;
letter-spacing:1.5pt;
height: 10px;
width: 210px;
margin-bottom: 0px;
margin-left: -90px;
color:#fff;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
font-size: 14pt;
}
#headline li a:visited{color:#fff;}
#headline li{margin-bottom: 4px;
margin-left: 50px;
border-bottom: 1px dotted #f03;
padding: 0 0 0px 9px;
font-family: cursive;
}

Dan ini HTMLnya taro diatas </body>

<div id='headline'>
<h2>Headline</h2>
    <ul><li><a href='http://just-creater.blogspot.com/2013/10/cara-membuat-tombol-back-to-top-dengan.html'>Cara Membuat Tombol back to top</a></li>
<li><a href='http://just-creater.blogspot.com/2013/10/cara-memasang-lagu-di-blog-dengan.html'>Cara Memasang Lagu di Blog</a></li>
<li><a href='http://just-creater.blogspot.com/2013/10/cara-manipulasi-jumlah-pengunjung.html'>Cara Manipulasi jumlah pengunjung</a></li>
<li><a href='http://just-creater.blogspot.com/2013/10/widget-yang-harus-dipasang-di-blog.html'>Widget yg harus Di pasang di Blog</a></li>
<li><a href='http://just-creater.blogspot.com/2013/10/cara-mengganti-cursor-di-blog.html'>Cara Mengganti Cursor Di Blog</a></li>
</ul>

</div>

*Note :Warna biru : Url postingan yang dituju
Warna merah : Kata kata yang tampil dalam headline tersebut

Nah udah dulu ya cuma segini doang yang bisa saya posting dan demonya bisa diliat diblog ini atau di SINI

Semoga Bermanfaat .