Senin, 30 Januari 2012

Costume CSS3 V2 Blogger templates

0 komentar
Costume CSS3 V2

Apa kabar sobat?Kali ini saya mau share blogger template lagi nih.karena lagi banyak permintaan yang mau template yang sedang pakai,dan inilah awal dari blog saya.ok nih template costume css3 v2 dari template sebelumnya costume css3 yang sudah pernah saya share juga.
tapi tema'a saya buat akatsuki deidara pula.template ini sudah banyak diperbaiki dari template sebelumnya karena masih ada kekurangan.beberapa saya ganti efek" css3'a dan tambahan pagenavi melayang serta efek animasi tombol readmore yang mirip dengan blog saya.
-Home page-
 -Post page-




bila sobat mau mengganti gambar'a,sobat tinggal cari kode html dibawah ini..

<li><div class='kotak16animasi'>
<div><a href='http://djogzs.blogspot.com/'><img alt='djogzs' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBkEHFgzk5S4_zah93YFzNYHyEbXqs1Sv-MfPBY-F58tN0A_yXUOkt_Ug4GyTBKvDdQzNmeAehd43tCyryXJU5IW9zB9snkWJeaj7eL86TjOI_6AOmoIeUTW2F_gphrdJ7bWdJxq01Dhbc/s1600/Untitled-1.jpg'/></a></div><div>Welcome ^_^</div>
</div></li>
Keterangan:
pada text yang bewarna merah : alamat link
pada text yang bewarna biru    : Ganti dengan Url gambar kamu  (857 x 303) (ukuran bisa diubah)
pada text yang bewarna ungu   : ganti pesan kamu
#note:kamu akan menemukam kode html yang sama dengan yang diatas,yang pertama untuk gambar depan halaman depan,dan satu lagi halaman posting.jadi inti'a kamu bisa menggunakan 2 gambar yang berbeda untuk halaman depan dan halaman posting.
Untuk menambah link pada menu,buka blogger =>rancagan => klik edit seperti pada gambar,lalu masukan url link dan nama link'a.

Arigatou gozaimasu,ada yang tidak dimengerti,tanyakan saja~



Jumat, 27 Januari 2012

Animasi Dengan Jquery Firefly Plugin

0 komentar
Animasi Dengan Jquery Firefly Plugin
hai sobat,kali ini saya mau sharing cara memasang Jquery Firefly.Jquery Firefly,memungkinkan untuk menampilkan animasi pada background blog/webkita berputar" seperti nyamuk~xDD.contohnya bisa dilihat seperti blog saya sendiri,bila sobat perhatikan,ada bintang" yang bergerak mengelilingi blog saya.sebelum mencoba jquety ini,jaya ingatkan dahulu untuk membackup template kamu.

Contoh Screenshot



Ok,pertama buka blogger => rancangan => edit HTMl,lalu masukan script" dibawah ini, diatas kode </head>


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/djogzs/js/less-1.1.3.min.js' type='text/javascript'/>
<script src='https://sites.google.com/site/djogzs/js/jquery-firefly.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$.firefly({
/*images : [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlrQXSH7kAgaHUJ1myc_XE98gWl_c99P4jKoKVO6ek_CP1jh_YPYhtgVVjxj1qcO7Quci8DVYik30avhXAvAdTvM66ZjlfGE7b9k2Mo8gM1uaJvfelUbh5LyXAKD4Sd6cW7lW2h5gfAA8/s1600/satar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWHrnyzx80-1su_eOhAyZ7imRxEuzWZcjjRjagW5gqB3iYUnt5qdHqQL63CL0NAtt2dezw6eaN34I-ewVIJsF6IPPc6oJtPtgFMBVhUfBzywNN0ksikV1VRHeJEIDcPpGUkt9u1k-_Po/s1600/stggar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlrQXSH7kAgaHUJ1myc_XE98gWl_c99P4jKoKVO6ek_CP1jh_YPYhtgVVjxj1qcO7Quci8DVYik30avhXAvAdTvM66ZjlfGE7b9k2Mo8gM1uaJvfelUbh5LyXAKD4Sd6cW7lW2h5gfAA8/s1600/satar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWHrnyzx80-1su_eOhAyZ7imRxEuzWZcjjRjagW5gqB3iYUnt5qdHqQL63CL0NAtt2dezw6eaN34I-ewVIJsF6IPPc6oJtPtgFMBVhUfBzywNN0ksikV1VRHeJEIDcPpGUkt9u1k-_Po/s1600/stggar.png&#39;],*/
images : [&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlrQXSH7kAgaHUJ1myc_XE98gWl_c99P4jKoKVO6ek_CP1jh_YPYhtgVVjxj1qcO7Quci8DVYik30avhXAvAdTvM66ZjlfGE7b9k2Mo8gM1uaJvfelUbh5LyXAKD4Sd6cW7lW2h5gfAA8/s1600/satar.png&#39;,
&#39;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGWHrnyzx80-1su_eOhAyZ7imRxEuzWZcjjRjagW5gqB3iYUnt5qdHqQL63CL0NAtt2dezw6eaN34I-ewVIJsF6IPPc6oJtPtgFMBVhUfBzywNN0ksikV1VRHeJEIDcPpGUkt9u1k-_Po/s1600/stggar.png&#39;],
total : 65
});
});
</script>


