Tampilkan postingan dengan label TUTORIAL BLOGSPOT. Tampilkan semua postingan

Cara Membuat Animasi Loading Blog Dengan CSS

Selasa, 15 Januari 2013

Hai sahabat blogger semua, kemarin kemarin saya sudah share Cara Membuat Efek Loading Dengan CSS. Dan untuk kali ini saya akan share Cara Membuat Animasi Loading Blog Dengan CSS :) Ini tidak memberatkan blog karena ini menggunakan CSS animasi. Okeh langsung saja ikuti caranya.

1. Animasi 1 ( Efek Bounce dan Rotate )

Contohnya klik disini

Cara membuatnya :

Masuk ke Edit HTML
Jangan lupa centang Expand Template Widget
Lalu cari kode ]]></b:skin> dengan menggunakan CTRL+F
Setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

@-webkit-keyframes WAKloading{
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;}
}

Lalu cari kode #outer-wrapper dan masukkan kode dibawah ini kedalamnya

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s

Sehingga menjadi seperti ini

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s}

Kemudian disave.

2. Animasi 2 ( Efek Earthquake )

Contohnya klik disini

Cara membuatnya :

Masuk ke Edit HTML
Jangan lupa centang Expand Template Widget
Lalu cari kode ]]></b:skin> dengan menggunakan CTRL+F
Setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

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

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

Lalu cari kode #outer-wrapper dan masukkan kode dibawah ini kedalamnya

;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;

Sehingga hasilnya menjadi sepert ini

#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;}

Kemudian disave

3. Animasi 3 ( Efek Slidding )

Contohnya klik disini

Cara membuatnya :

Masuk ke Edit HTML
Jangan lupa centang Expand Template Widget
Lalu cari kode ]]></b:skin> dengan menggunakan CTRL+F
Setelah ketemu letakkan kode dibawah ini tepat diatas kode ]]></b:skin>

@-webkit-keyframes WAKloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}
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;}}

Lalu cari kode #outer-wrapper dan masukkan kode dibawah ini kedalamnya

animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;

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

Kemudian disave.

sumber

Cara Membuat Efek Loading Dengan Animasi

Selasa, 04 Desember 2012

0 Comments

Tag : TUTORIAL BLOGSPOT

Sudah lama saya tidak posting tentang tutorial blogspot ya hehee. Oke pada kesempatan kali ini saya akan share yaitu tentang "Cara Membuat Efek Loading Dengan Animasi". Cara kerjanya ini pada saat kita mengklik suatu halaman di blog, maka efek ini akan muncul selama loading. Penasaran ? Yoda silahkan coba ya..

Pertama masuk ke Edit HTML
Lalu cari kode ]]></b:skin>
Kemudian pastekan kode dibawah ini diatas kode ]]></b:skin>

/* Efek Loading Animasi */

#pageLoadaka {
position: fixed;top:0;left:0;background-color:6f0f60; z-index: 9999;text-align:center;
width:100%;height:100%;padding-top:22%;font-size:25px;color:#e20000;display:none;}
.loader {
background-color:rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-right:5px solid #f90;
border-left:5px solid #f90;
border-radius:60px;
box-shadow:0 0 35px #a9a9a9;-moz-box-shadow:0 0 35px #a9a9a9;-webkit-box-shadow:0 0 35px #a9a9a9;
width:100px;
height:100px;
margin:0 auto;
-moz-animation:berputar 1s infinite ease-in-out;
-webkit-animation:berputar 1s infinite linear;
}

.loader3 {
background:#eee url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg56ngZv0XIHCq2PGjOcz91eZ-jcHtMvRdF6NAzLc-K7Cqznci1iuU2q-lQ_cmWT8xMVpkeSgUIfBxSq1gHdmR5cVuQijxZBvbDw9GOSXQ1trtM3ROvG2kzQ4qay1TDz3JaQClydpkQ1Qgn/s1600/cyrle.png) no-repeat center;
background-repeat: no-repeat
border:2px solid #a9a9a9;
opacity:.9;
border-radius:45px;
box-shadow:0 0 35px #f90;-moz-box-shadow:0 0 35px #f90;-webkit-box-shadow:0 0 35px #f90;
width:70px;
height:70px;
margin:0 auto;
position:relative;
top:-181px;
}
.loader2 {
background-color: rgba(0,0,0,0);
border:5px solid #a9a9a9;
opacity:.9;
border-left:5px solid #f90;
border-right:5px solid #f90;
border-radius:50px;
box-shadow:0 0 40px #1b9111;-moz-box-shadow:0 0 40px #1b8111;-webkit-box-shadow:0 0 40px #1b8111;
width:80px;
height:80px;
margin:0 auto;
position:relative;
top:-100px;
animation:berputarkecil 1s infinite linear;
-moz-animation:berputarkecil 1s infinite linear;
-webkit-animation:berputarkecil 1s infinite linear;
}
@-moz-keyframes berputar {
0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 2px #f90;}
50% { -moz-transform:rotate(145deg); opacity:1; }
100% { -moz-transform:rotate(-320deg); opacity:0; }
}
@-moz-keyframes berputarkecil {
0% { -moz-transform:rotate(360deg); }
100% { -moz-transform:rotate(0deg); }
}
@-webkit-keyframes berputar {
0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 2px #f90; }
50% { -webkit-transform:rotate(145deg); opacity:1;}
100% { -webkit-transform:rotate(-320deg); opacity:0; }
}
@-webkit-keyframes berputarkecil{
0% { -webkit-transform:rotate(360deg); }
100% { -webkit-transform:rotate(0deg); }
}

