Showing posts with label loading. Show all posts

Monday, December 19, 2016

Cara Membuat Efek Loading Dengan Animasi Keyframes

Keyframe | Pada kesempatan kali ini saya akan membagikan tutorial cara membuat animasi loading pada blog. Sebenarnya sudah banyak para Blogger yang menggunakan Animasi Loading Blog akan tetapi banyak yang berbeda. Rata-rata para Blogger menerapkannya dengan JavaScript, Dan saya akan membuatnya berbeda yaitu menggunakan CSS murni tanpa JavaScript sedikitpun.

Animation Bounce and Rotate

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes BounceRate{
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;transform:rotate(-360deg);}
100%{transform:translate(0px,0px) scale(1);opacity:1;}
}

Langkah 3 : Sisipkan kode animation:BounceRate 3s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : BounceRate 3s; }

Langkah 4 : Save Template

Animation Earthquake Effect

Langkah 1 : Cari kode ]]></b:skin
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes Earthquake{
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(5deg);}
20%{opacity:1;transform:rotate(-5deg);}
25%{opacity:1;transform:rotate(5deg);}
30%{opacity:1;transform:rotate(-5deg);}
35%{opacity:1;transform:rotate(-5deg);}
40%{opacity:1;transform:rotate(5deg);}
45%{opacity:1;transform:rotate(-5deg);}
50%{opacity:1;transform:rotate(5deg);}
55%{opacity:1;transform:rotate(-5deg);}
60%{opacity:1;transform:rotate(5deg);}
65%{opacity:1;transform:rotate(-5deg);}
70%{opacity:1;transform:rotate(5deg);}
80%{opacity:1;transform:rotate(-5deg);}
85%{opacity:1;transform:rotate(5deg);}
90%{opacity:1;transform:rotate(-5deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}

Langkah 3 : Sisipkan kode animation : Earthquake 3s ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : Earthquake 3s; }

Langkah 4 : Save Template

Animation Sliding Effect

Langkah 1 : Cari kode ]]></b:skin>
Langkah 2 : Simpan kode diatas ]]></b:skin>

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

Langkah 3 : Sisipkan kode animation : Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper

#main-wrapper { animation : Sliding 2s; }

Langkah 4 : Save Template

Source: the-anarchyta.blogspot.com

Go to link Download

Cara Membuat Blog Tampil Cepat Fast Loading

Tips optimisasi gambar, foto, atau image di posting agar blog menjadi ringan dan tampil cepat.

Cara Membuat Blog Anda Tampil Cepat (Fast Loading)

BUATLAH Blog Anda Tampil Cepat (Fast Loading)! Demikian dikatakan Google dalam salah satu panduan blogging: Make your blog load faster!

Itulah sebabnya template blog fast loading, ringan, simple, menjadi favorit dan populer. Para blogger juga disarankan tidak terlalu banyak memasang "aksesoris" (widget) di blog. Pemasangan flash, slider, slideshow, jam, statistik kunjungan, dan sejenisnya TIDAK DISARANKAN karena hanya akan membuat berat atau memperlambat loading blog.

Salah satu faktor yang memperlambat tampilan blog adalah gambar, foto, atau image berukuran besar. Gambar yang tidak upload sendiri, seperti menggunakan "From URL", juga membuat loading makin lambat. Setidaknya menurut GT Metrix.

Berikut ini salah satu cara untuk menjadikan blog tampil cepat (fast loading), yaitu soal Optimisasi Gambar. Ini kata Google:

Images and Media
The more images, videos and other multi-media you have on your blog the longer it will take to load. However, images and other multimedia are important to attracting users to your blog, so it is important to optimize the load speed of your images and media. Here are a few tips to increase the load speed of your media:

Decrease the size of your images or use thumbnails that link to the full-size image.
If you use third party images, consider uploading them to Picasa Web Albums via the Blogger post editor.
If you have a large number of images to display, you can upload all your images (from a vacation or event) to a Picasa Web Album and link to the album in your post or sidebar.