Setelah itu simpan dan lihat hasilnya.
Note:Jika Ditemplate kamu sudah ada jquery,ada kemungkinan animasi'a tidak akan muncul karena bentrok atau ada jquery yang sama
oia,animasinya yang sekarang masih dipakai adalah gambar bintang.Ada yang kecil dan juga ada yang besar (ada2 jenis)kamu bisa menggantinya dengan gambar kamu dan jumlah'a juga bisa kamu atur.tapi untuk gambar'a saya sarankan gunakan gambar yang ukuran/size'a yang kecil,agar tidak trlalu berat.selamat mencoba,Arigatou gozaimasu~


Selasa, 24 Januari 2012

Trik membuat page navigasi melayang

0 komentar
Trik membuat page navigasi melayang


Sekedar mau berbagi trik lagi,kali ini saya mau sharing cara membuat pagenavigasi seperti di blog saya.trik ini memungkinkan menu "posting lama,posting baru" melayang dan berada dibawah,yang bisa dibilang mirip taskbar.
Oia,sabelumnya mau saya ingatkan,trik ini tidak semua template bisa,karena bisa saja css'a berbeda".tapi rata" saya pikir sama saja kq.dan sebelum menggunakan trik ini juga,saya sarankan pula untuk membackup dahulu template kamu/simpan /download dahulu template kamu.
Disini yang sobat perlu lakukan buka blogger => rancangan =>edit Html,lalu copy css dibawah ini(pilih salah satu style) ke atas kode </b;skin> .

Note:Sobat cari dahulu css #blog-pager,#blog-pager-older-link,#blog-pager-newer-link pada template sobat,bila ada hapus dahulu agar css'a tidak bentrok.


Style 1



.home-link {
background: white;
padding: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
text-align: center;
position: absolute;
background: rgba(255, 255, 255, 0.8);
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}


#blog-pager-newer-link {
float: right;
padding: 5px;
}
#blog-pager-older-link {
float:left;
padding: 5px;
}
#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: -moz-linear-gradient(-90deg, #F3F3F3, #E5E3E4) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#E5E3E4));
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#blog-pager a {color:#58A;}
Style 2


.home-link {
background: white;
padding: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
text-align: center;
position: absolute;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}


#blog-pager-newer-link {
float: right;
padding: 5px;
}
#blog-pager-older-link {
float:left;
padding: 5px;
}
#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: rgba(0, 0, 0, 0.8 );
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#blog-pager a {color:#58A;}

Style 3


.home-link {
background: white;
padding: 10px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
text-align: center;
position: absolute;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}


#blog-pager-newer-link {
float: right;
padding: 5px;
}
#blog-pager-older-link {
float:left;
padding: 5px;
}
#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: rgba(0, 0, 0, 0.8 );
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

#blog-pager a {color:#58A;}


Untuk style lainya,kamu bisa menggunakan css3 gradient generator
http://www.colorzilla.com/gradient-editor/
sobat pilih salah satu style 'a,lalu copy paste css yang seperti diatas,jangan semua'a,karena menurut saya yang penting hanya css untuk google chrome dan mozilla firefox.
setelah itu letakan css yg tadi kamu copy ke dalam css #blog-pager
Contoh:
#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: rgba(0, 0, 0, 0.8 );
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);
}

jadi seperti

