Award Kesatu Derfz Yozzer
Nama Author :Ozim Kabutzst
Nama Blog :Derfz Yozzer
Url Blog :http://derdzyozzer.blogspot.com/
Nama Template :Madara Uchiha V.3
Yang Di ubah:ngasal ,ujak ujuk jadi template mada uchiha
Warna Template:oren,putih
Menurut Kamu Tentang Template saya : Bagus ,
Nah , bagus juga kan award nya
Animasi Loading Blog Dengan CSS Keyframes
ini macam"nya ada 3 yaitu, Bounce and Rotate Effect, Earthquake
Effect, dan yang terakhir yaitu Sliding Effect,. nah pada penasaran kan ?
oke lah langsung saja ke pembahasannya :) ...
oke lah langsung saja ke pembahasannya :) ...
A. Animation 1 (Bounce and Rotate efek) :
Anda bisa lihat contohnya di sini : "http://skynet-fordeon.blogspot.com/"
Untuk menggunakannya :
1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :
@-webkit-keyframes WAKloading{3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!
0%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-webkit-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-webkit-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-webkit-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-o-keyframes WAKloading{
0%{-o-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-o-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-o-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-o-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-moz-keyframes WAKloading{
0%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-moz-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-moz-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-moz-transform:translate(0px,0px) scale(1);opacity:1;}
}
@-ms-keyframes WAKloading{
0%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1}
20%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{-ms-transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{-ms-transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{-ms-transform:translate(0px,0px) scale(1);opacity:1;}
}
@keyframes WAKloading{
0%{transform:translate(0px,0px) scale(0.50);opacity:1}
20%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
40%{transform:translate(0px,0px) scale(0.50);opacity:1;}
60%{transform:translate(0px,-200px) scale(0.50);opacity:1;}
80%{transform:translate(0px,-200px) scale(0.50);opacity:1;-webkit-transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}
;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s4.Sehingga nantinya jadi seperti ini :
#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s}5. Save Template!
B. Animation 2 (Earthquake Effect) :
Bisa dilihat contohnya di sini : "http://simple-ware.blogspot.com/"
Untuk menggunakannya :
1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :
@keyframes WAKloading{3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}
@-o-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}
@-webkit-keyframes WAKloading{
0%{opacity:1;-webkit-transform:rotate(0deg);}
5%{opacity:1;-webkit-transform:rotate(5deg);}
10%{opacity:1;-webkit-transform:rotate(-5deg);}
15%{opacity:1;-webkit-transform:rotate(5deg);}
20%{opacity:1;-webkit-transform:rotate(-5deg);}
25%{opacity:1;-webkit-transform:rotate(5deg);}
30%{opacity:1;-webkit-transform:rotate(-5deg);}
35%{opacity:1;-webkit-transform:rotate(-5deg);}
40%{opacity:1;-webkit-transform:rotate(5deg);}
45%{opacity:1;-webkit-transform:rotate(-5deg);}
50%{opacity:1;-webkit-transform:rotate(5deg);}
55%{opacity:1;-webkit-transform:rotate(-5deg);}
60%{opacity:1;-webkit-transform:rotate(5deg);}
65%{opacity:1;-webkit-transform:rotate(-5deg);}
70%{opacity:1;-webkit-transform:rotate(5deg);}
80%{opacity:1;-webkit-transform:rotate(-5deg);}
85%{opacity:1;-webkit-transform:rotate(5deg);}
90%{opacity:1;-webkit-transform:rotate(-5deg);}
95%{opacity:1;-webkit-transform:rotate(5deg);}
35%{opacity:1;-webkit-transform:rotate(0deg);}
}
@-moz-keyframes WAKloading{
0%{opacity:1;-moz-transform:rotate(0deg);}
5%{opacity:1;-moz-transform:rotate(5deg);}
10%{opacity:1;-moz-transform:rotate(-5deg);}
15%{opacity:1;-moz-transform:rotate(5deg);}
20%{opacity:1;-moz-transform:rotate(-5deg);}
25%{opacity:1;-moz-transform:rotate(5deg);}
30%{opacity:1;-moz-transform:rotate(-5deg);}
35%{opacity:1;-moz-transform:rotate(-5deg);}
40%{opacity:1;-moz-transform:rotate(5deg);}
45%{opacity:1;-moz-transform:rotate(-5deg);}
50%{opacity:1;-moz-transform:rotate(5deg);}
55%{opacity:1;-moz-transform:rotate(-5deg);}
60%{opacity:1;-moz-transform:rotate(5deg);}
65%{opacity:1;-moz-transform:rotate(-5deg);}
70%{opacity:1;-moz-transform:rotate(5deg);}
80%{opacity:1;-moz-transform:rotate(-5deg);}
85%{opacity:1;-moz-transform:rotate(5deg);}
90%{opacity:1;-moz-transform:rotate(-5deg);}
95%{opacity:1;-moz-transform:rotate(5deg);}
35%{opacity:1;-moz-transform:rotate(0deg);}
}
;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;4. Sehingga hasilnya nati jadi seperti ini :
#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;}5. Save Template
C. Animation3 ( Sliding Effect ) :
Bisa anda lihat di sini : "http://dodgerhack.blogspot.com/"
Untuk Menggunakannya :
1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :
@-webkit-keyframes WAKloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes WAKloading{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
@-ms-keyframes WAKloading{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
@keyframes WAKloading{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}}
animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;4. Sehingga menjadi seperti ini :
#outer-wrapper {animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;}5. Save Template !
Cara Membuat CSS Border Triangle
referensi css ini saya baca dari hompimpaalaihumgambreng.
Div diatas terbentuk dengan css style dibawah ini:
Juga seperti ini tinggal kreasikan pemilihan warna dan transparent -nya.
oke cukup sampai sini saja
1. Pmbentukan Triangle(Segitiga)
bisa dilihat pada demo Div dibawah ini:
bisa dilihat pada demo Div dibawah ini:
Div diatas terbentuk dengan css style dibawah ini:
.coba {
width:0px;
height:0px;
border-width:150px;
border-style:solid;
border-color: red green blue yellow;
}
dengan kode html :
<div class="coba">
</div>
Untuk ukuran dari bordernya bisa
kamu atur pada kode css border-width, jika belum mengerti pembentukan
tampilan dari css triangle ini bisa di ilustrasikan dengan gambar
dibawah ini:
2. Menghilangkan sebagian atau semua Border color
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :
dengan menambahkan kode transparent pada border-color css stylenya untuk menghilangkan bagian yang diinginkan :
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :
.coba2 {
width:0px;
height:0px;
border-width:50px;
border-style:solid;
border-color: black black black transparent
}
Juga seperti ini tinggal kreasikan pemilihan warna dan transparent -nya.
.coba3 { width:0px; height:0px; border-width:50px; border-style:solid; border-color: #fc0 #fc0 transparent #fc0}
oke cukup sampai sini saja
Cara Memproteksi CSS Blogger
Kali Ini Saya akan shere Cara memprotelsi ccs blogger kamu Tau gak cara nya gampang ya? tapi ada yg lebih gampang ktanya, pake css rotate :) Langsung aja pembahasa nya
2. Ambil kode CSS mu, lalu encrypt di http://tools.irvankadhafi.com/jsencrypt/, Sebelum di encrypt jadikan css mu menjadi HTML seperti ini
4. Upload file yang disimpan itu ke GoogleCode
5. Copy link js nya, lalu jadikan linker, seperti ini
7. ^_^ Blog anda sudah terproteksi
Jika ada css yang tidak bekerja setelah anda proteksi, lebih baik css itu tidak usah ikut di encrypt :)
Miris ngelihat banyaknya blog-blog teman yang di Plagiatin sama
Plagiator. Karena itulah saya buat postingan ini, kalau di copas
sertakan sumber yah ^_^. Ikutin Step by Step :)
Sebelum memulai, kamu harus menyiapkan sebuah hostingan, Saya sarankan gunakan GoogleCode karena servernya cepat. Jangan gunakan hostingan gratisan, servernya suka naik turun soalnya :)
1. Compress terdahulu CSS blog anda di http://www.cssdrive.com/index.php/main/csscompressor
<style>Isi CSS blog mu</style>Jika masih gak ngerti ini aku kasih contohnya. Misalkan css blogmu
body{background:url(blablabla);font-family:verdana}Dijadikan HTML, maka :
#wrapper{border:2px solid #000;color:#fff;border-radius:8px}
<style>body{background:url(blablabla);font-family:verdana}#wrapper{border:2px solid #000;color:#fff;border-radius:8px}</style>3. Setelah di encrypt, copy hasil encrypt itu ke notepad, dan simpan dengan format .js misalnya cssku.js (Bisa juga tanpa format)
4. Upload file yang disimpan itu ke GoogleCode
5. Copy link js nya, lalu jadikan linker, seperti ini
<script src='link-js-kamu' type='text/javascript'>6. Setelah itu taruhlah linker tersebut diatas html </head>
7. ^_^ Blog anda sudah terproteksi
Jika ada css yang tidak bekerja setelah anda proteksi, lebih baik css itu tidak usah ikut di encrypt :)
Cara Memasukkan Lagu Di Blog [ New ]
Hallo Sobat Derfz Yozzer
Baik ,Apakabar Pastinya baik lah kalau gak baik pasti gamain internet
Di blog ini pernah post , cuman katanya banyak yg ga bisa , karna susah cari embed nya ( Kata temen ._. )
Ya udah kali ini aku share aja caranya + gambar ._. , sebenernya sih udah banyak di google kali ya wkwkw
Alat-Alat Yang DiPerlukan :
- Convert Mp3 To Swf ( Kalo masih Trial , Crack nya cari di Google ya :3 )
- Mp3 ( Pastilah ._. )
- Account Fileden
Step by RAZEE48 :
1.Download dan Install Convert Mp3 To Swf Nya
2.Buka Convert Mp3 To Swf Nya
3.Click Add File > Cari mp3 yang mau di masukin ke blog ( Contoh , Aku pake lagu Muse - Unintended )
![Cara Memasukkan Lagu Di Blog [ New ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjkChmAZrKvpHSBCQUytSavFuJRY8_MGnyteyDKOKIcjF0TzICNuT7voGW7JHq2ECMSmM7CGofMNTws6a8pH2pac8hzVTTQbSQO7KsHb5lTBgffcs9cL140KO7FomJKAAHollL3_A0litnH/s1600/Mp3+1.png)
4.Untuk atur tampilan lagu nya ntar kalo udah di masukin , Click aja option , dan Edit lah sesukamu
Contoh Punyaku :
![Cara Memasukkan Lagu Di Blog [ New ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgwyNWASCEjZDRuQ3ByP9TF4x1xhlCSTn-jD-RAlhAd8WuKeqGEQgbfPfKEGKlytLBa7mh1pZ1DoK7NqluzlLWIhGY_1gEnjCFyaB4-x6yoIgLCYi4VWnuEKtLIAFsZszL_8flZEjRbrPjQ/s1600/Mp3+2.png)
5.Nah kalo udah di edit , Sekarang Click kanan di List Mp3 nya , Pilih Convert To Swf
6.Masuk Fileden , Langsung login dan pilih Upload
7.Click Choose File , Pilih Mp3 yang tadi udah di ubah jadi Swf , Lalu Click Upload Files
![Cara Memasukkan Lagu Di Blog [ New ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRRIsOD7JASpkaPHXgZtZKQNwpkDBe5SSwrAcnKKrNJgTgRNFAm5fmAGH85RXFx__2jqQJ8EcShUY1pPtjI9T-3kbpx7P37JK3RbxDcvcoJYDB6lFombiSfitP5KW36ZCE0xoCi606C-om/s1600/Mp3+3.png)
8.Tunggu Uploadnya , Kalo udah nanti keluar link Swf nya , Tinggal di copy URL Nya
![Cara Memasukkan Lagu Di Blog [ New ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhACxpIuP0FnHC8WmLf1z6Zf5h2WgYRLsDJaoOVtf_ghKHIb0Df7X6SG5plivAizzfRtUd8u4TDQlBO0zq-OcVOty8bhAtXQGXoQVXanXLSQRgboUMij0XUX0EFGB2QXeBMplerleF5bgOc/s1600/Mp3+4.png)
9.Kalo Udah Di Copy , Masuk Blog > Layout / Tata Letak > HTML/JavaScript
10.Masukin Code Lagu Nya
<center><embed align="center" autostart="TRUE" height="26" loop="TRUE" src="URL SWF KAMU" width="280"></embed></center>
Contoh nya yang udah tadi ku upload :
<center><embed align="center" autostart="TRUE" height="26" loop="TRUE" src="http://www.fileden.com/files/2012/12/7/3373929/Muse%20-%20Unintended.swf" width="280"></embed></center>
11.Save / Simpan
Catatan :
Ganti teks berwarna Merah dengan url swf kamu yang udah di upload
Sumber Artikel:http://zhaa-inc.blogspot.com/2013/04/cara-memasukkan-lagu-di-blog-new.html
Exchange