Makin banyak gambar, video, dan multimedia lain di blog Anda akan semakin lama pula loading blog Anda. Namun, di sisi lain, gambar dan multimedia penting untuk menarik perhatian pengunjung.

Karenanya, sangat penting untuk mengoptimisasi gambar dan media. Berikut ini beberapa tips untuk meningkatkan kecepatan loading gambar di blog:

Kecilkan ukuran gambar atau gunakan thumbnail yang nge-link ke gambar ukuran sebenarnya.
Jika Anda menggunakan image dari pihak ketiga, pertimbangkan untuk mengunggahnya lebih dulu ke Picasa Web Album via Blogger post editor.
Jika Anda ingin menampilkan gambar yang banyak, Anda bisa upload semua gambarnya ke Picasa Web Album dan buatlah tautan ke album di posting atau sidebar.

CARA MENGECILKAN UKURAN GAMBAR

Kita bisa menggunakan Online Image Optimizer sebelum mengupload gambar ke posting blog kita. Pilih yang paling pas dari segi tampilan dan ukuran, sebaiknya di bawah 100 kb. Good Luck!

Baca Juga:

SEO Gambar untuk Blog
Ukuran Gambar yang Benar untuk Posting

Go to link Download

Cara Membuat Animasi Loading Pada Blog

Cara Membuat Animasi Loading Blog Lebih Menarik - Tips Blog Banyak hal menarik dan efek/plugin yang dapat dipakai atau diberikan oleh blogger...

Nah pagi ini saya mau mencoba share bagaimana caranya membuat efek loading pada blog, agar terlihat lebih menarik, biasanya ini sangat disukai bagi yang suka ngoprek dan yang ingin blognya terlihat cantik dan keren.

Ok tanpa basa-basi simak langkahnya berikut ini :

Sebaiknya anda membaca dengan baik langkah yang telah diberikan dan jangan lupa backup template anda.

ANIMASI LOADING PART 1, BERWARNA MERAH

1. Login ke akun blogger anda

2. Klik Template » Edit HTML » Lanjutkan » Klik Expand Template Widget

3. Tambahkan kode CSS berikut ini diatas ]]></b:skin>

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}
.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}
.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}
@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}
@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}
@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}
@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian tambahkan kode jquery ini diatas kode </head>, jika dalam template kalian sudah terpasang jquery maka tidak perlu lagi tambahan jquery tersebut, aga proses efek loading lancar

5. Dan langkah yang terakhir, pasang kode berikut diatas tag </body>

<div id=loadhalaman>
<div class=loadball></div>
<div class=loadball-2></div>
</div>
<script type=text/javascript>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^="+siteURL+"], a[href^=/], a[href^=./], a[href^=../]");
$internalLinks.click(function() {
$(#loadhalaman).fadeIn(1500).delay(6000).fadeOut(1000);
});

// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=_blank
$(#loadhalaman).click(function() {
$(this).hide();
});
});
</script>

ANIMASI LOADING PART 2, BERWARNA BIRU

HTML

CSS