#blog-pager {
text-align: center;
font-family: 'Trebuchet MS', sans-serif;
position: fixed;
font-size:15px;
bottom: 0;
width: 100%;
color:#000000;
left: 0;
margin:0px;
background: -moz-linear-gradient(top, #d5cea6 0%, #c9c190 40%, #b7ad70 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d5cea6), color-stop(40%,#c9c190), color-stop(100%,#b7ad70));
background: -webkit-linear-gradient(top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);
border-top: 1px dotted #26B7EB;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0 5px rgba(0,0,0,0.2);


Hapus background: rgba(0, 0, 0, 0.8 ); agar css backgroundya tidak bentrok.

Untuk yang lain" seperti mengganti jenis font,warna dan sebagainya,saya tidak jelaskan secara rinci.tapi kalau ada masalah,tanyakan saja .thx

Detective Conan Episode 643 Subtitle Indonesia

0 komentar

JUDUL
Mengambil Kartu Karuta yang Mengerikan [Bagian Kedua]
SINOPSIS
-
STAFF YANG MENGERJAKAN
TRANSLATOREDITORKARAENCODERUPLOADERSTREAMING
AGUNG WEWAGUNG WEW-AGUNG WEWAGUNG WEW-
LINK DOWNLOADPLAYER REKOMENDASI
480p720p720p [10 bit]REUPLOADWINDOWS [32 bit]WINDOWS [64 bit]
- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -
CATATAN  1. Untuk Download, silahkan Join ke "GRUP FB MTB" dulu, lalu lihat File "Daftar Password".
  2. Jika kesusahan Download, silakan klik menu "Bantuan" yang ada di menu atas.
  3. Link Reupload berisi link campuran yang acak, tidak menjamin resolusi, tapi memprioritaskan link "hidup".
  4. Gunakan Player Rekomendasi dari kami apabila saat menonton, teman-teman mengalami beberapa masalah.

Tips Design menggunakan CSS3

0 komentar
Tips Design menggunakan CSS3

Hai sobat,terima kasih sampai saat ini blog saya masih hidup karena masih banyak yang mengunjungi blog saya.pada kesempatan kali ini,saya mau kasih Tips tentang penggunaan CSS3 yang baik dan benar.
setelah lama saya banyak melakukan experimen dengan CSS3,dan baca" juga tips" design web/blog dari situs" web ternama yang memang sudah ahli dengan CSS,html,coding dan sebagainya.Saya jadi mengerti bahwa CSS3 dibuat untuk tujuan yang sebenarnya untuk mengoptimalkan dan mempercantik kinerja web itu sendiri.tapi ada kalanya jika terlalu banyak menggunakan fitur" yang sebenarnya juga tidak terlalu penting,dan cuma pamer masang sesuatu yang gajelas,maka yang terjadi adalah crash pada browser saat membuka blog kita sendiri.mengapa? karena browser juga mempunyai batas untuk menampung semua efek" CSS3 yang sedang berjalan,apalagi kalau kita sedang membuka multitab,seperti facebook,youtube,dan sebagainya.coba sobat blogwalking ke situs" web orang asing.pernakah sobat melihat mereka menggunakan css3 yang berlebihan? TIDAK .mereka lebih mementingkan design yang rapih,tidak berat dan nyaman untuk dikunjungi.sayapun sebenarnya iri,maka dari itu saya mendesign blog saya sendiri,buang semuanya yang tidak terlalu penting,tapi tetap memperhatikan designya.saya sebagai anak Indonesia,turut bangga karena banyak teman dari kalian yang mungkin juga sudah jago banget mendesign blog.saya tidak mau menyombongkan diri,saya selalu terbuka pada semua yang ingin belajar,tapi disaat tertentu juga saya tidak bisa membantu,karena saat ini juga masih banyak tugas kuliah.belajar dari pengalaman,itulah yang membuat saya bisa membuat sesuatu yang bermanfaat.Otodidak,itulah yang membuat saya bisa bermain CSS,HTML,php,dll dan blogwalking,berselancar cari" inspirasi sampai ke (web/blog ) negeri tetangga.


Sekarang,saya mau memberikan beberapa tips Design CSS3 yang harusnya digunakan dan tidak digunakan.


1. Hindari penggunaan OPACITY pada seluruh content blog


Sebelumnya saya minta maaf pada pembuat template ini.hanya contoh,saya tidak tau siapa pembuatnya,tapi cuma mau kasih sedikit kritikan.Sumpah demi tuhan template ini berat banget.saya tidak tau cuma buat gaya"an doank atau iseng",tapi pengunaan opacity untuk membuat semua konten jadi transparant adalah FATAL.


Opacity:0;

Opacity digunakan untuk membuat suatu elemen menjadi transparant,termasuk text gambar dan seluruh isi pada konten itu sendiri bila penggunaanya tidak tepat.memang sih bagus,tapi ada baiknya tidak digunakan pada semua konten diblog kamu.gunakanlah pada konten tertentu seperti readmore atau sesuatu yang menurut kamu perlu di hidden.jadi apa yang harus kita lakukan?
Gunakanlah css alternatif untuk membuat transparant menggunakan RGBA color.
Apa itu rgba color?
RGBA color adalah singkatan dari RED GREEN BLUE ALPA,diartikan sebagai ruang warna.jadi fungsinya sama untuk memberi warna pada barckground suatu elemen,tapi keunggulanya,bisa mengatur nilai transparant pada background,tanpa membuat semua isi konten tersebut menjadi transparant,jadi hanya difungsikan pada backgroundnya saja.ok langsung keintinya aja.

Membuat background transparant
background: rgba(255, 255, 255, 0.5 );


Membuat border/garis batas transparant
border: 1px dotted rgba(255, 255, 255, 0.5 );

Bagaimana Cara kerja RGBA color?



Dari mana kita dapat mengatur pada RGBA color tersebut?
Ada banyak cara untuk mengatur warna'a.
A. Photoshop


B. Aplikasi Color pic -DOWNLOAD-


C. Menggunakan media online
http://css3generator.com/
http://www.colorschemer.com/online.html

hasilnya adalah blog saya sendiri,rgba color lebih aman digunakan daripada penggunaan opacity.



2. Hindari penggunaan Textshadow yang berlebihan
Seperti gambar diatas,membuat text shadow yang efeknya seperti api.kalau menurut saya norak sih,tapi pendapat orang lain mungkin bisa berbeda.boleh" aja sih menggunakan texs shadow,tapi gunakanlah hanya pada judul posting,header dan judul konten sidebar.perhatikan juga jumlah shadow yang digunakan pada text.Serta perhatikan penggunaan text shadow pada isi posting (text harus jelas agar mudah dibaca)

text-shadow: 0px 0px 4px #ccc, -1px -5px 4px #ff3, 2px -10px 6px #fd3, -3px -15px 11px #f80, 3px -18px 18px #f20;

3. Hindari penggunaan Kostum font/text yang berlebihan.
Menggunakan kostum font pada blog juga akan menambah beban/pageload.saya sarankan untuk tidak menggunakan lebih dari 2 jenis font.dan gunakan kostum font pada header,post header, dan judul sidebar/footer.jangan gunakan kostum font pada isi posting,karena memungkinkan blog kamu menjadi berat


4. Hindari penggunaan CSS3 animasi dan CSS3 keyframe yang berlebihan.
Penggunaan css3 animasi juga terkadang mempunyai beban yang sangat berat.
contohnya bila kamu masukan css hover efek pada readmore,header,sidebar atau konten" tertentu.sebenarnya tidak ada yang melarang juga.tapi gapapala kalau cuma experiment,tapi saya sarankan untuk blog utama kamu agar gunakan CSS3 animasi pada konten" tertentu saja.

5. Gunakan fitus css3 yang menurut kamu penting,nyaman,menarik,minimalis,dan tidak terlalu berat.
-Selalu thinking.sebelum kamu menambahkan sesuatu pada blog kamu,pikirkan apa fungsi dan kepentinganya.
misal kalau blog kamu adalah blog fotografi,bila kamu pikir penting untuk menggunakan photoslide yang menggunakan jquery atau css3,silakan,tapi bila tidak penting,lebih baik jangan digunakan.
-Design original ,jangan menjiplak template orang lain,atau akan disebut PLAGIAT.
-jangan terlalu banyak menambahkan accesoris pada blog,terutama css3.
-hapus efek" css3 yang terlalu banyak pada satu elemen.
-Selalu perhatikan kecepatan blog,beban dan tampilan blog.
-kenyamanan adalah no 1,kalau berat,pengunjung sudah males duluan buka blog kamu.
-karya buatan sendiri,akan menimbulkan kepuasan sendiri,jiplak punya orang lain, ga akan pernah puas.
-mendukung browser yang sering dikunjungi(seperti google chrome dan mozilla firefox)
-Moz     =Untuk Mozilla firefox
-webkit  =Untuk Google Chrome
bila css3 kamu hanya menggunakan fitur webkit(seperti animas,border,box shadow),maka yang terjadi efek'a hanya tampil di google chrome,tetapi di mozzila tidak.solusinya,gunakan kedua css tersebut.


Segini dulu tips dari saya,semoga bermanfaat,saya dukung terus blogger indonesia.kreatif inspiratif dan terus berkarya.Ganbatte kudasai minna-san~ :)

