Showing posts with label banner. Show all posts
Showing posts with label banner. Show all posts
Thursday, December 15, 2016
Cara Membuat Banner Secara Online Sendiri Untuk Blog
Cara Membuat Banner Secara Online Sendiri Untuk Blog
Oke Langsung Saja :
1.Buka Lord Kaisar Banner Generator
2.Pilih Banner Yang DiInginkan Pada Kolom Select Your Banner.
3.Berikan Judul Blogmu Di Kolom Pick your title text. Dan Ubah Stylenya Sesuka Anda
4.Berikan Deskrpsi Blogmu Pada Tag Pick your tag text. Dan Ubah Stylenya Sesuka Anda
5.Pilih Create
6.SIlahkan Download BANNERMU Dan Upload Ke Photobucket Ato Artwap Karena Mungkin Akan DiHapus Filenya
Semoga Bermnafaat
Go to link Download
Thursday, November 10, 2016
Cara Membuat Banner Sendiri Untuk Blog
Cara Membuat Banner Sendiri Untuk Blog
Cara Membuat Banner Keren Untuk Blog. Banner adalah salah satu cara kita bertukar link dengan blog lain. Blogger blogger lain membuat banner nya semenarik mungkin untuk menarik minat pembaca agar mengklik banner tersebut. Dan kali ini saya akan memberikan tutorial cara membuat banner yang keren untuk anda.
Cara Membuat Banner Sendiri Yang Keren Untuk Blog
Banner ada banyak sekali jenisnya. Menurut formatnya, ada banner yang berupa gambar bergerak berformat GIF, ada gambar saja (tidak bergerak) berformat PNG atau JPG dan ada juga banner SWF / Flash. Sekarang, Jona Rendra akan menjelaskannya satu per satu secara lengkap.
1. Membuat Banner Gambar Langsung Yang Keren
Pada tutorial ini saya akan hanya memilih untuk mengedit text langsung dengan background gambarnya dengan http://cooltext. com/
Pertama, kunjungi web yang beralamatkan http://cooltext. com/
Kedua, anda pilih mana banner yang cocok untuk blog anda misal saya pilih yang ini
setelah di klik, muncul tool pengeditan. ini hasil yang sudah saya edit
Terakhir, jika pengeditan sudah selesai klik "Create Logo" dan dapatkan URL nya
Ini contoh banner saya
Ada banyak web yang menyediakan tool pembuat gambar bergerak. Contoh yang saya berikan cukup satu yaitu Picasion. com
Pertama, buat terlebih dahulu gambar yang akan di jadikan bergerak lalu siapkan pada satu folder
Kedua, kunjungi web yang beralamatkan http://picasion. com
Ketiga, perhatikan gambar dibawah ini
Keterangan :
"Size Normal - 300px... " untuk mengatur ukuran gambar. Klik advance jika ingin mengatur sendiri ukuran gambar
"Speed Normal" untuk mengatur kecepatan gambar berganti. Bisa sangat cepat, cepat, sedang, lambat dan sangat lambat
"Create Animation" untuk memadukan gambar
Jika anda menggunakan browser Google Chrome, pada gambar tinggal klik kanan > "Copy image URL" untuk mengcopy URL gambar atau "Save image as" untuk menyimpan gambar. Ini contoh banner blog ini yang saya buat sendiri
Dan yang terakhir, anda bisa membuat banner dengan format swf. Saya gunakan tool dari web yang bernama Flash Banner Maker Online. Langsung saja pada tutorialnya
Pertama, kunjungi webnya yang beralamat http://www.flash-banner-maker-online.com/
Kedua, pada bagian kiri yang Flash Generator With 3 Effects pilih ukuran banner yang anda inginkan atau Custom size header untuk mengatur sendiri ukurannya
Saya pilih yang 468x60 banner
Ketiga, gulung scroll sampai halaman bawah untuk tool pengeditan
"Create banner link" ke alamat URL blog anda
"URL target : " artinya buka di new tab atau di halaman sendiri. _self (halaman sendiri) _blank (tab baru)
Pada tiga kolom buat Tulisan yang akan di tampilkan
Disamping setiap tulisan, ada warna dan beberapa effect nya. klik tanda kanan untuk mengganti effect dan klik warna untuk mengganti warna
Diatasnya ada kolom berwarna ungu dan hitam. Itu adalah background banner bisa diganti dengan mengklik warna
Ini contoh hasil dari pengeditan yang saya lakukan
klik "Get html code for banner" untuk mendapatkan kode HTML banner
klik "Get html code for banner" untuk mendapatkan kode HTML banner
Sekian dulu postingan saya yang berlabel Informasi dan berjudul Cara Membuat Banner Sendiri Untuk Blog, semoga anda sudah bisa menentukan mana banner yang cocok untuk blog anda, yang bagian 1, 2 atau 3. Jika ada kesulitan dalam praktek tutorial tersebut diatas, silahkan untuk memberikan pertanyaan melalui komentar.
Go to link Download
Friday, November 4, 2016
cara membuat banner keren dengan photoshop
cara membuat banner keren dengan photoshop
kali ini saya mau share tutorial nihh yaitu cara membuat banner keren dengan photoshop,, sebelum masuk ke tutorial saya mau kasih pertanyaan yang akan kalian komen
A : cs brp kk?
B : bebas kok
--------------
nah sekarang kita masuk ketutorial yuk ... sekarang saya akan membagikan videonya yang part 1
jika ada tutur kesalahan bisa komen kok
part 2
A : cs brp kk?
B : bebas kok
--------------
nah sekarang kita masuk ketutorial yuk ... sekarang saya akan membagikan videonya yang part 1
jika ada tutur kesalahan bisa komen kok
part 2
mungkin hanya segitu yang bisa saya bagikan karna saya sulit untuk menjelaskan karna kata-kata saya habis .-.
Gomen :)
Go to link Download
Friday, October 28, 2016
Cara Membuat Website Banner Generator Versi Lord Kaisar
Cara Membuat Website Banner Generator Versi Lord Kaisar
Oke Langsung Saja
Demo
1.Login Ke Hostingan Anda
2.Buka Cpanel Dan Klik Swicth
3.Buka File Manager 1 ( Bagi Anda Yang Tidak Suka Tampilan Etxplorer Anda Bisa Buka Yg Lama Dengana Cara Klik Disini )
4.Setelah Masuk Ke File Manager Klik Tombol Upload
6.Download File Ini Dan Upload Ke Hostingan Anda ( jangan tekan entertetapi pilih tombol download file now saat mendownload )
7.Buka Web Anda dan lakukan instalasi
Tadaa Jadi Deh :D
NB:
Jangan Gnti Footernya Yyah
Link alternatif : http://lordkaisar.googlecode.com/files/bannergenerator.zip
Demo
1.Login Ke Hostingan Anda
2.Buka Cpanel Dan Klik Swicth
3.Buka File Manager 1 ( Bagi Anda Yang Tidak Suka Tampilan Etxplorer Anda Bisa Buka Yg Lama Dengana Cara Klik Disini )
4.Setelah Masuk Ke File Manager Klik Tombol Upload
6.Download File Ini Dan Upload Ke Hostingan Anda ( jangan tekan entertetapi pilih tombol download file now saat mendownload )
7.Buka Web Anda dan lakukan instalasi
Tadaa Jadi Deh :D
NB:
Jangan Gnti Footernya Yyah
Link alternatif : http://lordkaisar.googlecode.com/files/bannergenerator.zip
Go to link Download
Monday, October 17, 2016
Cara Membuat Slot Banner Slider Menjadi 2 Bagian
Cara Membuat Slot Banner Slider Menjadi 2 Bagian
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 Thanks:
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
Go to link Download
Friday, October 14, 2016
Cara Membuat Banner 468x60 Slider Di Header
Cara Membuat Banner 468x60 Slider Di Header
Kali Ini Dark Gmesoft Mau share " Cara Membuat Banner slider 468x60 Di Header"
Tutor Ini Sebenernya Sudah Lama Saya Buat Tapi Saya Mau Share Lagi Karna Blog Saya Yang Lama Telah Di Hapus Google :v Padahal Viewers nya Perhari Udah Banyak
Udahlah Lupakan :v
Contohnya Di Header Blog Saya Yang Lama
Gimana ?? tertarik .. Silahkan Ikuti Langkah Langkahnya
1.Buka Blogger
2.Edit HTML
3.Letakan Kode Ini Di Atas ]]></b:skin> , Agar Lebih mudah Gunakan Ctrl + F
#slider2 {
width: 468px;
height: 60px;
margin-left:125px;
margin-top:230px;box-shadow: 2px 2px 10px #000;
overflow: hidden;
background-color: #221f21;
border-top: 5px solid #000;
border-right: 25px solid #000;
border-left: 25px solid #000;
border-bottom: 5px solid #000;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: px px px px;
}
#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 #0bbd00;
border-right: 25px solid #0bbd00;
border-left: 25px solid #0bbd00;
border-bottom: 5px solid #0bbd00;
border-radius: px px px px;
}
#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:#000000;
-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:#272727;
}
#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;
}
4.Dan Letakan Kode Ini Dibawah Kode <div id=header-wrapper>
<a href=http://cevinfirman007.blogspot.com target=_blank><img src=http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif/></a>
<a href=http://cevinfirman007.blogspot.com target=_blank><img src=http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif/></a>
<li><a href=http://ichalilmu.blogspot.com/><img alt=Orblues banner src=http://i.imgur.com/HtCm0bW.png/></a>
</li>
<a href=http://cevinfirman007.blogspot.com target=_blank><img src=http://i1317.photobucket.com/albums/t622/Latu_Alam_Saputra/BannerTeman468x602_zpsa34a012d.gif/></a>
</li>
</ul>
</div>
<div id=progress>
</div><div id=overlay>
</div><div id=pause>
</div></div>
5.Klik Simpan
Go to link Download
Subscribe to:
Posts (Atom)