Sabtu, 10 Agustus 2013
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 {Dan ini HTMLnya taro diatas </body>
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;
}
<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 ditujuNah udah dulu ya cuma segini doang yang bisa saya posting dan demonya bisa diliat diblog ini atau di SINI
Warna merah : Kata kata yang tampil dalam headline tersebut
Ingat kalau mau copas dikasih sumbernya
Ditulis Oleh : Muhammad Syaifullah
Terimakasih telah membaca artikel tentang Cara Membuat Headline Disamping Scrollbar. Jika ingin mengcopy paste, jangan lupa untuk menyertakan sumbernya.
{ 18 komentar... read them below or Comment }
Selamat Datang Di Blog Yang Aneh Ini
Thanks For Visiting ~
Kalo komentar yang enak enak aja ya jangan pake Anonymous kalo mau komen juga yang relavan ya dan kalo mau dikomenback bilang aja ga usah malu malu pastiku komenback ko kalo ga sibuk , dah gitu aja :v
nice tutor bro , keren headlinenya
BalasHapuspostingan yg keren sob...
BalasHapushttp://akisada-ryo.blogspot.com
ho oh thanks sob
Hapuskeren headlinenya, pgn di coba di blog ane cocok ga ya.~
BalasHapuscocok cocok aja , asalkan bisa atur warnanya
Hapusnice trick bro. (y)
BalasHapusvisit back : Xpress Community
thanks mastah :v
Hapuskeren tutorialnya ^_^.tapi ane gak terlalu berminat :)
BalasHapuskomen back :)
http://imanyusufbidin.blogspot.com/2013/08/cara-agar-tidak-mudah-sakit.html
wkwk ya ga usah dipasang aja :v
HapusMantep nih tricknya..
BalasHapusGuwe coba yah...
silakan :3
HapusNice post Sob... ~
BalasHapusArtikel yang bermanfaat gan..
BalasHapusKebetulan saya belum bisa yang seperti ini
thanks
Keren tutornya gan..
BalasHapusarigatou :)
Hapussilakan
BalasHapusKeren.. Bro. Tapi Manual Tapi Manual. GPP Deh Tar Saya Usahain Biar Auto :3
BalasHapusKumbal Balik http://kxmadagascar.blogspot.com/
wkwk kalo recent post itu percuma kaya orang genius aja , soalnya kan udah ada dihomepage ngapain kita tempel lagi mending manual bisa dipilih post yg mana yg mau dipromoin XD
Hapus