Jumat, 20 Januari 2012

Detective Conan Episode 642 Subtitle Indonesia

0 komentar

JUDUL
Mengambil Kartu Karuta yang Mengerikan [Bagian Pertama]
SINOPSIS
-
STAFF YANG MENGERJAKAN
TRANSLATOREDITORKARAENCODERUPLOADERSTREAMING
AGUNG WEWAGUNG WEW-AGUNG WEWAGUNG WEW-
LINK DOWNLOADPLAYER REKOMENDASI
480p720p720p [10 bit]REUPLOADWINDOWS [32 bit]WINDOWS [64 bit]
- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -
CATATAN  1. Untuk Download, silahkan Join ke "GRUP FB MTB" dulu, lalu lihat File "Daftar Password".
  2. Jika kesusahan Download, silakan klik menu "Bantuan" yang ada di menu atas.
  3. Link Reupload berisi link campuran yang acak, tidak menjamin resolusi, tapi memprioritaskan link "hidup".
  4. Gunakan Player Rekomendasi dari kami apabila saat menonton, teman-teman mengalami beberapa masalah.

Detective Conan Episode 641 Subtitle Indonesia

0 komentar

JUDUL
Perjalanan Memori dari Delapan Sketsa [Bagian Kurashiki]
SINOPSIS
-
STAFF YANG MENGERJAKAN
TRANSLATOREDITORKARAENCODERUPLOADERSTREAMING
CONANSUBSCONANSUBSCONANSUBSCONANSUBSAGUNG WEW-
LINK DOWNLOADPLAYER REKOMENDASI
480p720p720p [10 bit]REUPLOADWINDOWS [32 bit]WINDOWS [64 bit]
- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -
CATATAN  1. Untuk Download, silahkan Join ke "GRUP FB MTB" dulu, lalu lihat File "Daftar Password".
  2. Jika kesusahan Download, silakan klik menu "Bantuan" yang ada di menu atas.
  3. Link Reupload berisi link campuran yang acak, tidak menjamin resolusi, tapi memprioritaskan link "hidup".
  4. Gunakan Player Rekomendasi dari kami apabila saat menonton, teman-teman mengalami beberapa masalah.