.ball {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);
opacity:.9;
border-top:5px solid rgba(0,0,0,0);
border-left:5px solid rgba(0,0,0,0);
border-radius:50px;
box-shadow: 0 0 35px #2187e7;
width:50px;
height:50px;
margin:0 auto;
-moz-animation:spin .5s infinite linear;
-webkit-animation:spin .5s infinite linear;
}
.ball1 {
background-color: rgba(0,0,0,0);
border:5px solid rgba(0,183,229,0.9);

Go to link Download

CARA MEMBUAT RECENT POST PER LABEL FAST LOADING

Cara membuat recent post per label fast loading - Selamat malam sobat Darmanto semua,apa kabar dan semoga sedang dalam keadaan sehat dan tetap semangat dalam ber blogging ria sampai menghasilkan.Jangan putus asa kalau blog yang sudah dibuat masih sepi pengunjung atau masih belum ada hasil seperti yang diharapkan.

Malam ini saya akan berbagi tutorial blog tentang Cara membuat recent post per label fast loading.Fast loading saya tambahkan buat judul karena dalam membuat recent post per label ada juga yang mengunakan dengan RSS FEED,namun dalam pengamatan saya recent post model itu agak berat loadingnya,dan pada tutorial lain waktu insyaAllah akan saya posting juga panduannya.

Pada tutorial yang dulu pernah saya publish membuat recent post yang menarik dengan tumbnail,namun recent post tersebut untuk keseluruhan artikel,jadi bagi yang ingin membuat recent post hanya per label dan loadingnya juga cepat,berikut ini tutorialnya.

1.Login ke blogger
2.Pilih tata letak-html
3.Coy dan paste kode di bawah ini:

<script src="http://bloggergubug.googlecode.com/files/recentpost.js" type="text/javascript"></script><script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script src="http://www.ismayayuli.com/feeds/posts/default/-/Artikel%20Kesehatan?orderby=published&alt=json-in-script&callback=showrecentposts" type="text/javascript"></script>

4.Ganti tulisan yang saya beri warna merah dengan alamat blog anda,ganti juga tulisan yang berwarna biru dengan label post yang ingin ditampilkan.
5.Save dan lihat hasilnya.

Silahkan di coba dan bila ada kesulitan dalam mempraktekkan tutorial blog Cara Membuat Recent Post Per Label Fast Loading,silahakn ajukan saja pertanyaannya pada kolom komen dibawah.

Go to link Download

Cara Membuat Loading Blog Keren Dengan Keyframes

Buka Blogger.com,Login Dengan Akun Anda
Buka rancangan,Pilih Edit Html,Cari Kode ]]></b:skin> letakkan kode di bawah ini diatas kode ]]></b:skin>

#wrapper, #sidebar {
-webkit-animation: css3Animasi 4s ease-in;
-moz-animation: css3Animasi 4s ease-in;
-ms-animation: css3Animasi 4s ease-in;
-o-animation: css3Animasi 4s ease-in;
animation: css3Animasi 4s ease-in
}
@-webkit-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-moz-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-ms-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@-o-keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}
@keyframes css3Animasi {
0% {
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
100% {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(10);
}
}

NB :Kode yang berwarna merah bisa anda ganti berdasarkan kode dari setiap elemen template mu

Sumber

Go to link Download

Cara Membuat Widget Loading Di Blogger

Oke Langsung Saja :
1.Buka Blogger Dan Login
2.Tata Letak
3.Add Widget
4.Html/Javascript
5.Masukkan Kode Berikut Ke Kolom Yang Ada

<script type="text/javascript">

</script>
<script type="text/javascript">

</script>

Go to link Download

Cara Membuat Animasi loading di Blog

Selamat siang sahabat blogger semua !!! Kali ini, fahrurrozi18 akan memposting tentang Cara Membuat Animasi loading di Blog. Pembuatan animasi loading page di Blogspot ini menggunakan efek Jquery. Nah, untuk Cara pemasangan loading page di Blog sobat, silahkan ikuti langkah-langkah berikut ini :

1. Login ke Blogger.com

2. Di halaman Dasbor, klik Template.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> dengan menekan Ctrl + F ( Untuk mempermudah pencarian ) pada kolom Edit HTML kemudian letakan kode berikut ini di atas ]]></b:skin>.

/* Loading Page */.QOverlay {background-color: #000000; /* background color loading */z-index: 9999;}.QLoader {background-color: #CCCCCC; /* color bar loading */height: 10px;}.QAmt {color:#FF530D; /*loading Color number*/font-size:50px;font-weight:bold;line-height:50px;height:50px;width:100px;margin:-60px 0 0 -50px;}

5. Setelah itu cari kode </head> dan letakkan kode berikut diatasnya :

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js type=text/javascript/><script src=http://script-seo.googlecode.com/files/loadpage.js type=text/javascript/>

Catatan : Jika script berwarna biru di atas telah ada pada template Blog sobat sebelumnya, tidak perlu menambahkan script tersebut.

6. Kemudan cari kode </body> dan letakkan kode berikut ini diatasnya :

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js type=text/javascript/><script src=http://script-seo.googlecode.com/files/loadpage.js type=text/javascript/>

5. Klik Simpan Template. Jika sudah benar melakukan semua tahap di atas, sekarang sobat lihat hasilnya. :)

