Sword Art Online V2 blogger template

Hello minna-san,Akhirnya selesai juga template sword art onlinenya.template kali ini adalah hasil re-design total dari template shinpuru 2.3,tapi belum siap dishare,karena masih ada beberapa bagian yang harus diperbaiki.tampilan template ini sama berdasarkan dengan yang di video pengeditan template yang saya posting kemarin


apa aja sih yang dirombak?berdasarkan video,bagian awal mulai dari lebar seluruh body template,lalu header,menu,posting,lalu footer,setelah itu tinggal diatur lagi kerapihanya dan edit beberapa content,seperti kotak komentar,penambahan sidebar,penambahan tombol back to top,kotak search dan credit.semua itu dibuat secara manual dan tidak membuka refrensi dari google ataupun blog lain kalau kalian sudah melihat videonya.

Jadi mungkin kalian sudah tau bagaimana cara saya merombak total template.simple ,tapi tidak mudah untuk dilakukan kalau kurang pengalaman dan pengetahuan dasar css dan html serta memang sulit dijelaskan dengan kata - kata dewa~xD


hasilnya bisa kalian lihat sendiri pada screenshot dibawah ini atau bisa langsung melihat demo templatenya
Screenshot

1. Setting Menu

<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>Contact</a><ul>
<li><a href='#'>Google+</a></li>
<li><a href='#'>Blogger</a></li>
<li><a href='#'>Facebook</a></li>
<li><a href='#'>Email</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Lorem ipsum</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Lorem ipsum</a></li></ul></li>
<li><a href='#'>Backlink</a></li>
<li><a href='#'>Guest book</a></li>
<li><a href='#'>Download Templat</a></li>
<li><a href='#'>Submit</a></li>
<li><a href='#'>Privacy Policy</a></li>
</ul>

2. Setting SEO

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='descripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Download via googledocs

Demo

Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Read More

Black Rock Shooter Blogger Template

Hello sobat~ detik" sebelum tahun 2013 ,saya mau sharing template terakhir di akhir tahun ini :) .template hasil redesign shinpuru,dengan tema anime black rock shooter.
template ini saya buat sederhana post dengan thumbnail 1 sibar dan 2 column footer,bukan template responsive ,hanya template yang sederhana tapi unik.




Screenshot

1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>lorem ipsum</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li></ul></li>
<li><a href='#'>Backlink</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Contact</a></li>
</ul></div>

2. Setting SEO

setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.
*ganti text yang berwarna merah

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Selesai deh template kelima ini.saya dan keluarga mnegucapkan selamat tahun baru 2013,semoga ditahun 2013 bisa menjadi lebih semangat,lebih baik,lebih baik dan leih baik lagi dari tahun kemarin.arigatou minna-san,ganbatte kudasai!! happy new year!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! (lol)

Download via Dropbox

Download via Google Drive

Demo

Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Read More

Shinpuru V2.2 blogger Template

Hello again~ mungkin terdengar aneh atau lucu dan kurang kerjaan karena bisa"a saya buat versi 2.2 (lol).apa bedanya dengan yang versi sebelumnya? yang berbeda hanya lebar posting,tampian readmore,posisi judul blog,font,footer dan lebar posting pada halaman depan,kalau versi lamanya cuma 3 column,yang versi ini 4 column,jadi mungkin untuk template ini lebih cocok sebagai photo gallery.

1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>lorem ipsum</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li></ul></li>
<li><a href='#'>Backlink</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Contact</a></li>
</ul></div>

2. Setting SEO

Khusus template ini,pengaturan meta tag dan SEO sudah saya ubah,jadi ada yang harus di setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.

have a nice day~

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Selesai deh template keempat @____@ (ane tepar buat template sehari 1 saat liburan~xD) di akhir bulan ini.Arigatou gozaimasu~terima kasih masih tetap setia mengunjungi blog ini,semoga blog ini tetap bermanfaat ^^.

Download via Dropbox

Demo

Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Read More

Shinpuru V2 Blogger Template

Hello again.kali ini saya membuat template shinpuru versi kedua dari template sebelumnya yang merupaka template yang simple,fast loading dan ringan . apa bedanya dengan versi yang pertama? bedanya template V2 yang paling terlihat ini adalah posting yang menggunakan style thumbnail dan template yang responsive .  artinya akan menyesuaikan dengan resolusi monitor yang kita gunakan.berikut contoh screenshot dengan ukuran yang berbeda:

Gambar 1.1

Gambar 1.2

Dan supaya lebih elegant,tombol readmore pada post juga sudah saya modifikasi seperi gambar dibawah ini:

Gambar 1.3