Selasa, 17 Januari 2012

Uchiha Sasuke Blogtemplates

0 komentar
Uchiha sasuke Blogtemplates

Seperti yang saya janjikan,setelah buat template cosplay lovers V2,saya langsung buat template lagi dengan thema Uchiha sasuke.desainya lebih menarik,dan lebih berwarna,sesuai dengan warna kepribadian karakter Sasuke.yeahhh,me gusta~xD

Seperti biasa pula,Template ini menggunakan CSS3 pada bagian sidebar kiri dan kanan serta pada posting,dengan desain transparant.


Ganti Link pada menubar,buka Rancangan >> Edit Html
lalu cari kode html seperti yang dibawah ini.

<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://djogzs.blogspot.com/' title='about'>about</a></li>
</ul>
Lalu ganti Link'a" dengan alamat link kamu~

Untuk masalah Tombol Readmore tidak muncul,kamu harus menambahkan meta tag more secara manual pada posting,atau dengan mengeklik tompol insert jump break pada posting editor


Untuk mengganti logo,kamu cari css dibawah ini,lalu gantu URL gambarnya.

#header {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEif62xgXPuQyHUKKlyAplRQXu7NXLZDO5bCyzmhjudQVsFdllvMjdPYd494Ta63_9LtxiJSIVFv1BaiisbogKAc4sM99SKCuZIG8yIuThX3W7e29hDarpxg2YWU3YlBvWzyj76kVSaQ5PKj/s1600/logodw.png) left bottom no-repeat transparent;
position: absolute;
height: 162px;
margin: 0 0 0 25px;
padding: 140px 0 0 0;
}


Sipp deh,keren bukan~xD.untuk selanjutnya,saya offlagi,karena minggu depan udah mau UAS.~xDD Doain ya semoga saya dapet nilai yang memuaskan TT__TT  :) Arigatou Gozaimasu~


Minggu, 15 Januari 2012

Trik membuat Fullscreen background slideshow dengan CSS3

0 komentar
Trik membuat Fullscreen background slideshow dengan CSS3

Memasang wallpaper pada background blog kita,terlihat menarik dan unik.tapi menggunakan trik ini juga akan membuat blog sobat agak berat karena lamanya proses loading gambar yang akan ditampilkan.
tapi itu juga tergantung dari size gambar yang dijadikan background,saya sarankan sebelum mengupload dan memasang background,cari gambar yang ukuran filenya kecil(100-200kb),dan bila perlu,edit dulu gambarnya di photoshop menjadi kecil.contohnya blog saya sekarang,mungkin masih agak berat saat pertama kali buka blog saya,tapi kalau cache sudah tersimpan di browser kamu,maka otomatis tidak akan terlalu berat lagi saat membuka blog saya.sebelum mencoba trik ini,saya ingatkan untuk membackup terlebih dahulu template blogger kamu.

Contohnya kamu bisa liat blog saya,atau disini:
Trik membuat Fullscreen background slideshow dengan CSS3

dan ini contoh yang saya gunakan pada template blog experiment : http://akatsukimangaindo.blogspot.com/

ok,yang pertama buka rancangan=> edit HTML,lalu copy kode html dibawah ini di bawah kode <body>

