Membuat Headline Disamping Scrollbar

     Hy Teman" 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>


Code :

#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: Blackadder ITC;
}

Dan ini HTMLnya taro diatas </body>

Code :

<div id='headline'>
<h2>Headline</h2>
    <ul><li><a href='http://rplaxe.blogspot.com/2013/07/update-status-facebook-keren.html'>Update Status Facebook</a></li>
<li><a href='http://rplaxe.blogspot.com/2013/08/cara-instal-tempilan-windows-7-seperti.html'>Instal Teamplate Ubuntu Untuk Windows 7</a></li>
<li><a href='http://rplaxe.blogspot.com/2013/08/mau-dowload-microsoft-office-2013.html'>Download Microsoft Office 2013</a></li>
</ul>

</div>

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


Terimakasih