1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a href='#'>lorem ipsum</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
</ul></li><li><a href='#'>Categories</a><ul>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li>
<li><a href='#'>lorem ipsum</a></li></ul></li>
<li><a href='#'>Backlink</a></li>
<li><a href='#'>Download</a></li>
<li><a href='#'>Contact</a></li>
</ul></div>

2. Setting SEO

Khusus template ini,pengaturan meta tag dan SEO sudah saya ubah,jadi ada yang harus di setting manual oleh pengguna mengenai deskripsi dan keyword blog anda.

have a nice day~

<meta content='deskripsi blog kamu' name='DESCRIPTION'/>
<meta content='keyword blog kamu' name='KEYWORDS'/>

Selesai deh template ketiga di akhir bulan ini.Arigatou gozaimasu~terima kasih masih tetap setia mengunjungi blog ini,semoga blog ini tetap bermanfaat ^^.

Download via Google Drive

Download via Dropbox

Demo

Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Read More

Shinpuru Blogger Template

Shinpuru blogger template,shinpuru berasal dari bahasa jepang yang berarti simple.:)
template yang kedua ini adalah template dasar sebelum menjadi template anime note yang sudah saya publish kemarin.designnya saya buat sederhana mungkin dan ringan,tetapi tidak melupakan style posting yang sudah saya atur 560px untuk halaman depan,jadi saya sarankan selalu memasukan gambar HD atau gambar ukuran besar pada posting di paragraf pertama~

Screenshot

1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Anime</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</div>

Selesai deh template kedua di akhir bulan ini.Arigatou gozaimasu~terima kasih masih tetap setia mengunjungi blog ini,semoga blog ini tetap bermanfaat ^^.

happy holiday~xD Hohohoho

Download via Dropbox

Demo

Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Read More

Anime Note Blogger template

Hello minna-san,selamat natal dan tahun baru ^^~

pada kesempatan kali ini saya sendiri sedang liburan,jadi ada waktu untuk melanjutkan project yang ketunda sekitar 3 bulan yang lalu karena sibuk"nya dengan tugas kuliah dll.

dari 4 template yang sedang buat,"anime note" adalah salah satu template yang simple,tapi mungkin agak berat karena menggunakan fitur random background dengan 10 gambar anime.tergantung kecepatan koneksi kalian juga sih~xD

Screenshot

Anime note dengan tema anime,seperti yang saya sebutkan tadi,template ini menggunakan fitur random background.
lalu saya juga buat template ini menggunakan fitur tab pada posting dan footer atau saya sebut widgetbar.kenapa widgetbar?karena di tab widgetbar ini hanya berisi gadget" seperti bloglist,linklist,feed,followers,dll.sedangkan pada tab post adalah isi posting blog,jadi tab ini memisahkan antara post dengan widget.

10 Gambar background Anime note

1. Setting Menubar

Buka blogger,pilih menu template=> Edit HTML lalu cari kode html yang seperti dibawah ini.
setelah itu ganti tanda pagar '#' (tanpa tanda petik) dengan ulr/alamat link yang ingin dituju,dan ganti juga nama linknya.

<div class='menujohanes'>
<ul class='dark_menu'>
<li><a class='selected' expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li>
<a href='#'>About</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li>
<a href='#'>Categories</a>
<ul>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
<li><a href='#'>Lorem ipsum dolor</a></li>
<li><a href='#'>Donec lorem</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Anime</a></li>
<li><a href='#'>Sitemap</a></li>
</ul>
</div>

2. Setting jumlah posting

Untuk menentukan jumlah posting pada blog,buka blogger=>layout,klik edit pada blog posts

setelah itu ganti angka pada option main page,


Tentukan jumlah posting yang ingin ditampilkan pada blog kalian.(tidak harus 1 juga,bebas)

3. Setting Random background

Buka blogger =>template => Edit HTML
lalu cari script seperti dibawah ini.