<ul class="cb-slideshow">
<li><span>Gambar 01</span><div><h3>textkamu1</h3></div></li>
<li><span>Gambar 02</span><div><h3>textkamu2</h3></div></li>
<li><span>Gambar 03</span><div><h3>textkamu3</h3></div></li>
<li><span>Gambar 04</span><div><h3>textkamu4</h3></div></li>
<li><span>Gambar 05</span><div><h3>textkamu5</h3></div></li>
<li><span>Gambar 06</span><div><h3>textkamu6</h3></div></li>
</ul>


#Note:kamu bisa mengganti pesannya pada tiap slide.


yang kedua,pilih/COPY SALAH SATU Style/CSS yang ada dibawah ini,Sesuai yang ada dicontoh.


Slide effect 1

.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% { opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
8% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}

@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 140px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 80px }
}


Slide effect 2

.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 10px;
left: 0px;
width: 100%;
text-align: right;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-o-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1) rotate(3deg);
}
25% {
opacity: 0;
transform: scale(1.1) rotate(3deg);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateX(200px);
}
8% {
opacity: 1;
-webkit-transform: translateX(0px);
}
17% {
opacity: 1;
-webkit-transform: translateX(0px);
}
19% {
opacity: 0;
-webkit-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateX(200px);
}
8% {
opacity: 1;
-moz-transform: translateX(0px);
}
17% {
opacity: 1;
-moz-transform: translateX(0px);
}
19% {
opacity: 0;
-moz-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateX(200px);
}
8% {
opacity: 1;
-o-transform: translateX(0px);
}
17% {
opacity: 1;
-o-transform: translateX(0px);
}
19% {
opacity: 0;
-o-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateX(200px);
}
8% {
opacity: 1;
-ms-transform: translateX(0px);
}
17% {
opacity: 1;
-ms-transform: translateX(0px);
}
19% {
opacity: 0;
-ms-transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateX(200px);
}
8% {
opacity: 1;
transform: translateX(0px);
}
17% {
opacity: 1;
transform: translateX(0px);
}
19% {
opacity: 0;
transform: translateX(-400px);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}


Slide effect 3

.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 160px;
padding: 0 30px;
line-height: 120px;
color: rgba(255,255,255,0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-moz-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-o-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-ms-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1);
}
22% {
opacity: 0;
-webkit-transform: scale(1.1) translateY(-20%);
}
25% {
opacity: 0;
-transform: scale(1.1) translateY(-100%);
}
100% { opacity: 0 }
}
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(-300%);
}
8% {
opacity: 1;
-webkit-transform: translateY(0%);
}
17% {
opacity: 1;
-webkit-transform: translateY(0%);
}
19% {
opacity: 0;
-webkit-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(-300%);
}
8% {
opacity: 1;
-moz-transform: translateY(0%);
}
17% {
opacity: 1;
-moz-transform: translateY(0%);
}
19% {
opacity: 0;
-moz-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(-300%);
}
8% {
opacity: 1;
-o-transform: translateY(0%);
}
17% {
opacity: 1;
-o-transform: translateY(0%);
}
19% {
opacity: 0;
-o-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(-300%);
}
8% {
opacity: 1;
-ms-transform: translateY(0%);
}
17% {
opacity: 1;
-ms-transform: translateY(0%);
}
19% {
opacity: 0;
-ms-transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(-300%);
}
8% {
opacity: 1;
transform: translateY(0%);
}
17% {
opacity: 1;
transform: translateY(0%);
}
19% {
opacity: 0;
transform: translateY(100%);
}
25% { opacity: 0 }
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}


Slide effect 4