Sekian dulu ya tips dariku kali ini, semoga bermanfaat.

Bye... bye... :)

Go to link Download

Cara Membuat Loading Blog Menjadi Lebih Cepat

Loading Blog Adalah Salah Satu Faktor Pengunjung Datang, Loading Blog Lelet Tidak disukai Oleh Pengunjung. Saat Pengunjung Membuka Blog Anda Tetapi Blog Anda Lelet Maka Pengunjung Akan Memilih Untuk Pergi dari Blog Anda.

Mencari Cara Untuk Membuat Loading Blog Cepat Itu Banyak Sekali Tetapi Kami Juga Akan Membagikan disini, Loading Blog Cepat Disukai Oleh Banyak Pengunjung Karena Pengunjung Tidak Perlu Menunggu Lama Untuk Membuat Sebuah Website yang Berisi Artikel yang Mereka Cari.

Kegunaan Blog Loading Cepat Ada Banyak Salah Satunya, Mendatangkan Pengunjung dari Promosi Pengunjung Contohnya :
Salah Satu Pengunjung Mengunjungi Blog Anda Lalu di Sosial Media dia Bertemu Orang yang Mencari Posting Artikel Kesehatan, Kebetulan Pengunjung tadi Menemukan Artikel Kesehatan dan Blog Anda yang Cepat dan ringan berisi kesehatan. Otomatis Pengunjung tadi Akan Membagikan Blog Anda ke Seorang yang Mencari Artikel Kesehatan.

Tertarik Mencoba Sebuah Cara Membuat Loading Blog Menjadi Lebih Cepat? Mari Baca Berikut Ini

1.Jangan Menggunakan Sebuah Gambar Untuk Background Blog Anda
Memberi Sebuah Gambar untuk Background Blog Anda Akan Tidak Menyamankan Pengunjung Blog Untuk Melihat Blog Anda Lalu Pengunjung Itu Akan Pergi dan Memilih Blog yang Enak dipandang Serta Memberi Gambar Untuk Background Blog Anda Dapat Memperberat Loading Blog Anda.

2.Mengupload Gambar Sendiri dan Ukuran Gambar
Anda Boleh Mengupload Gambar dari Google, Tapi Apabila Bisa Kalian Edit Terlebih dahulu Gambar yang Anda Download dari google Menggunakan Photoshop Agar Tidak di Copy Paste Oleh Orang Lain. lalu Ukurang Gambar, Jangan Memberi Gambar yang Ukurannya Terlalu Besar, dapat Memberatkan Loading Blog Anda.

3.Iklan yang Secukupnya
Suatu Blog yang Mempunyai Iklan Berlebihan dan Tidak Tertata Rapi Akan Mempengaruhi Kecepatan Loading Blog Itu, dan Terlebih Parahnya, Tidak Dapat Mengenakan Pandangan Pengunjung.

4.Mendesain Template Blog yang Tidak Terlalu Berat
Template yang Berat Adalah Template yang Tidak disukai Oleh Blogger dan itu Juga Mempengaruhi Sebuah Loading Blog Anda.

5.Menghapus Widget Blog yang Tidak Perlu
Widget juga Dapat Memengaruhi Sebuah Loading Blog Anda, Contoh Widget yang Tidak Perlu Adalah Jam, Meteor Jatuh, Efek Salju Turun, Efek Hujan dan lain lain.

6.Menggunakan Script Lazyload
Menggunakan Script Ini Akan Mempercepat Loading Blog Anda daripada yang Sebelumnya Berikut Ini Cara Penggunaan Script Serta Scriptnya.
Letakan Kode Berikut Ini diatas Kode </head>

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js type=text/javascript/>
<script src=http://googledrive.com/host/0B2fPWv1fLnEnSjZSNUdIaxhscEk type=text/javascript/>
<script type=text/javascript>
$(function() {
$('img').lazyload( {
placeholder : "http://2.bp.blogspot.com/-sJ-tZahntLI/T9coeqmdqMI/AAAAAAAADUQ/ztxIT1Fht4g/s1600/grey.png",
effect : "fadeIn",
threshold : 100
});
});
</script>

