Assalamualaikum..
Saya akan update post lagi nih heheh, kali ini saya akan share
Cara membuat Banner Slider Di Header, sebelumnya saya sudah posting
Cara Membuat 2 Banner Slider Di Blog Setelah ada yang minta REG caranya
Membuat Banner Slider Di Header yaudah saya buat nih postingnya :D Yukk,, langsung saja heheh maaf post artikel kali ini gak terlalu panjang soalnya lagi gak mood ngetik gara" keasyikan maen Game nih heheh....
- Login Blogger
- Dashboard
- Template
- Edit Html
- Cari Kode CSS ]]></b:skin>
- Jika Sudah Ketemu, Sobat masukkan kode dibawah ini tepat diatas ]]></b:skin>
/*Go! Blog Slider*/
#slider2 {position:absolute;
width: 468px;
height: 60px;
margin-left: 325px;margin-top:0px;overflow: hidden;
background-color: #181818;
border-left: 5px solid #000000;
border-top: 5px solid #000000;
border-bottom: 5px solid #000000;
border-right: 5px solid #000000;
}
#slider2 img{opacity:1;
-webkit-filter: saturate(0.0);
-moz-filter: saturate(0.0);
-ms-filter: saturate(0.0);
-o-filter: saturate(0.0);
filter: saturate(0.0);
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;}
#slider2 img:hover{opacity:1.0;
-webkit-filter: saturate(1.0);
-moz-filter: saturate(1.0);
-ms-filter: saturate(1.0);
-o-filter: saturate(1.0);
filter: saturate(1.0);
-webkit-transition:all .1s ease-in-out;
-moz-transition:all .1s ease-in-out;
-ms-transition:all .1s ease-in-out;
-o-transition:all .1s ease-in-out;
transition:all .1s ease-in-out;}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#221f21;
border-top: 5px solid #0088ff;
border-right: 25px solid #0088ff;
border-left: 25px solid #0088ff;
border-bottom: 5px solid #0088ff;
border-radius: px px px px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#181818;
border:5px solid #000000;
}
#slider2:hover #pause {
opacity:1;
}
#slider2:hover #progress {
background-color:rgba(255,255,255,0.0);
}
#slider2:hover ul, #slider:hover #progress, #slider:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause {
width:468px;
height:60px;
position:absolute;
top:0;
opacity:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#progress {
width:1px;
height:1px;
background-color:#ffd000;
-moz-animation:progress 35s infinite;
-webkit-animation:progress 35s infinite;
position:relative;
top:-1px;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
}
#overlay {
width:4680px;
height:60px;
position:absolute;
top:0;
pointer-events:none;
-moz-transition:all 170ms ease-in;
-webkit-transition:all 170ms ease-in;
-o-transition:all 170ms ease-in;
opacity:0.5;
-moz-animation:overlay-fade 35s infinite;
-webkit-animation:overlay-fade 35s infinite;
}
#slider2 ul {
width:2400px;
list-style:none;
padding:0;
margin:0;
-moz-animation:slide-animation 35s infinite;
-webkit-animation:slide-animation 35s infinite;
position:relative;
left:0px;
overflow:hidden;
}
#slider2 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider2 li:last-of-type {
background-color:#362c30;
}
#slider2 li a {
display:block;
text-decoration:none;
}
#slider2 li span {
display:block;
width:560px;
padding:15px 20px;
position:absolute;
bottom:0;
left:0;
background-color:rgba(54,44,48,0.6);
border-top:1px solid #362c30;
text-shadow:1px 1px 1px #362c30;
pointer-events:none;
text-align:left;
}
@-webkit-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-moz-keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-468px; opacity:1;}
45% {left:-468px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-936px; opacity:1;}
70% {left:-936px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1404px; opacity:1;}
95% {opacity:1;}
98% {left:-1404px; opacity:0;}
100% {left:0px; opacity:0;}
}
@-webkit-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-moz-keyframes progress {
0% {width:0px; opacity:0;}
2% {width:0px; opacity:1;}
20% {width:468px; opacity:1;}
22.5% {width:468px; opacity:0;}
22.59% {width:0px;}
25% {width:0px; opacity:1;}
45% {width:468px; opacity:1;}
47.5% {width:468px; opacity:0;}
47.59% {width:0px;}
50% {width:0px; opacity:1;}
70% {width:468px; opacity:1;}
72.5% {width:468px; opacity:0;}
72.59% {width:0px;}
75% {width:0px; opacity:1;}
95% {width:468px; opacity:1;}
98% {width:468px; opacity:0;}
100% {width:0px; opacity:0;}
}
@-webkit-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
@-moz-keyframes overlay-fade {
0% {opacity:0;}
2% {opacity:0.5;}
95% {opacity:0.5;}
98% {opacity:0;}
100% {opacity:0;}
}
#slider2 ul li span h2 {
font-size:24px;
line-height:24px;
color:#fff;
font-weight:normal;
font-family:'Communist-Regular';
text-shadow:1px 1px 1px #362c30;}
Perhatikan!!
Tulisan Berwarna Orange Sobat Bisa atur sendiri sesuai letak yang sobat inginkan.
Eitss,,, Belum Selesai...
Kemudian Sobat Cari <div id='header-wrapper'> atau <div id='header'>
Kemudian Letakkan kode ini dibawah <div id='header-wrapper'> atau <div id='header'>
<div id='slider2'>
<div id='mask'>
<ul>
<li>
<a href='www.g-bloog.com' target='_blank'><img alt='click Here' src='Masukkan Gambar Disini' title='Go! Blog'/></a></li>
<li>
<a href='www.g-bloog.com' target='_blank'><img alt='click Here' src='Masukkan Gambar Disini' title='Go! Blog'/></a></li>
<li>
<a href='www.g-bloog.com' target='_blank'><img alt='click Here' src='Masukkan Gambar Disini' title='Go! Blog'/></a></li>
<li>
<a href='www.g-bloog.com' target='_blank'><img alt='click Here' src='Masukkan Gambar Disini' title='Go! Blog'/></a></li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>
Perhatikan!!
Ganti tulisan berwarna Biru dengan kode Banner 468x60 sobat..
- Kemudian Pratinjau Dahulu !! Jika sudah benar, Simpan Template
Demikian artikel yang dapat saya sampaikan hari ini semoga artikel ini bermanfaat untuk sobat..
Ciuman Ala Korea : Foto Video Adegan Ciuman Artis Korea (Hot Kissing) Gambar Foto Adegan Ciuman Artis Korea (Hot Kissing ala Ko...
Cara Membuat Menu Dar Keren Dengan CSS3 Pada Blog - Selamat siang sobat blogger. Maaf baru bisa posting artikel lagi, dikarnakan saya kema...
Aplikasi ini merupakan sebuah Aplikasi Edit Foto yang langsung terinstall di handphone kita. Cara kerjanya pun sangat bagus sekali. Gambar ...
Situs Web: http://www.wordwebsoftware.com/ Lisensi: Shareware (US$19) Spesifikasi: Windows 2000/XP/Vista/7 Deskripsi: Word...
Berikut 10 senjata terbaik di dunia yang legendaris dan masih digunakan sampai sekarang: 1. AK-47 Dengan produksi lebih dari 75 ...
Situs Web: http://www.dplsystems.com.au/ Lisensi: Freeware Spesifikasi: Windows NT/98/Me/2000/XP/2003/Vista/Server 2008/7 D...
Pada umumnya jika jarak antara samping lembar kerja dan hasil ketikan kita di lembar kerja terlihat terlalu lebar dan jauh menurut +Fajri A...