.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0;
}
.cb-slideshow:after {
content: '';
background: transparent url(http://tympanus.net/Tutorials/CSS3FullscreenSlideshow/images/pattern.png) repeat top left;
}
.cb-slideshow li span {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: none;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
bottom: 30px;
left: 0px;
width: 100%;
text-align: center;
opacity: 0;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
font-size: 240px;
padding: 0;
line-height: 200px;
color: rgba(169,3,41, 0.8);
}
.cb-slideshow li:nth-child(1) span { background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg) }
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
/* Animation for the slideshow images */
@-webkit-keyframes imageAnimation {
0% {
opacity: 0;
-webkit-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-webkit-transform: scale(1.05);
-webkit-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-webkit-transform: scale(1.1);
}
25% {
opacity: 0;
-webkit-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% {
opacity: 0;
-moz-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-moz-transform: scale(1.05);
-moz-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-moz-transform: scale(1.1);
}
25% {
opacity: 0;
-moz-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% {
opacity: 0;
-o-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-o-transform: scale(1.05);
-o-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-o-transform: scale(1.1);
}
25% {
opacity: 0;
-o-transform: scale(1.1);
}
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% {
opacity: 0;
-ms-animation-timing-function: ease-in;
}
8% {
opacity: 1;
-ms-transform: scale(1.05);
-ms-animation-timing-function: ease-out;
}
17% {
opacity: 1;
-ms-transform: scale(1.1);
}
25% {
opacity: 0;
-ms-transform: scale(1.1);
}
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% {
opacity: 0;
animation-timing-function: ease-in;
}
8% {
opacity: 1;
transform: scale(1.05);
animation-timing-function: ease-out;
}
17% {
opacity: 1;
transform: scale(1.1);
}
25% {
opacity: 0;
transform: scale(1.1);
}
100% { opacity: 0 }
}
/* Animation for the title */
@-webkit-keyframes titleAnimation {
0% {
opacity: 0;
-webkit-transform: translateY(200px);
}
8% {
opacity: 1;
-webkit-transform: translateY(0px);
}
17% {
opacity: 1;
-webkit-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@-moz-keyframes titleAnimation {
0% {
opacity: 0;
-moz-transform: translateY(200px);
}
8% {
opacity: 1;
-moz-transform: translateY(0px);
}
17% {
opacity: 1;
-moz-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-moz-transform: scale(10);
}
100% { opacity: 0 }
}
@-o-keyframes titleAnimation {
0% {
opacity: 0;
-o-transform: translateY(200px);
}
8% {
opacity: 1;
-o-transform: translateY(0px);
}
17% {
opacity: 1;
-o-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-o-transform: scale(10);
}
100% { opacity: 0 }
}
@-ms-keyframes titleAnimation {
0% {
opacity: 0;
-ms-transform: translateY(200px);
}
8% {
opacity: 1;
-ms-transform: translateY(0px);
}
17% {
opacity: 1;
-ms-transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
-webkit-transform: scale(10);
}
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% {
opacity: 0;
transform: translateY(200px);
}
8% {
opacity: 1;
transform: translateY(0px);
}
17% {
opacity: 1;
transform: scale(1);
}
19% { opacity: 0 }
25% {
opacity: 0;
transform: scale(10);
}
100% { opacity: 0 }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 100px }
}
@media screen and (max-width: 600px) {
.cb-slideshow li div h3 { font-size: 50px }
}




Kalau sudah dicopy,paste di atas kode ]]></b:skin> ,lalu simpan dan lihat hasilnya.

Saya ingatkan,tidak semua template blogger sobat bisa menggunakan trik ini,jika gagal,maka akan menjadi speri dibawah ini:
saran saya,cek lagi template blogger sobat,mungkin template sobat tidak valid dan menurut saya ganti template lagi kalau niat banget ==v

Oia,sobat perhatikan CSS yang seperti dibawah ini:
.cb-slideshow li:nth-child(1) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)
}
.cb-slideshow li:nth-child(2) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}

bila sobat perhatikan,ada css .cb-slideshow li:nth-child 1 sampai 6,yang artinya kamu bisa pasang 6 background yang berbeda.yang sobat,lakukan selanjutnya ganti URL gambar yang sudah ada,dengan URL gambar kamu.
(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOQ7HNNWENkBuT0rFu-tSsy7KPRIjKQOZOZVlmYraoF_GQxSinByWrn4m1hg8kQUafTQgO2rhb00u_KFmzAALGPps2JQks7mSGTclTyqwMcoDhNfJvpMpL8By-PvrruWzQR61v5S52Jd0/s1600/sad_Saya_cosplay_Euphemia_li_Britannia.jpg)

(づ ̄ ³ ̄)づ  

Untuk CSS,saya tidak jelaskan secara rinci,karena untuk pengeditan css,merubah tipe font,warna dan efek animasi,akan lebih panjang ceritanya,tapi saya yakin sobat pasti sudah jago ngedit css.tapi kalau ada masalah atau galat(misal navbar ketutup gambar,ada widget yg ketutup gambar,dan mungkin juga ada element lain sehingga background tidak muncul karena tertutup oleh posting,sidebar,header),kalau masalahnya seperti itu,menurut saya element" kamu dibuat trasparant,atau cari blogger template yang luas posting'a tidak terlalu besar.
nah bila masalahnya semua halaman blog kamu ketutup ama slide ini,klo masalah yg kaya gitu udah gw duga.sbenarnya cuma tambahin css z-index:-99; ke css slide'a itu,jadi nanti posisinya ada di paling blakang.karena slide ini maen'a juga pakai sistem layer.
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
z-index: 0; <===,diganti jadi z-index: -99; (atau lebih minus juga boleh ==v }