Lalu Simpan Template.

Demikian Tutorial dari Saya Semoga Bermanfaat Terima Kasih...

Go to link Download

Cara Membuat Indikator Loading Page Halaman

Cara Membuat Indikator Loading Page / Halaman

Posted by Indra × 05.44

Ada beberapa blog yang pernah saya kunjungi menggunakan indikator loading halaman. Biasanya sebuah gambar akan muncul ketika kita sedang membuka halaman sebuah web. Gambar tersebut menunjukan halaman tersebut sedang dalam proses loading. Blog Trik dan Tips kali ini akan memberikan tutorial bagaimana membuat loading page atau indikator loading halaman yang sederhana pada blog anda. Untuk membuatnya tidaklah sulit, ikuti saja langkahnya dibawah ini:

1. Masuk ke Rancangan --> Edit HTML
2. Back up (upload) template anda terlebih dahulu untuk mencegah kesalahan editing
3. Cari kode <body>
4. Hapus kode tersebut lalu ganti dengan kode dibawah ini:

<body onLoad=init()>
<span id=loading style=position:absolute; text-align: center; top:10px; right: 10px;><img border=0 src=http://1.bp.blogspot.com/-l6kpGSbwlAk/T4QyAAmu78I/AAAAAAAAC8M/3JL_qrskbEs/s400/kotak.gif/></span>
<script>
var ld=(document.all);

var ns4=document.layers;
var ns6=document.getElementById&&!document.all;
var ie4=document.all;

if (ns4) ld=document.loading;
else if (ns6)
ld=document.getElementById("loading").style;
else if (ie4)
ld=document.all.loading.style;

function init() {
if(ns4){ld.visibility="hidden";}
else if (ns6||ie4) ld.display="none";
}
</script>

5. Ganti kode berwarna biru dengan url gambar loading page yang anda suka
6. Simpan template anda lalu lihat hasilnya

Go to link Download

Cara Membuat Template Blog Fast Loading

Cara Membuat Template Blog Fast Loading - halo sobat kali ini saya akan mengasih tau beberapa tips dan trick rahasia agar template atau blogspot anda fast loading atau menjadi lebih ringan dan super cepat al-hasil blog anda akan menjadi visitor seo friendly .

Berikut cara Membuat Template Blogger anda Fast Loading :

1. Sobat Harus Kurangi penggunaan Javascript dari source luar
2. Kurangi penggunaan CSS dari source luar
3. Kurangi penggunaan Gambar (Compress)
4. Prioritaskan konten yang terlihat

Kalau sobat cukup bingun dengan cara yang di atas . pakai cara yang ini aja gan :

1. Langkah Pertama Matikan CSS Reset

Ubah <b:skin><![CDATA[ sampai ]]></b:skin> menjadi <style type="text/css">
</body>

Go to link Download

Cara Membuat Animasi Loading Blog Lebih Menarik

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEik_P5ELdftw9DiFueS5mwP-Z0T0AA6kz5Z8SJhQQJCatvFEzLQevpqJme6fyZOyrtRlLgxAOHv5Vuks8KmlvDLEN88sl23wQ5xp0JPx_XqFqlYDDaTNp66F1ecJXJURU-a3xNTaNnAaK8/s320/circle.jpg

Langsung ke TKP aja ya gan, lagi males merangkai kata,,,

Login ke akun blogger anda
Klik Template » edit HTML
Tambahkan kode CSS berikut di atas kode ]]></b:skin>

Animasi Loading Part, 1 Berwarna Merah

