Headlines
Join This Site
Creativity...
From Creative Boy...
Creative never dies!

Lagi Tren Gunakan #pathdaily, Kalian Sudah Coba?

Saat ini tengah menjadi tren pengguna path ramai-ramai menjajal #pathdaily. Fitur terbaru itu muncul di pembaharuan terbarunya, yaitu versi 5.3.0. Untuk fitur terbarunya ini, hanya bisa digunakan untuk Android.
Sementara untuk iOS dikabarkan akan menyusul. Informasi tersebut disampaikan pihak Pathmelalui akun Twitter resminya, yaitu @path.
"Sudahkah mencoba kejutan dengan menggunakan #pathdaily pada update terbaru? Berbagilah dengan kami! Versi iOS segera hadir, nantikanlah!," tulis akun @path.
Tapi, tunggu dulu, bagaimana cara dan tampilan postingan path jika kita menggunakan#pathdaily?

 Ternyata cara menggunakan #pathdaily sangat mudah, jika kalian menuliskan status sebelum diposting, cobalah menambahkan "#pathdaily". Misalnya, Semangat sore. Nah, setelah menuliskan 'Semangat sore' tambahkan #pathdaily. Maka akan muncul gambar latar belakang dari kalimat 'Semangat sore' secara otomatis setelah kalian mempostingnya.
Berikut contoh maraknya penggunaan fitur baru dari Path tersebut yang sudah saya coba sendiri:

Selamat mencoba fitur terbaru dari path tersebut, sekian artikel saya kali ini. Semoga bermanfaat, terima kasih sudah berkunjung dan sampai jumpa di artikel selanjutnya.
Diposting oleh Bima Wira Bhaskara
Senin, 20 Juni 2016di07.30 [1 komentar] Label:Path

Animasi Loading Blog Dengan CSS Keyframes

Animasi loading adalah suatu fitur dimana akan menampilkan efek loading ketika mengunjungi blog atau perpindahan halaman dengan gambar atau animasi.

 1. Animation 1 (Bounce and Rotate Effect)
Kalian bisa lihat demo nya di sini: http://skynet-fordeon.blogspot.com

Untuk menggunakannya, ikuti langkah-langkah di bawah ini:
1. Masuk ke Blogger
2. Masuk ke menu Template
3. Pilih menu Edit HTML, dan pilih Expand Template Widget
4. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini di atas kode tadi:
@-webkit-keyframes WBloading{
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 WBloading{
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 WBloading{
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 WBloading{
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 WBloading{
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;}
}

5. Cari kode #outer-wrapper kalian, lalu sisipkan kode di bawah ini ke dalamnya:
;-webkit-animation:WBloading 3s;-moz-animation:WBloading 3s;-ms-animation:WBloading 4s;animation:WBloading 3s;-o-animation:WBloading 3s

6. Sehingga nantinya jadi seperti ini:
#outer-wrapper {-webkit-animation:WBloading 3s;-moz-animation:WBloading 3s;-ms-animation:WBloading 4s;animation:WBloading 3s;-o-animation:WBloading 3s}

7. Setelah selesai, silakan simpan template kalian.

B. Animation 2 (Earthquake Effect)
Kalian bisa lihat demo nya di sini: http://simple-ware.blogspot.com

Untuk menggunakannya silakan ikuti langkah-langkah di bawah ini:
1. Masuk ke Blogger
2. Masuk ke menu Template
3. Pilih menu Edit HTML, dan pilih Expand Template Widget
4. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini di atas kode tadi:
@keyframes WBloading{
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 WBloading{
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 WBloading{
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 WBloading{
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);}
}

5. Cari kode #outer-wrapper kalian, lalu sisipkan kode di bawah ini ke dalamnya:
;-webkit-animation:WBloading 3s;-moz-animation:WBloading 3s;-ms-animation:WBloading 3s;animation:WBloading 3s;-o-animation:WBloading 3s;

6. Sehingga hasilnya nati jadi seperti ini :
#outer-wrapper {-webkit-animation:WBloading 3s;-moz-animation:WBloading 3s;-ms-animation:WBloading 3s;animation:WBloading 3s;-o-animation:WBloading 3s;}

7. Setelah selesai, silakan simpan template kalian.

C. Animation 3 (Sliding Effect)
Untuk demo nya bisa kalian lihat di sini: http://dodgerhack.blogspot.com

Untuk menggunakannya silakan ikuti langkah-langkah di bawah ini:
1. Masuk ke Blogger
2. Masuk ke menu Template
3. Pilih menu Edit HTML, dan pilih Expand Template Widget
4. Cari kode ]]></b:skin> lalu letakkan kode di bawah ini di atas kode tadi:
@-webkit-keyframes WBloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}
to{-webkit-transform:translate(0px,0px);opacity:1.1;}}
@-moz-keyframes WBloading{from{-moz-transform:translate(-1000px,0px);opacity:0}
to{-moz-transform:translate(0px,0px);opacity:1.1;}}
@-ms-keyframes WBloading{from{-ms-transform:translate(-1000px,0px);opacity:0}
to{-ms-transform:translate(0px,0px);opacity:1.1;}}
@keyframes WBloading{from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}}

5. Cari kode #outer-wrapper kalian, lalu sisipkan kode di bawah ini ke dalamnya:
animation:WBloading 2s;-webkit-animation:WBloading 2s;-o-animation:WBloading 2s-moz-animation:WBloading 2s;-ms-animation:WBloading 2s;animation:WBloading 2s;

6. Sehingga kode nya menjadi seperti ini:
#outer-wrapper {animation:WBloading 2s;-webkit-animation:WBloading 2s;-o-animation:WBloading 2s-moz-animation:WBloading 2s;-ms-animation:WBloading 2s;animation:WBloading 2s;}

 7. Setelah selesai, silakan simpan template kalian.

Sekian artikel saya kali ini mengenai cara memasang animasi loading blog dengan css keyframes, semoga bermanfaat. Terima kasih sudah berkunjung dan sampai jumpa di artikel saya selanjutnya.
Diposting oleh Bima Wira Bhaskara
Kamis, 16 Juni 2016di09.52 [0 komentar] Label:Blogger


Donate Please ^^

Category

Affiliates

Click The Banner To Copy Embed Code:
Banner 468x60
Banner 176x62
Blog Author
 Nama lengkap saya adalah Bima Wira Bhaskara, lahir di Pekanbaru pada tanggal 14 Desember 1999. Kalian bisa panggil saya dengan nama Bima. Hobby saya sama seperti laki-laki biasanya, yaitu bermain bola kaki. Ntah itu sepakbola, maupun futsal. Menulis di blog atau membuat website lainnya hanya sebagai hobby saya mengisi waktu dikala bosan dengan aktifitas yang saya lakukan sehari-hari, yaitu cuma iseng saja. (‾⌣‾"٥)-σ View more about me
Copyright © 2013 Soul Invasion Template: DickeyMaru v6 - Some Rights Is Reserved
Yahoo! Messenger