<script type='text/javascript'>
var banner= new Array()
banner[0]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQs7ukyi0iMZHDPS9zCZHFoyIq6iSxYJCSpca9pGaxaitVYk2HsqZ-dyJjg8Z-jKG2Vi1W0q4RJcUr_Q2flRDw9WY_Ez6-7IkTnlZKDW9J0a5ro4S3bDjym9sNXOoEcbbNlV1KQ0zjTqHA/s1600/dsf.jpg&quot;
banner[1]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2rkmvWP-NZYl7ukTIJ-3lcVrvDwmyIBUlrmBhoj3AZaSlwglO84kPSfDWm75ZTq6Mhf2b-J2McdIc8ym0MNpNTzi98ji1GGQtx57FmSriGPaVnYJj1AqFQu5DbfdrlLUk8mFJF0eMIM3n/s1600/rg.jpg&quot;
banner[2]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmezFIfh7tj6qfd_MawwL55KCf0esqdfpnKeEt124lPK-d7Rfh7A67a-90lvjNxRObftKW8Nyp919lTCSmhWhZb7pBv0Y0oWnXuyP9iUM4wsuMQedsBIRHqWgZnwULOInRskv_6LZxaF3s/s1600/3.jpg&quot;
banner[3]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjv1GBh4ersE2_bQ8YMbohm1AA_vYdBQTDHIIi72QCUaq2BVQ5vIRdkhLhwe7Sxa9IizxRXHtyttRyKZJVJIoVPcx9u_RU4oWqxGW6MNTZE97dEOdlL-mfC5y7OfBtda9oXSoc9OzY-8m7h/s1600/Konachan.com+-+150749+bob_(biyonbiyon)+dress+feathers+hatsune_miku+thighhighs+twintails+vocaloid+wings.jpg&quot;
banner[4]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHXEoCASIpUbG2RoD-W6UHmZoFIYhXjt7bc2VcpQKro-iVAYWYENfA9mv5I8ZJ08Y1Tap8gWXIObTW1lrw1alN_Ft3Ha-_34O3Bj4HAWEmFiO26IAdO4Vkr7U-M6iS2lhWMyNvZCtTpe9x/s1600/ll.jpg&quot;
banner[5]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZMLzMMRpYrYP154kciW9YbBWaJwVRb-gddBCRsFpTdgUfKW7NPPYwYKnAeFKjGdQIhLmbZ-8RGH8rmd3k3RnHhSV40nHHjoF8RMaU42gV5VSXXuMXojlrFjM5bRzAlHlCiDdP8hd1txYb/s1600/Konachan.com+-+150773+aqua_eyes+aqua_hair+hatsune_miku+long_hair+tagme+vocaloid.jpg&quot;
banner[6]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjcKkbQWGQjKYtq6h6JmtoWuVXqfTlYH0-FMngSdqx3aY-hs-TrlNrBsMIoq0IE08-IxXRKX4DAjJ2pSlbw0J3BqHfu5jiYnG6s-g1JkQO2tdfZykRhwbBMaFeNkyx2Ra-uBqn8GxvbI2Xa/s1600/2.jpg&quot;
banner[7]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3W7FxJ-_VdVzjoYeOe4CaqsBdRzHqGrdSpjI1qupkU9bdpyt-UvFHLz7S_gr6ppUvEFwDlpTMKjKivx7-JnQWh0VR0KUHm8HbQdVYcVM29_qBlJhi7zQ6ODZQ2A0hEb23_YdpUzpEGRzA/s1600/wef.jpg&quot;
banner[8]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLTekuxkv3Aqe8-Jz5ekXC5oBg5WujRKzTEzVKdgLcO5V0wlFqrmi4YOl_irhzir5frAd2t-OQs3urzIVEA2-QE9iv2NvPJNtghAyRBO6DL-om4MCHSuRwMfmN6KKn49S-71jeDx2COTVG/s1600/4.jpg&quot;
banner[9]=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtIRjOpTuVkaGM1V-VjODA7JvIVpj0O0Y3I-X1CG6H7qdcbQ99N6mW-xcV1uYQ1-YDa1Iuw9U8oRCVbo_CWZx-8-Ps4Y1plqoaaY_6OAJbH16UgZ9Ap0rz5kMGgVAyzu_TJXOgNDUGthFS/s1600/Untitled-1.jpg&quot;
var random=Math.floor(10*Math.random());
document.write(&quot;<style>&quot;);
document.write(&quot;body {&quot;);
document.write(&#39; background:url(&quot;&#39; + banner[random] + &#39;&quot;) no-repeat top left;&#39;);
document.write(&#39; background-size:100%;&#39; );
document.write(&#39; background-attachment:fixed;&#39; );
document.write(&quot; }&quot;);
document.write(&quot;</style>&quot;);
</script>

Untuk mengganti gambar backgroundnya,kalian cukup mengganti url gambarnya. :)



Jika kalian tertarik dengan template aneh ini,silakan download dan dicoba .Free!! dan dilarang diperjualbelikan.bijak lah menggunakan template gratis dan selalu menghargai hasil kerja keras orang lain.maju terus blogger indonesia,terima kasih masih tetap setia mengunjungi blog aneh ini,semoga blog ini tetap bermanfaat ^^.sharing is caring
happy holiday~xD

Download via Dropbox

Download via google Drive

Demo

Note:

-Saya tidak bertanggung jawab atas kerusakan/crash karena pengeditan template yang anda lakukan.

Sebelum mencoba template ini,ada baiknya anda membaca kebijakan menggunakan template disini.

http://djogzs.blogspot.com/p/privacy-policy-kebijakan-privasi.html

Read More

Banner Slider dengan CSS3

Banner Slider dengan CSS3,yaitu beberapa gambar/image banner yang dimasukan kedalam 1 slider.jadi fungsi'a sama saja dengan photo slider yang saya dapat dari website : iamceege.saya hanya mengedit CSS dan HTML'a,sehingga ukuranya menjadi pas 468px x 60px.contoh'a bisa kalian lihat sendiri pada blog saya,yui-indo atau gambar dibawah ini.

screenshot

Untuk penerapanya sendiri cukup mudah,kamu tinggal copy paste HTML dan CSS dibawah ini.

CSS : diatas code ]]></b:skin>

