Cara Memasang Headline Melayang Di Blog

Muhammad Syaifullah

Tutorial

Rabu, 18 September 2013

1 Komentar

Halo sobat sobat blogger kali ini saya akan share hasil dari ekperimenku yaitu Cara Membuat Headline Dengan Efek Hover Disamping Scrollbar yang terinspirasi dari blognya RAZEE48 . 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://galpock.blogspot.com/2013/04/cara-mengetahui-posisi-seseorang-lewat.html'>Cara Mengetahui Posisi Seseorang Lewat Nomor HP</a></li>
<li><a href='http://galpock.blogspot.com/2013/04/cara-memasang-pika-billing.html'>Cara Memasang Pika Billing</a></li>
<li><a href='http://galpock.blogspot.com/2013/06/cara-transfer-uang-tanpa-punya-rekening.html'>Cara Transfer Uang Tanpa Punya Rekening Bank</a></li>
<li><a href='http://galpock.blogspot.com/2013/07/cara-mudah-mengedit-template-blog.html'>Cara Mudah Mengedit Template Blog</a></li>
<li><a href='http://galpock.blogspot.com/2013/06/cara-membuat-blog-seo-100-di-chkme.html'>Cara Membuat Blog SEO 100% Di Chkme</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

Ingat kalau mau copas dikasih sumbernya