Blogger Widgets
Pemberitahuan :

1. Template Sedang Diperbaiki.
2. Copy Menggunakan CTRL + C.
3. Highlight (blok huruf) Transparan.
4. Screen Resolution 1366*768 untuk tampilan yang memuaskan.
Dark Gamesoft Dark Gamesoft Dark Gamesoft Dark Gamesoft

» » Cara Membuat Slot Banner Slider Menjadi 2 Bagian

Cara Membuat Slot Banner Slider Menjadi 2 Bagian

Diposting oleh Unknown - 0 komentar

Halo Sobat....
Kali ini saya akan post Cara Membuat  Slot Banner Slider Menjadi 2 Bagian. Mungkin kalo sobat ingin liat Demonya sobat bisa liat diatas post ini atau SS diatas!!..  Yuk langsung saja liat caranya..

Pertama yang pastinya sobat masuk Blogger
Kemudian Dashboard ---> Template ---> Edit Html

Kemudian, Sobat Masukkan CSSnya dulu ya...
Cari Kode CSS ]]></b:skin> Agar lebih mudah pencarian sobat gunakan Tombol Ctrl+F

Jika sudah ketemu, Sobat masukkan kode dibawah ini tepat diatas kode ]]></b:skin>

/*ARSlider*/
#slider4 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
}
#mask4 {
overflow:hidden;
}
#slider4:hover #pause {
opacity:1;
}
#slider4:hover #progress {
background-color:#DDD;
}
#slider4:hover ul, #slider4:hover #progress, #slider4:hover #overlay {
-moz-animation-play-state:paused;
-webkit-animation-play-state:paused;
}
#pause4 {
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;
}
#progress4 {
width:1px;
height:1px;
background-color:transparent;
-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;
}
#overlay4 {
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;
}
#slider4 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;
}
#slider4 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider4 li:last-of-type {
background-color:#362c30;
}
#slider4 li a {
display:block;
text-decoration:none;
}
#slider4 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 #000000;
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;}
}
#slider4 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;
}
/*ARSlider*/
#slider3 {
background:rgba(7,111,192, .7);
border:5px solid #0000ff;;
width: 468px;
height: 60px;
top:0px;
right:-2px;
margin-top:20px;
margin-bottom:20px;
margin-left:50px;
overflow: hidden;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
}
#mask1 {
overflow:hidden;
}
#slider3:hover #pause1 {
opacity:1;
}
#slider3:hover #progress1 {
background-color:#DDD;
}
#slider3:hover ul, #slider:hover #progress1, #slider:hover #overlay1 {
-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:transparent;
-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;
}
#slider3 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;
}
#slider3 li {
display:inline;
width:468px;
height:60px;
margin:0;
padding:0;
float:left;
position:relative;
}
#slider3 li:last-of-type {
background-color:#362c30;
}
#slider3 li a {
display:block;
text-decoration:none;
}
#slider3 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 #000000;
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;}
}
#slider3 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;
}

Keterangan:
Jika Sobat ingin mengganti warna garis Kotak Banner, Sobat bisa ganti tulisan Warna Biru, Dengan kode warna Sobat inginkan.

 Setelah itu, Masukkan Kode Htmlnya.
Cari Kode <div id='content-wrapper'> atau <div id='content'> atau <div id='wrapper'> Sebenarnya sih tergantung Template sobat ya, karena setiap template biasanya berbeda.

Setelah menemukan salah satu kode Diatas, Letakkan kode dibawah ini tepat diatas <div id='content-wrapper'> atau <div id='content'> atau <div id='wrapper'>

<div id='slider3'>
<div id='mask1'>
<ul><li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
<li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
<li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
<li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
</ul>
</div>
<div id='progress1'/>
<div id='overlay1'/>
<div id='pause1'/>
</div>
  </div>
<div style='float:right;margin-right:50px;'>
<div id='slider4'>
<div id='mask4'>
<ul><li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
<li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
<li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
<li>
<a href='http://anonymous-revenge.blogspot.com/'> <img alt='AR' src='http://i1248.photobucket.com/albums/hh491/Asfarul_BiasebiaseJak/468x60.png' title='Anonymous Revenge'/></a></li>
</ul>
</div>
<div id='progress4'/>
<div id='overlay4'/>
<div id='pause4'/>
</div>
  </div>

Keterangan:
Tulisan Warna Merah ubah dengan kode Banner Sobat,


Setelah itu, Pratinjau Dahulu Sebelum Disimpan.
Jika Sudah pas, Sobat bisa Simpan.

Dan,, Selesai.

Sekian Artikel Hari ini Yang Dapat Saya Sampaikan Dengan Artikel Berjudul "Cara Membuat Slot Banner Slider Menjadi 2 Bagian" Semoga Artikel Ini Bermanfaat Bagi Sobat Dan Dapat Menambah Ilmu.

Special Thank's:
CSS By: Angwyn [AH-Shared]
Teman" Yang sudah Membaca Artikel Ini

Copas?? Sertakan Link Sumber. Gak ada Link sumber?? Dosa Tanggung Sendiri!!

Sumber : http://anonymous-revenge.blogspot.com
Label:

Salam Blogger |(^o^)\

» Dimohon untuk memakai kata yang sopan
» Dimohon untuk tidak menggunakan kata kotor
» Dimohon untuk tidak memakai link hidup atau sejenisnya
» Dimohon untuk tidak SARA atau sejenisnya
» Dimohon untuk tidak SPAM atau sejenisnya


Terima kasih atas kerja samanya ^o^)~