HTML :letakan diantara kode html/didalam <body> dan </body>
(tergantung kamu mau diletakan dimana.)

HTML

<div id='slider2'>
<div id='mask'>
<ul><li>
<a href='#' title='#'><img src='urlgambar'/></a></li>
<li>
<a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
<li><a href='#' title='#'><img src='urlgambar'/></a>
</li>
</ul>
</div>
<div id='progress'>
</div><div id='overlay'>
</div><div id='pause'>
</div></div>

a href='#' (ganti tanda pagar ddengan URL link yang dituju)

title='#' (ganti dengan nama link yang dituju)

'urlgambar' (ganti dengan Url site yang dituju)

CSS

#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}
#mask {
overflow:hidden;
}
#slider2:hover {
background-color:#fff;
border:10px solid #fff;
}
#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;
}

Oia,untuk slidernya sendiri sudah saya atur agar kecepatan slide'a lebih lambat dari aslinya,yang diatur dengan css keyframe slide-animation.

dan juga menurut saya pemasangan banner ini terbatas,hanya4 buah.kenapa tidak bisa lebih?
sebenarnya bisa,pertama,kamu perhatikan CSS dibawah ini.

@-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;}
}

perhatikan saat 25% dan 45%, left:-468px; .jadi saat css slider sudah difungsikan untuk bergeser ke arah kiri sejauh 468px.

1. maka karena itu jika ukuran gambar tidak tepat/sama,yang terjadi pergerakan slider menjadi tidak sempurna.

2.bila kamu perhatikan,kenapa di timing 47.5% menggunakan opacity?itu hanya perfungsi sebagai fade effect/transparant sesaat akan bergeser.

3.di timing 50% 70% bernilai -936px dan 75% 98% -1404px. kenapa bisa begitu?
itu artinya slide akan selalu bergeser ke arah kiri sejauh -468px.dan selanjutnya juga pindah ke slide selanjutnya,maka akan bergeser lagi sejauh -468px.
begini perhitungan dan teorinya:

-ketika suatu objek digeser kearah kiri,maka akan bernilai minus,maka

0-468 = -468

digeser ke arah kiri lagi menjadi

-468-468 = -936

digeser ke arah kiri lagi menjadi

-936-468 = -1404

lalu di timing 100% kembali ke posisi awal yaitu 0.

nah,jadi bagai mana kalau mau menambahkan slider lagi? kalian harus membuat perhitungan sendiri mulai dari timing 0% sampai 100%.

jadi semoga saja bisa dipahami dari penjelasan saya diatas,pastinya ada hubunganya dengan perhitungan matematika xD

karena jika anda mengerti dengan fungsi diatas,kamu bisa mengatur slide ini sendiri dengan ukuran bebas.

Note:-diatas hanya contoh,karena slider'a ini crossbrowser antara mozzilla dan chrome,maka perhatikan awalan depan css moz dan webkit,nilai'a harus sama.

Untuk pengaturan posisi slidernya,menggunakan margin.

margin:0px 0px 0px 0px;

#slider2 {
width: 468px;
height: 60px;
margin:0px 0px 0px 0px;
overflow: hidden;
background-color: #F8F8F8;
border: 10px solid #F8F8F8;
-moz-transition: all 170ms ease-in;
-webkit-transition: all 170ms ease-in;
-o-transition: all 170ms ease-in;
position: relative;
border-radius: 10px/20px;
}

---

Setting diatas masih default,kamu tinggal mengatur nilai margin left,top,right dan bottomnya.

yahh,sebenarnya trik ini awal"a cuma iseng" untuk blog saya sendiri,tapi karena saya rasa banyak dibutuhkan juga dan bermanfaat untuk mengurangi pemakaian tempat banner,jadi saya share deh :)

oia saya ingatkan sebelumnya,sebelum menggunakan trik banner ini,ada baiknya membackup template agar tidak terjadi sesuatu yang tidak diinginkan,dan selalu ingat tidak menggunakan CSS secara berlebihan agar tidak memberatkan blog kamu.

semoga bermanfaat,arigatou gozaimasu minna~

Read More