#loadhalaman {position:fixed;opacity:0.93;top:0;left:0;background-color:#000;z-index:9999;text-align:center;width:100%;height:100%;padding-top:20%;color:#000;display:none;}.loadball {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-right:5px solid transparent;border-left:5px solid transparent;border-radius:50px;box-shadow: 0 0 35px rgb(255 ,0 , 0);width:50px;height:50px;margin:0 auto;-moz-animation:spinPulse 1s infinite ease-in-out;-webkit-animation:spinPulse 1s infinite linear;}.loadball-2 {background-color: transparent;border:5px solid rgb(240 ,0 , 0);border-left:5px solid transparent;border-right:5px solid transparent;border-radius:50px;box-shadow: 0 0 15px rgb(255 ,0 , 0);width:30px;height:30px;margin:0 auto;position:relative;top:-50px;-moz-animation:spinoffPulse 1s infinite linear;-webkit-animation:spinoffPulse 1s infinite linear;}@-moz-keyframes spinPulse {0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)}50% { -moz-transform:rotate(145deg); opacity:1; }100% { -moz-transform:rotate(-320deg); opacity:0; }}@-moz-keyframes spinoffPulse {0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg); }}@-webkit-keyframes spinPulse {0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px rgb(255, 0, 0)} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0; }}@-webkit-keyframes spinoffPulse {0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg); }}

4. Kemudian tambahkan kode jquerty ini diatas kode </head>, jika dalam template kalian sudah terpasang jquerty maka tidak perlu lagi tambahab jquerty tersebut, agar proses efek loading lancar.

<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js type=text/javascript></script>

5. Dan langkah terakhir pasang kode di bawah ini tepat di atas kode </body>

<div id=loadhalaman>
<div class=loadball></div>
<div class=loadball-2></div>
</div>
<script type=text/javascript>
$(function() {
var siteURL = "http://" + top.location.host.toString();
var $internalLinks = $("a[href^="+siteURL+"], a[href^=/], a[href^=./], a[href^=../]");
$internalLinks.click(function() {
$(#loadhalaman).fadeIn(1500).delay(6000).fadeOut(1000);
});
// Hilangkan overlay saat diklik untuk mengatasi gangguan, terutama jika link internal diset dengan target=_blank
$(#loadhalaman).click(function() {
$(this).hide();
});
});
</script>

Kemudian Save Template anda

Go to link Download

Post Game

Monday, December 19, 2016

Cara Membuat Efek Loading Dengan Animasi Keyframes

Cara Membuat Efek Loading Dengan Animasi Keyframes

Animation Bounce and Rotate

Animation Earthquake Effect

Animation Sliding Effect

Friday, December 16, 2016

Cara Membuat Blog Tampil Cepat Fast Loading

Cara Membuat Blog Tampil Cepat Fast Loading

Thursday, December 1, 2016

Cara Membuat Animasi Loading Pada Blog

Cara Membuat Animasi Loading Pada Blog

ANIMASI LOADING PART 1, BERWARNA MERAH

ANIMASI LOADING PART 2, BERWARNA BIRU

Thursday, November 10, 2016

CARA MEMBUAT RECENT POST PER LABEL FAST LOADING

CARA MEMBUAT RECENT POST PER LABEL FAST LOADING

Wednesday, November 2, 2016

Cara Membuat Loading Blog Keren Dengan Keyframes

Cara Membuat Loading Blog Keren Dengan Keyframes

Saturday, October 29, 2016

Cara Membuat Widget Loading Di Blogger

Cara Membuat Widget Loading Di Blogger

Friday, October 28, 2016

Cara Membuat Animasi loading di Blog

Cara Membuat Animasi loading di Blog

Thursday, October 27, 2016

Cara Membuat Loading Blog Menjadi Lebih Cepat

Cara Membuat Loading Blog Menjadi Lebih Cepat

Sunday, October 23, 2016

Cara Membuat Indikator Loading Page Halaman

Cara Membuat Indikator Loading Page Halaman

Cara Membuat Indikator Loading Page / Halaman

Saturday, October 22, 2016

Cara Membuat Template Blog Fast Loading

Cara Membuat Template Blog Fast Loading

Friday, October 7, 2016

Cara Membuat Animasi Loading Blog Lebih Menarik

Cara Membuat Animasi Loading Blog Lebih Menarik