Sabtu, 02 November 2013

Memasang Banner Slider 468x60 Di Header

Ini Adalah Slot Banner Ukuran 468x60 Dengan Animasi Slider..
Jadi Jika Banyak Tidak Memenuhi Letak...
Karena Setiap Beberapa Detik Akan Berganti Secara Otomatis...

Cara Pemasangan :

  • Masuk Ke Blog
  • Pilih Template > Edit HTML
  • Cari Kode ]]></b:skin>
  • Pastekan Kode Dibawah Ini Tepat Diatasnya

#slider2 {
width: 468px;
height: 60px;
margin-top:-587px;
margin-left:-727px;
overflow: hidden;
background-color: none;
-moz-box-shadow: 0 0 16px 0px #000;
-webkit-box-shadow: 0 0 16px 0px #000;
box-shadow: 0 0 16px 0px #000;
border: 3px solid #006acc;;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: absolute;
border-radius: 0px 0px 0px 0px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:none;
border: 3px solid #006acc;
}
#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:468px;
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;
}


  • Kemudian Cari Kode
<div id='header-wrapper'> 

  • Pastekan Kode Dibawah Ini Tepat Diatasnya

<div id='slider2'>
<div id='mask'>
<ul><li>
<a href="http://kiritoblogs.blogspot.com/" target="_blank"><img height="60" src="http://i.imgur.com/2obvIR7.gif?1?2635" title="KIRITO BLOG'S | All About Blog, Editing,Template, &amp; Tricks" width="468" /></a></li>
<li>
<a href="http://bakul-anime.blogspot.com/" target="_blank" title="Bakul Anime"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieMgNXr4Y_xOy-1edWHBUfao2v59UI6a0QoGXBAqvCu7AeMNQDZeWAp5tZGwRHOe8uEN91UTSaWHLv5tDw5PMADWtrmL_RtTiV_CfZcBPJRKf3cdZI1HS86icBT_jEsDmoEOWcL781fbE/s1600/Pesanan-468-X-60.gif" alt="Kumpulan Anime Terbaru Subtitle Indonesia" /></a>
</li>
<li><a href="http://darcho-voldemort.blogspot.com/"><img height="60" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiM1vxE0aJq-bQ6bd7eZktHJ08YzF-BGd8uWDhm-tL3CSMRU0nOAKwnBqWYQTClDmej8GLEQgoEljMw9Wj1_HPEAnaH9kFR3ypYBTNJGbddOiLEKKPMDLg6cK_sXLapPSrSqzCWSnJPrds/s1600/468-cool.gif" title="Deidara Ryujinki™ | Art Is A Creativity" width="468" />
</a>
</li>
<li><a href='http://cyber-roxas-t.blogspot.com/' target='_blank' title='EVIL ROXAS|Simple Is My Life'><img alt='EVIL ROXAS|Simple Is My Life' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWXozF_hag5UK89dU-Jix3RtHVVvrjZk1hf7BmiMlO4io5NTJFXQW9-wRY9Y2kGeDiMZor3Mz-Lwk8Z24Io_VnpoYg-kQn5-nOXpRwS3vCILKTOCsC46q5eM457RSz-_uFvVCys3e9kdhy/s1600/banner+new+evil+roxas.gif'/></a>                                                                                       <a href="http://octevanowijaya9e.blogspot.com/"><img src="http://img801.imageshack.us/img801/8871/n82b.jpg" border="0" width="125" height="125" alt="RevanDTT" /></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div> 


  • Ganti Yang Berwarna Merah Dengan Kode Banner Kalian... 

Share on Facebook
Share on Twitter
Share on Google+
Tags :

Related : Memasang Banner Slider 468x60 Di Header

  • Efek Negatif Pemakaian Narkoba Sebagai contoh, untuk masyarakat di pedalaman Sumatera, mengkonsumsi daun ganja (Cannabis atau Marijuana) sebagai bumbu masakan adalah hal yang wajar. Sebab, sebagai ...
  • Cara Bobol dan Menghilangkan Internet Positif Cara Bobol dan Menghilangkan Internet Positif-Jika anda sering online dan melakukan browsing di dunia per internetan Indonesia maka anda pasti sudah sangat tidak dengan ...
  • Cara Membobol Password Wifi Menggunakan Android Cara Membobol Password Wifi Menggunakan Android-Karena kemarin ada yang menanyakan bagaimana cara membobol password wifi menggunakan android. Sekarang banyak orang yang ...
  • Rumus Menyelesaikan Rubik 3x3 Bagi Pemula Rumus Menyelesaikan Rubik Bagi Pemula Sebelum kita mulai, sebaiknya kalian pahami dulu istilah-istilah yg akan saya gunakan untuk menjelaskan Cara Menyusun Rubik ini ...
  • Pengen dengar Komputer Loe bicara?? Gini Caranya1. Pertama, buka notepad.2. Copy-Paste script berikut : Dim msg, sapimsg = InputBox ( "Apa yang Anda ingin saya katakan?", "Masukan kata-kata")Set sapi = CreateObject ( ...

0 komentar:

Posting Komentar

Ayo silahkan berkomentar :)