Kemudian pastekan lagi kode dibawah ini tepat diatas kode </body>

<div id='pageLoadaka'>
<div class='loader'/>
<div class='loader2'/>
<div class='loader3'/>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function() {
    var siteURL = "http://" + top.location.host.toString();
    var $internalLinks = $("a[href^='"+siteURL+"'], a[href^='/'], a[href^='./'], a[href^='../'], a[href^='#']");
    $internalLinks.click(function() {
        $('#pageLoadaka').fadeIn(500).delay(2000).fadeOut(1200);
    });
    $('#pageLoadaka').click(function() {
        $(this).hide();
    });
});
//]]>
</script>

Cara Membuat Ayat Alkitab Harian Di Blog

Minggu, 02 September 2012

3 Comments

Tag : INFO, TUTORIAL BLOGSPOT

,selamat sore sahabat blogger semua ? sehat kan ? hehee. Kali ini saya akan share cara membuat ayat alkitab harian di blog. Ayatnya ini setiap 24 jam berganti ganti loh, saya juga memakainya. Scriptnya ini dari forumkristen.com. Penasaran ? Mau buat di blog kamu ? Ikuti cara caranya :)

Cara Membuat Gambar Postingan Kerucut dan Berputar Saat Disentuh Kursor

Minggu, 26 Agustus 2012

4 Comments

Tag : TUTORIAL BLOGSPOT

Ini ada cara gambar postingan berbentuk kerucut dan berputar saat disentuh kursor. Tapi ini bisa hanya di homepage saja. Kalau di dalam postingan tidak :D

Cara Membuat Animated Bubble Button Dengan CSS3

Kamis, 23 Agustus 2012

4 Comments

Tag : TIPS AND TRICK, TUTORIAL BLOGSPOT

Selamat pagi sahabat blogger semua :) Pada kesempatan kali ini saya akan share "Cara Membuat Animated Bubble Button Dengan CSS3". Dan preview-nya dibawah ini. Caranya cukup gampang kok :)

Cara Menghapus Widget Dari Edit HTML

Senin, 20 Agustus 2012

0 Comments

Tag : TIPS AND TRICK, TUTORIAL BLOGSPOT

Kita pernah mengalami kesulitan dalam menghapus widget bukan ? Yaa saya juga sering mengalami hal yang sama hehee. Apalagi kalau tidak bisa menghapus widget nya dari HTML/Javascript. Jadi cara kali ini saya akan share cara menghapus widget dari Edit HTML kalau dari HTML/Javascript tidak bisa.

Cara Membuat Read More Otomatis

Minggu, 19 Agustus 2012

0 Comments

Tag : TUTORIAL BLOGSPOT

Sudah lama saya tidak posting nih hehee. Okelah sekarang saya akan share Cara Membuat Read More Otomatis. Memang sih cara ini sudah banyak di share, tapi saya akan share kembali biar tidak padam :D

Cara Membuat Featured Slide Show

Sabtu, 11 Agustus 2012

4 Comments

Tag : TUTORIAL BLOGSPOT

Di postingan kali ini ™ David As'Chri ChieLietonga 06 ™ akan share Cara Membuat Featured Slide Show. Slide show ini sangat menarik dengan tampilan thumbnail yang ada disebelah kanannya. Featured Slide Show bisa digunakan untuk menampilkan gambar dan link dari web / blog kita.

Cara Membuat Kotak Admin Dibawah Postingan

Selasa, 31 Juli 2012

2 Comments

Tag : TUTORIAL BLOGSPOT

Okeh kali ini saya akan share Cara Membuat Kotak Admin Dibawah Postingan. Cara ini saya dapat dari blog tetangga saat saya blogwalking hehee. Tidak ada salahnyakan untuk men-sharenya kembali :)