Ibaratnya kaya photoshop,kalo layer'a diposisi paling atas,yg diblakangnya akan ketutup sama yang diatas,kalau di blog,slidenya itu bisa menimpa sidebar ataupun yg lain,jadi kita cuma harus posisiin slidenya itu dipaling belakang aja.

jika ada masalah tinggal tanyakan saja~xDD

Terima kasih,dan selamat mencoba :)


Jumat, 13 Januari 2012

Orange Minimalist Blogger templates

0 komentar
Orange Minimalist Blogger templates


Orange Minimalist adalah template blogger sederhana dengan desain minimalis dan ditambah dengan sentuhan CSS3 pada post header.template ini tidak saya buat terlalu banyak menggunakan CSS3
,hanya saja saya buat seminimalis mungkin penggunaanya,tetapi tetap mengutamakan desainya.



Ganti Link pada menubar,buka Rancangan >> Edit Html
lalu cari kode html seperti yang dibawah ini.

<ul id='nav'>
<li><a href='#' target='_blank' title='Home'>Home</a></li>
<li><a href='#' target='_blank' title='About'>About</a></li>
<li><a href='#' rel='nofollow' target='_blank' title='Contact'>Contact</a></li>
<li><a href='#' target='_blank' title='Follow'>Follow</a></li>
<li><a href='#' rel='author' target='_blank' title='Sitemap'>Sitemap</a></li>
</ul>


Ganti tanda pagar "#" dengan alamat link kamu~

  Tertarik menggunakan template ini?selamat mencoba sob~xD
Arigatou Gozaimasu~







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





Rabu, 11 Januari 2012

Cosplay lovers V2 Blogger Templates

0 komentar
Cosplay lovers V2 Blogger Template

Akhrinya Selesai juga Template Blogger Cosplay Lovers V2 *.*.Mungkin sobat bingung,kenapa saya bikin template dengan warna dasar yang lembut.ini karena ada Request template dari seseorang
, yang menyarankan buat template dengan warna dasar pink.gpplah,sekali" gw bikin aja,toh gambarnya moe gini.klo ga suka gambar cwe,berarti homo~xDD #Plakk. Oia,template ini sebenarnya bekas Template saya yang dulu "Naruto sage of the six template" mungkin sobat bertanya" kenapa saya tidak PERNAH memposting diblog saya?(dulu di blog akatsuki kagebunshin).itu karena templatenya belum sempurna dan banyak cacad'a.itu template gw buat waktu masih smp,jadi wajar aja kalau masih banyak kekurangan.nah,sekarang templatenya saya upgrade dengan design'a menggunakan css3 pada seluruh bagian template ini,tapi tidak terlalu detail,simple aja~



Ganti Link pada menubar,buka Rancangan >> Edit Html
lalu cari kode html seperti yang dibawah ini.

<ul id='nav'>
<li class='current-cat'><a expr:href='data:blog.homepageUrl' title='Home'>Home</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/posts/default&quot;' title='Posts RSS'>Posts RSS</a></li>
<li><a expr:href='data:blog.homepageUrl + &quot;feeds/comments/default&quot;' title='Comments RSS'>Comments RSS</a></li>
<li><a href='http://djogzs.blogspot.com/' title='about'>about</a></li>
</ul>


Lalu Link'a" dengan alamat link kamu~

Sipp deh,tapi mungkin ada dari beberapa yang menganggap template ini terlalu girly~xD.mungkin nanti saya akan buat versi untuk yang cowo'a,mungkin aja madara,atau naruto,atau juga bisa aja sasuke,suka -suka saya~xDD hhahaha,tapi kalau ada saran silakan aja :) Arigatou Gozaimasu~



Selasa, 10 Januari 2012

Detective Conan Episode 640 Subtitle Indonesia

0 komentar

JUDUL
Perjalanan Memori dari Delapan Sketsa [Bagian Okayama]
SINOPSIS
-
STAFF YANG MENGERJAKAN
TRANSLATOREDITORKARAENCODERUPLOADERSTREAMING
AGUNG WEWAGUNG WEW-AGUNG WEWAGUNG WEW-
LINK DOWNLOADPLAYER REKOMENDASI
480p720p720p [10 bit]REUPLOADWINDOWS [32 bit]WINDOWS [64 bit]
- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -- KLIK DISINI -
CATATAN  1. Untuk Download, silahkan Join ke "GRUP FB MTB" dulu, lalu lihat File "Daftar Password".
  2. Jika kesusahan Download, silakan klik menu "Bantuan" yang ada di menu atas.
  3. Link Reupload berisi link campuran yang acak, tidak menjamin resolusi, tapi memprioritaskan link "hidup".
  4. Gunakan Player Rekomendasi dari kami apabila saat menonton, teman-teman mengalami beberapa masalah.