Cara Membuat Label Breadcrumb Cepat Terindeks Google

Sabtu, 21 Juli 2012

0 Comments

Tag : TIPS AND TRICK, TUTORIAL BLOGSPOT

,okeh kali ini saya akan share Cara Membuat Label Breadcrumb Cepat Terindeks Google. Memang cara ini sudah banyak di share di blog tetangga, tapi tidak salahkan untuk men-sharenya kembali hehee..

Cara Membuat Background Pada Archive Blog

Rabu, 18 Juli 2012

0 Comments

Tag : TUTORIAL BLOGSPOT

,hallo , sudah seminggu lebih saya tidak posting posting nih, hahaa. Biasanya satu hari bisa 5 kali aku posting posting ckk. Kali ini saya akan share Cara Membuat Background Pada Archive Blog. Sebenarnya sih cara ini sudah banyak di share, tapi tidak apa apakan cuma untuk men-share kembali :)

Cara Membuat Teks Roller Coaster

Kamis, 05 Juli 2012

2 Comments

Tag : TUTORIAL BLOGSPOT

Kali ini saya akan bagikan cara membuat Teks Roller Coaster. Contohnya begini :

Ini adalah Teks Roller Coaster

Bagaimana ? Keren bukan ? Hehee, Pengen buatnya ? =D

Membuat Daftar Menu Dengan Style Rak Buku

0 Comments

Tag : CSS, TUTORIAL BLOGSPOT

Dengan menggunakan CSS3, metode ini dapat menghasilkan sebuah daftar menu dengan style Rak Buku.

Pada prinsipnya, saat hover diatas Rak buku, buku yang dipilih akan melayang diatas Rak digantikan sebuah buku dengan sampul tertutup. Untuk membuka dan menampilkan isi buku, anda dapat hover kembali pada sampul yang tertutup tersebut.

Cara Membuat Text Area Keren

Selasa, 03 Juli 2012

2 Comments

Tag : TUTORIAL BLOGSPOT

Untuk kesempatan kali ini saya akan share cara pembuatan text area ( teks area ) untuk blogspot anda. Ya cara ini sudah umum sih hehee, tapi saya cuma share kembali saja =) Yang suka main blog pasti tau itu apa itu text area, ya kan ? hahaa.

Background Changer Dropdown

Tag : TUTORIAL BLOGSPOT

Background Changer Dropdown ini adalah mengubah background blog kamu dengan dropdown. Cara ini sangat keren digunakan. Contohnya lihat gambar =)

Cara Menambah Gambar Di Post Footer

Tag : TUTORIAL BLOGSPOT

Maksudnya dibawah postingan kita itu ada gambar. Seperti punya saya ini hehee. Caranya cukup gampang kok. Penasaran ? Silahkan dicoba dan ikuti langkah langkahnya ^^,/

Cara Membuat Tooltip Keren

Senin, 02 Juli 2012

Tag : TUTORIAL BLOGSPOT

Saya sedikit bingung menjelasinya seperti apa tooltip itu. Supaya lebih jelasnya lihat saja gambarnya.

Pada saat kita mengarahkan kursor kita ke link, maka dia akan mengeluarkan kata kata. Dan pada saat kursor menyentuh gambar, maka dia akan menunjukkan gambar itu (?) hahaaa kalau yang ini bingung aku menjelasinya hehee. Langsung saja ikuti cara caranya =)

Cara Memindahkan Semua Postingan Ke Blog Baru

Sabtu, 30 Juni 2012

0 Comments

Tag : TIPS AND TRICK, TUTORIAL BLOGSPOT

Cara memindahkan semua postinga ke blog baru | Jika anda bermasalah dengan blog anda yang pertama dan ingin memindahkan semua postingannya ke blog baru, silahkan anda ikuti tutorial ini.

Cara Membuat Background Dengan CSS3 Linier Gradien

8 Comments

Tag : TUTORIAL BLOGSPOT

CSS3 Linear Gradients ini pasti keren bagi anda pecinta desain warna dengan background yang unik tentunya, dengan css3 linear gradient ini background blog akan lebih cantik dan keren. Screen shotnya sebagai berikut :

CTRL + Click Untuk Lihat Gambarnya

Cara Membuat Menu Berbentuk Lingkaran

0 Comments

Tag : TUTORIAL BLOGSPOT

,Okeh dikesempatan kali ini saya akan share cara membuat menu berbenti Circle atau Lingkaran. Caranya cukup mudah kok, tinggal menambahkan Gadget HTML / Javascript saja. Bagi yang pande main blog pasti tau dimana diletakkan menu ini hehee.