SSH Gratis, Inject Gratis, Trik Internet Gratis: Blog tutorial

Blog tutorial

Showing posts with label Blog tutorial. Show all posts

This summary is not available. Please click here to view the post.

Sebagai konten blog, gambar merupakan salah satu elemen penting. Bahkan bagi sebagian blog (photo blog, infographic blog, dan image-based blog lainnya) gambar merupakan konten utama. Di dunia web 2.0 ini, gambar telah menjadi objek visual yang menjadi santapan sehari-hari. Lihat saja web-web social curation seperti Pinterest dan Instagram yang kini terus menjadi favorit mayoritas user Internet.

Di sisi lain, Google Image Search (mesin pencari gambar Google) adalah sumber terbesar dan utama para pengguna internet untuk mencari gambar sesuai keinginan. Oleh karena itu, sebagai sumber traffic, optimalisasi search engine (SEO) melalui gambar merupakan bagian yang tidak kalah penting. Penggalian traffic dari google image search tidak bisa dipandang sebelah mata, karena memberikan jumlah yang cukup signifikan. Dalam Google search sendiri, optimalisasi gambar juga dapat memberikan value, terutama pada pengayaan keyword di dalam konten. (dalam atribut alt dan nama file).

Menurut hemat saya, ini sangat penting apabila konten anda mengandung gambar, yah.. meskipun cuma satu. Dan tentunya, ini menjadi hal yang AMAT SANGAT MAHA PENTING apabila konten blog anda berbasis gambar, karena optimalisasinya sedikit banyak berbeda dengan SEO konten tulisan/artikel seperti kebanyakan blog. Terlebih lagi, layout baru Google Image search memungkinkan user mendapatkan berbagai informasi mengenai gambar tersebut, termasuk link sumber halaman pemuat gambar.

Di blog lain, saya sudah berbicara mengenai relevansi atribut alt pada gambar bagi pengunjung dan search engine. Titik beratnya adalah pada bagaimana atribut alt dapat memberikan value, bantuan, dan deskripsi bagi keduanya. Dalam kesempatan ini, saya akan lebih mengkhususkan pada optimalisasi gambar dalam konteks SEO dan Blogger. Sedikit banyak akan ditemukan tips yang sama, namun akan lebih saya titikberatkan untuk pengguna Blogger.

Nah, untuk mengambil manfaat dari gambar secara optimal dari segi SEO, berikut adalah 4 tips inti yang sudah saya persiapkan untuk anda:

1. Penggunaan Nama File Gambar

Nama file secara simpel adalah identitas file yang unik, tidak boleh sama di dalam sebuah folder komputer, dan merupakan alat identifikasi mutlak. Sebagaimana fungsi tersebut, nama file yang jelas akan memberikan deskripsi yang jelas pula. Ini juga berlaku bagi halaman web. Halaman web individual yang menampilkan file gambar sama halnya dengan file-file lain, misalnya file html, php, asp, dan seterusnya.

Contoh: http://tautweb.com/foldergambar/nama-file-gambar.jpg

Sebagaimana halnya optimasi url permalink web/blog, anda juga perlu memperhatikan permalink gambar. Sebelum meng-upload gambar, ubah nama file menjadi lebih deskriptif. Misalnya, anda baru saja membuat foto dengan sebuah kamera digital atau kamera smartphone, maka nama file gambar akan diberi nama secara otomatis sesuai setting, contoh: Photoa11234.jpg. Ubah nama file tersebut menjadi deskriptif, memberikan gambaran mengenai foto itu. Tambahkan hypen (strip) untuk memberikan spasi, sama seperti nama file dalam permalink halaman blog.

Contoh: foto-pantai-legian-bali-2013.jpg

Nama file yang agak panjang dan deskriptif tidak masalah, asalkan tidak dibanjiri dengan keyword sama berulangkali.

2. Penggunaan Alt Text (Teks dalam Atribut Alt)

Selain bermanfaat bagi pengunjung apabila gambar gagal dimuat oleh browser atau karena beberapa alasan lain, teks dalam atribut alt memiliki fungsi deksriptif bagi search engine. Search engine tidak dapat "melihat" gambar. Dia hanya bisa "membaca" teks. Teks di dalam alt berfungsi sebagai anchor text (sama seperti anchor text link). Alt bisa lebih deksriptif lagi daripada nama file gambar. Tapi tentu syaratnya sama, jangan dibanjiri dengan keyword.

Contoh alt dalam tag link dan gambar:

< a href="url gambar atau url halaman tertentu"><img alt="ini aku bersama pacarku di pantai legian bali" src="urlgambar" />

Cara Menambahkan teks alt di Blogger
Cara 1: Anda bisa menambahkan teks ke dalam tag gambar seperti contoh di atas, yaitu melalui "HTML" mode di post editor setelah mengupload gambar.

Cara 2: Klik gambar yang muncul di dalam post editor setelah diupload dan dimasukkan ke dalam post. Akan muncul menu seperti contoh di bawah, lalu klik "properties".

Kemudian isikan teks ke dalam kolom alt text dan klik "OK.

3. Ukuran File Gambar

Meski Google tidak memberikan spesifikasi ukuran file tertentu pada gambar yang layak diindeks, namun secara tersirat Google membicarakan ini. Disampaikan bahwa berat suatu halaman yang terlalu besar mempengaruhi loading web, dan pasti ini berpengaruh terhadap user. Ini menjadi pertimbangan tersendiri bagi Google sebab Google sangat memperhatikan user experience. Oleh karena itu, sedikit banyak, kecepatan loading web/blog mempengaruhi SEO. Salah satu penyebab, bahkan sebab terbesar, suatu halaman web menjadi sangat berat adalah gambar. Oleh karena itu, gambar yang teroptimasi ukuran file-nya sangat penting. Gunakan tool kompresi dan optimasi gambar yang tidak mengurangi kualitas, misalnya anda dapat melakukan kompresi dan optimasi PNG dengan PNGGauntlet.

4. Teks yang Mengelilingi Gambar

Sama halnya dengan pengaruh teks yang mengelilingi link (kadar relevansi), teks di sekitar gambar juga berpengaruh karena memberikan gambaran dan penekanan relevansi terhadap topik yang sedang dibicarakan (di dalam gambar). Mengapa demikian? Sebab keyword-keyword di dalam teks di sekitar gambar atau teks di dalam sebuah halaman dimana ada gambar tersebut memberi informasi sekaligus mendorong Google untuk memperhitungkannya. Pastikan deskripsi (nama file dan teks alt) gambar anda relevan dengan teks di sekitarnya, dan juga sebaliknya. Penggunaan caption/teks deskripsi di bawah gambar (opsional) juga merupakan bagian dari teks yang mengelilingi gambar.

Kesimpulan

Sebagai sebuah konten, gambar perlu diperhatikan penggunaannya. Penggunaan deskripsi yang tepat tidak hanya akan berpengaruh baik terhadap user, tapi juga terhadap upaya SEO dan usaha meningkatkan traffic. Ada 4 elemen penting yang perlu diperhatikan: nama file gambar, teks dalam atribut alt, ukuran gambar, dan teks yang mengelilingi gambar. Akhirnya, tentu semua upaya ini kembali kepada kreativitas anda dalam mengoptimalkan keempat hal tersebut. Jika ingin mempelajari lebih lanjut mengenai relevansi antara gambar web, atribut alt, pengunjung web, dan SEO, simak artikel saya di tautweb.com.

Have a nice... "Picturing"! :)

------------------

Update:
Untuk meluruskan, dan juga informasi bagi yang masih bingung dengan atribut ALT dan atribut TITLE:
Alt adalah pengganti anchor text, bisa dilihat saat gambar gagal dimuat. Sedangkan title adalah informasi pada gambar dan link, muncul ketika mouse diarahkan di atas gambar atau link.
Contoh:

TITLE

<a href=http://buka-rahasia.blogspot.com/"><img title="ini title yang akan muncul ketika ada mouse over" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipimXzpk0vp1iNrNMRJXsTbzzV-izLHZ3qUxUygcd0bSkGFIOIFxjV-UDF-qLZtRsNdu8Nveu1msxBB-GPR2FKa-cpJfjj2AtZL5Thp8uIXtlPBGZGmWnFbxueqK-KwlnMCsdn6TvcMi5R/s1600/buka-rahasia-blogspot-logo.png"></a>

Cek, arahkan mouse:

ALT

<a href=http://buka-rahasia.blogspot.com/"><img alt="Buka Rahasia Blogspot" title="contoh title" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEipimXzpk0vp1iNrNMRJXsTbzzV-izLHZ3qUxUygcd0bSkGFIOIFxjV-UDF-qLZtRsNdu8Nveu1msxBB-GPR2FKa-cpJfjj2AtZL5Thp8uIXtlPBGZGmWnFbxueqK-KwlnMCsdn6TvcMi5R/s1600/buka-rahasia-blogspot-logo.png"></a>

Ketika gambar gagal dimuat, atau karena sebab-sebab lain sehingga gambar tidak muncul, maka Alt akan menggantikan sebagai anchor text, sama seperti link. Seperti ini (cek juga untuk melihat fungsi title di dalam link):

Buka Rahasia Blogspot

Unknown

Untuk Mengoptimalkan Seo Blog agan , Benkkers akan Memberikan Sebuah Cara Agar Blog Agan Lebih Seo .YAITU Cara Membuat Page Title Blog Menjadi Lebih SEO Friendly. Menurut saya page title ini cukup penting (Bahkan sangat penting) Untuk mempererat persahabatan blog kita dengan Search Engine.

Alasannya ?

Mari kita simak dua gambar dibawah ini...

Gambar 1:

Gambar 2:

Nah dari dua gambar tersebut dapat kita lihat bahwa pada blog 1, format judul yang ditampilkan mesin pencari google adalah "Nama Blog : Judul Posting" sedangkan pada blog 2 format yang ditampilkan adalah "Judul Posting | Nama Blog".

Dari kedua format tersebut bila kita melakukan pencarian atas sebuah keyword dengan search engine, maka teman - teman tentu tahu dan paham manakah blog yang akan diutamakan oleh search engine untuk ditampilkan dalam hasil pencarian.

Nah Untuk merubah format default page title kita dari "Nama Blog: Judul" menjadi "Judul : Nama Blog" Bisa dengan cara berikut ini;

Masuk ke dashboard
Klik design
Pilih Tab Edit HTML
Beri Cek pada Expand widget templates
Cari kode <title><data:blog.pageTitle/></title>
Ganti kode tersebut dengan kode dibawah ini:

<b:if cond='data:blog.pageType == "item"'>

<title><data:blog.pageName/> | <data:blog.title/></title>

<b:else/>

<title><data:blog.pageTitle/></title>

</b:if>

Klik save template
Selesaii...

Semoga dengan berubahnya page title blog sobat ini menjadikan sobat semakin sukses dalam dunia blogging.

Jangan Lupa Follow Blog Saya YA .

Unknown

Ada beberapa cara Agar Blog kita Auto Post ke Facebook dan Twitter, namun Cara berikut akan lebih mudah di aplikasikan bagi Sobat Blogger Pemula. Artikel ini Terinspirasi Pertanyaan Sobat Ochie Achmad Fauzi yang Tanya seperti ini :

gun punya artikel pas kita posting di blog trus langsung twitternya nge tweet sndri utk postingan baru kita ? atau fb juga gun. ada gan ?

Entah Kenapa Sobat satu ini menjadikan saya tempat Bertanya yang Paling Nyaman.

Auto Posting ke Twiiter dan FB maksudnya Yakni Jika kita Posting Artikel baru di Blog kita maka secara Otomatis juga di Posting Ke FB dan Twitter, dengan cara ini tentu lebih membuat tugas ngeblog lebih mudah dan tidak melelahkan. Selain itu bagi sobat yang sudah banyak teman di Facebook akan diuntungkan karena jika teman kita melihat status kita dan tertarik membacanya, maka traffic akan kita dapat.

Baiklah Mari kita Mulai saja, silahkan ikuti langkah berikut ini :

Pertama
Sobat mesti miliki Account Facebook dan Twitter dulu ( Masa mau Auto Post ke Twitter dan FB ga punya Accountnya )

Kedua
Silahkan menuju Situs Perantara Berikut ini : Here

Silahkan sobat Daftar dengan Mengklik Sign Up pada Pojok Atas Situs tersebut.

Ketiga
Sekarang silahkan Isi Feed yang telah disediakan sesuai Feed Blog yang ingin kita Auto Post seperti pada Gambar

Keempat
Silahkan Klik Logo Twitter atau Facebook untuk Koneksikan Account Sobat

Sekarang silahkan Masuklah ke Account Twitter atau Facebook SObat dan Terakhir Klik Autorize App untuk Twitter dan Klik Ijinkan Untuk Fb

Kelima
Untuk Facebook kita diberikan Pilihan Apakah feed blog akan di Tampilkan di Status Profile ataukah di Fun Page FB kita, silahkan Plih salah satunya.

Keenam
Sekarang Blog sobat untuk Artikel Terbarunya sudah Siap di Post ke Fb dan Twitter kita.
Untuk menambahkan Blog lain silahkan Sobat Klik add dan Prosesnya sama dengan Langkah ke Tiga, Kita Juga bisa tambahkan Social Bookmark lain tempat Autopost sesuai yang telah disediakan al :
Myspace | Tumblr | dan lain-lain.

Selamat Auto Post Sobat Sudah Jadi, Semoga Bermanfaat

Unknown

Woke , kali ini DarkMelodic mw mosting tips membuat kota(objek) di bawah header , mungkin beberapa blogger sudah banyak yang mengetahui cara membuatny , tapi ada beberapa newbie seperti saya , yang belum mengetahui cara membuatnya , kg usah lama-lama beriku cara2 membuatny ....

Nah gambar di ats itu contoh kotak(objekny) , langsung saja dah kita coba ......

1.Masuk ke akun Blogger kalian , kemudian pilih tulisan template
2.Cari kode ]]><b:skin
3.Kemudian masukan kode di bawah ini , tepat di atas kode ]]><b:skin

#KZKh{ margin-top:20;margin-left: 0px ;margin-bottom:50px ;border:5px solid #DDD;border-radius:10px 10px 10px 10px ;width:1090px;height:200px; background: #222; position:relative;}

Keterangan:
-kode warna Merah : itu adalah warna background , silahkan ganti warnany sesuka kalian
-kode warna Biru : itu adalah warna border(garis pinggir) , silhkan ganti juga warnany sesuka kalian

4.berikut ini adalah kode HTML nya , cara meletakany silahkan anda cari kode <div id='content'> letakan kode di bawah ini tepat di atas kode <div id='content'>

<div id='KZKh'>SILAHKAN ANDA ISI DENGAN APA SAJA</div>

Gimana gampangkan ngebuatnya , Monggo di coba .......

sumber

Unknown

Hey Benkkers..
Kali ini gw post tentang 'Cara Membuat Headlines Di Header Blog!"
Kalian pasti udh tau nih apa itu headlines,
Ini nih kaya di blog gw!!

Toh!!

Tapi itu di bawah header,

Dan yang kali ini saya akan share yang di header!

Oke langsung aja simak nih!

1. Buka Dasbor Blog!

2. Buka Template -> Edit HTML

3. Cari kode "]]></b:skin" ( Ctrl + F atau F3 Untuk mempermudah pencarian )

4. Letakkan kode CSS berikut tepat di atas kode "]]></b:skin"

CSS :

#ACheadlines{
float: left;
margin-left: 60px;
width: 350px;
height: 200px;
border-top: 3px solid #fff;
border-right: 3px solid #fff;
border-bottom: 3px solid #fff;
border-left: 3px solid #fff;
background: #000;
margin-top: -200px;
padding: 3px;}

NB*

Kalimat yang berwarna orange : Arah ,Jika "right" yaitu dari kanan dan "left dari kiri!
Kalimat yang berwarna merah : Margin dari kiri ( Sesuaikan dengan blog sobat )
Kalimat yang berwarna kuning : Panjang headlines ( Sesuaikan Dengan Keinginan )
Kalimat yang berwanra hijau muda : Tinggi Headlines ( Sesuaikan Dengan Keinginan )
Kalimat Yang berwarna biru tua : Ketebalan border ( Garis Tepi ) Headlines
Kalimat yang berwana abu-abu : Jenis border ( Garis Tepi ) Headlines
Kalimat yang berwarna hijau tua : warna border ( Garis Tepi ) Headlines
Kalimat berwarna ungu : Warna background Headlines
Kalimat yang berwarna biru muda : Margin dari atas ( Sesuaikan dengan blog sobat )
Kalimat berwarna pink : Jarak antara headlines dengan border ( Garis Tepi )

5. Cari kode "header-wrapper" ( Ctrl + F atau F3 untuk mempermudah pencarian )

6. Letakkan kode HTML berikut tepat di atas kode "header-wrapper"

HTML :

<div id='ACheadlines'>
<b:section class=' ACheadlines1' id=' ACheadlines ' showaddelement='yes'/>
</div>

NB*

Sebenarnya kode HTML di atas bisa di letakkan di antara tag <body> dan </body> ( Asalkan tidak error )

7. Klik Simpan

8. Eitt!!! Belum selesai!!,
9. Buka Dasbor blog lagi -> Tata Letak -> Tambahkan Widget -> HTML/Javascript
10. Masukkan kode berikut di dalam kolom yang telah di sediakan!

<div style="overflow:auto; width:100%px; height:175px; padding:10px; border:0px solid #000000;">
<script src="https://chandra-yozers-comunity.googlecode.com/files/AC%20headlines.js"></script>
<script>var numposts = 20; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script>
<script src="http://aryoz-comunity.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp">
</script></div>

NB*

Kalimat yang berwarna abu-abu : Panjang Isi Headlines ( Sesuaikan dengan blog sobat )
Kalimat yang berwarna merah : Tinggi Widget Headlines ( Sesuaikan dengan blog sobat )
Kalimat yang berwarna orange : Jarak atara border ( Garis tepi ) dengan widget headlines
Kalimat yang berwarna kuning : Ketebalan border ( Garis Tepi ) widget headlines
Kalimat yang berwarna hijau : Jenis border headlines ( Sesuaikan dengan keinginan )
Kalimat yang berwarna biru muda : Warna border ( Garis Tepi ) headlines
Kalimat yang berwarna biru tua : Jumlah postingan yang akan di tampilkan
Kalimat yang berwarna ungu : Ganti dengan URL blog atau web sobat

11. Klik simpan
12. Selesai!

Oke nih!!!

Sekian dulu ya Benkkers...

Dadaaaa.. :v

Unknown

Hey benkkers...

Apakah kalian tahu"Kotak Search"?

Ya tentu saja tahu ya,...

Karena sebenarnya sebuah blog harus memiliki kotak search di blognya,agar pengunjung tidak kesulitan untuk mencari artikel yang di carinya!

Tentu kotak search ini sangat berguna untuk para pengunjung,yah..

Walaupun pihak blog telah menyediakan widget "Kotak Search",tapi saya akan share "cara Membuat Kotak Search Di Header Blog"

Berikut contohnya!

Dan bagi yang ingin membuatnya,mari kita simak langkah-langkah berikut!

1. Buka Dasbor Blog -> Template -> Edit Template

2. Centang "Expand Template Widget"

3. Cari kode "]]></b:skin>" ( Ctrl+F atau F3 untuk mempermudah pencarian )

4. Letakkan kode CSS berikut tepat di atas kode ]]></b:skin

CSS :

#search{float: right;
margin-right:300px;
margin-top: 215px;}#search input[type="text"]{background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdxonL24klIdDRuq3bFoSohMCV-xJvslaS45Ht-KSUMzTZYEEvEHeBwPLbD60JgtdgjAtekbFEZSXvU3N8X6YL9NMiuhfCnDgWD9QxVfjr6Ygv3fMEHh4W0oHgouaF3EtdsFpSSj0Qt08/s1600/cari.png) no-repeat 10px 6px darkred;
border-top: 3px solid #000;
border-left: 3px solid #000;
border-right: 3px solid #000;
border-bottom: 3px solid #000;
font: bold 16px 'Advent Pro',cursive;
color: #BBB;
text-shadow: 1px 1px 1px black,-1px 1px 1px black,-1px -1px 1px black,1px -1px 1px black;
width: 325px;
padding: 6px 15px 6px 35px;
border-radius: 25px 25px 25px 25px;
-moz-transition: all 0.1s ease 0s;
-webkit-transition: all 900ms ease-out;
-moz-transition: all 900ms ease-out;
-ms-transition: all 900ms ease-out;
-o-transition: all 900ms ease-out;
transition: all 900ms ease-out;
margin-top: -300px;
margin-right: -200px;
float: right;
}

NB:

- Tulisan berwarna orange : Arah ,Jika "right" yaitu dari kanan dan "left dari kiri!

- Tulisan berwarna kuning : Margin dari kanan ( Sesuaikan degan blog sobat )

- Tulisan berwarna merah : Panjang search

- Tulisan berwarna biru muda : Warna font search

- Tulisan berwarna abu-abu : Tebal border ( garis tepi ) search

- Tulisan berwarna biru tua : Jenis border ( garis tepi ) search

- Tulisan berwarna hijau : Warna border ( garis tepi ) search

- Tulisan berwarna biru : Warna background search

- Tulisan berwarna pink : Margin dari atas ( Sesuaikan degan blog sobat )

- Tulisan berwarna hijau tua : Border radius ( lengkungan pada garis tepi ) search

5. Cari kode "</header>" ( Ctrl+F atau F3 untuk mempermudah pencarian )

6. Letakkan HTML berikut tepat di atas kode "</header>"

HTML :

<form action='/search' id='search' method='get'><input name='q' placeholder='Search...' size='30' type='text'/></form>

NB :
- Sebenarnya kode HTML di atas bisa di letakan di antara tag "<header>" dan "</header>"

7. Klik pratinjau dulu,jika tidak error,Klik Simpan
8. Selesai!

Hihihi.
samapi di sini dulu ya kawan...
Semoga bermanfaat!
Terimakasih!

Unknown

Hey benkkers!!!
Saya mau share nih!!!
Ada yang mau nyimak??
Ahaha..
Ya harus ada.. :v
Saya mo share "Cara Membuat Widget Banner Di Header Blog"
Ini nih contohnya!

Oke,langsung aja nih ke penjelasannya!

1. Buka Dasbor Blog -> Template -> Edit HTML

2. Centang "Expand Template Widget"

3. Cari kode ]]></b:skin> ( Ctrl+F atau F3 Untuk mempermudah pencarian )

4. Letakkan kode CSS berikut tepat di atas " ]]></b:skin>"

CSS :

#ACbanner{
float:right;
margin-right:1025px;
width: 468px;
height: 60px;
border-right: 3px solid #FFFFFF;
border-left: 3px solid #FFFFFF;
border-bottom: 3px solid #FFFFFF;
background: #000000;
margin-top: -300px;
padding: 3px;
border-top: 3px solid #FFFFFF;
}

NB:
- Tulisan berwarna orange : Arah ,Jika "right" yaitu dari kanan dan "left dari kiri!
- Tulisan berwarna kuning : Margin dari kanan ( Sesuaikan degan blog sobat )
- Tulisan berwarna merah : Panjang widget
- Tulisan berwarna biru muda : Tinggi widget
- Tulisan berwarna abu-abu : Tebal border ( garis tepi ) widget
- Tulisan berwarna biru tua : Jenis border ( garis tepi ) widget
- Tulisan berwarna hijau : Warna border ( garis tepi ) widget
- Tulisan berwarna biru : Warna background widget
- Tulisan berwarna pink : Margin dari atas ( Sesuaikan degan blog sobat )

5. Cari "header-wrapper" ( Ctrl+F atau F3 Untuk mempermudah pencarian )
6. Letakkan kode HTML berikut tepat di atas kode "header-wrapper"

HTML :

<div id='ACbanner'>
<b:section class=' ACbanner1' id=' ACbanner ' showaddelement='yes'/>
</div>

NB:
- Kode HTML tersebut juga bisa di taruh di antara tag "<body>" dan "</body> ( Asalkan Tidak Error )

7. Pratinjau terlebih dahulu,jika tidak error,lalu "Simpan"
8. Selesai!

Sekian dulu ya ...
Oke!!
Thx!

Unknown

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

1. Masuk ke edit HTML kemudian centang Expand Template Widget
2. Letakkan kode ini diatas ]]></b:skin>

.MaskedX {
position: absolute;
right: 190px;
width: 178px;
height: 33px;
top: 150px;
background: #000;
z-index: 9;
padding: 2px;
padding-top:4px;
padding-left:4px;
border-radius: 5px 5px 1px 5px;
border: 2px solid #494949;
}
.MaskedX:before{
content: "";
position: absolute;
bottom: -11px;
left: 162px;
border-width: 10px 25px 0px 0px;
border-style: solid;
border-color: #484848 transparent;
display: block;
width: 0;
}

3. Lalu letakkan kode ini dibawah <div id='header-wrapper'>

<div class='MaskedX'>
<a href="http://maskedx.blogspot.com/" onmouseover="window.location=this.href"><img src="http://i1273.photobucket.com/albums/y407/maskedx/xx_zps5a06b628.png" height="31" width="88" title="The Masked Man | Masked X"/></a>

</div>
4. Pratinjau dulu sebelum di save

sumber

Unknown

Hai sob, apa kabar? Kali ini blog DarkBenkRD akan berbagi Tutorial untuk membuat animasi loading tersebut, Tutorial Membuat Animasi Loading Blog dengan CSS3 dalam 6 Variasi Loader.

Ok, langsung aja di simak tutorial ini

1. Masuk ke Dashboard Blogger, klik Template lalu pilih Edit HTML

2. Ini adalah point terpenting, pertama cek dulu template blogmu apakah sudah ada script jquery didalamnya atau belum, jika belum ada silahkan copy kode ini:

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

dan pastekan tepat diatas kode <b:skin><![CDATA[

3. Ikuti petunjuk dibawah ini sesuai dengan style animasi loading yang kamu suka

# Style 1

Demo

Masukkan Kode berikut tepat diatas kode ]]></b:skin>

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
/* DEMO 1 */
#horizontal-load body:after {
content: "";
z-index: -1;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.5));
}
#horizontal-load .bar {
font-size: 20px;
width: 10em;
height: 1em;
position: relative;
margin: 100px auto;
border-radius: .5em;
background: rgba(255,255,255,0.6);
box-shadow:
0 0 0 .05em rgba(100,100,100,0.075),
0 0 0 .25em rgba(0,0,0,0.1),
inset 0 .1em .05em rgba(0,0,0,0.1),
0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar:after {
content: "Please wait.";
position: absolute;
left: 25%;
top: 150%;
font-family: 'Carrois Gothic', sans-serif;
font-size: 1em;
color: #555;
text-shadow: 0 .05em rgba(255,255,255,0.7);
}
#horizontal-load .bar .sphere {
border-radius: 50%;
width: 1em;
height: 100%;
background: -webkit-linear-gradient(#eee, #ddd);
background: -moz-linear-gradient(#eee, #ddd);
background: -ms-linear-gradient(#eee, #ddd);
background: -o-linear-gradient(#eee, #ddd);
background: linear-gradient(#eee, #ddd);
box-shadow:
inset 0 .15em .1em rgba(255,255,255,0.3),
inset 0 -.1em .15em rgba(0,0,0,0.15),
0 0 .25em rgba(0,0,0,0.3);
display: block;
-webkit-animation: slide 1.75s ease-in-out infinite alternate;
-moz-animation: slide 1.75s ease-in-out infinite alternate;
-ms-animation: slide 1.75s ease-in-out infinite alternate;
-o-animation: slide 1.75s ease-in-out infinite alternate;
animation: slide 1.75s ease-in-out infinite alternate;
}
@-webkit-keyframes slide {
to { margin-left: 90%; }
}
@-moz-keyframes slide {
to { margin-left: 90%; }
}
@-ms-keyframes slide {
to { margin-left: 90%; }
}
@-o-keyframes slide {
to { margin-left: 90%; }
}
@keyframes slide {
to { margin-left: 90%; }
}

Lalu letakkan kode berikut tepat dibawah kode <body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="horizontal-load"><div class="bar">
<i class="sphere"></i>
</div></div>
</div>

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 2

Demo

Masukkan Kode berikut tepat diatas kode ]]></b:skin>

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

#load2 body {
background-image: url(../images/hexabump.png);
background-color: #222;
}
#load2 body:after {
content: "";
z-index: -1;
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
background: -webkit-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -moz-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -ms-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: -o-radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
background: radial-gradient(center center, circle cover, rgba(0,0,0,0), rgba(0,0,0,0.75));
}
#load2 .spinner {
position: relative;
font-size: 100px;
width: 1em;
height: 1em;
margin: 100px auto;
border-radius: 50%;
background: #123456;
box-shadow: inset 0 0 0 .12em rgba(0,0,0,0.2), 0 0 0 .12em rgba(255,255,255,0.1);
background:
-webkit-linear-gradient(#ea2d0e 50%, #fcd883 50%),
-webkit-linear-gradient(#fcd883 50%, #ea2d0e 50%);
background:
-moz-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-moz-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
-ms-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-ms-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
-o-linear-gradient(#ea2d0e 50%, #ffdd72 50%),
-o-linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background:
linear-gradient(#ea2d0e 50%, #ffdd72 50%),
linear-gradient(#ffdd72 50%, #ea2d0e 50%);
background-size: 50% 100%, 50% 100%;
background-position: 0 0, 100% 0;
background-repeat: no-repeat;
opacity: 0.7;
-webkit-animation: mask 3s infinite alternate;
-moz-animation: mask 3s infinite alternate;
-ms-animation: mask 3s infinite alternate;
-o-animation: mask 3s infinite alternate;
animation: mask 3s infinite alternate;
}

@-webkit-keyframes mask {
25% { -webkit-transform: rotate(270deg); }
50% { -webkit-transform: rotate( 90deg); }
75% { -webkit-transform: rotate(360deg); }
100% { -webkit-transform: rotate(180deg); }
}
@-moz-keyframes mask {
25% { -moz-transform: rotate(270deg); }
50% { -moz-transform: rotate( 90deg); }
75% { -moz-transform: rotate(360deg); }
100% { -moz-transform: rotate(180deg); }
}
@-ms-keyframes mask {
25% { -ms-transform: rotate(270deg); }
50% { -ms-transform: rotate( 90deg); }
75% { -ms-transform: rotate(360deg); }
100% { -ms-transform: rotate(180deg); }
}
@-o-keyframes mask {
25% { -o-transform: rotate(270deg); }
50% { -o-transform: rotate( 90deg); }
75% { -o-transform: rotate(360deg); }
100% { -o-transform: rotate(180deg); }
}
@keyframes mask {
25% { transform: rotate(270deg); }
50% { transform: rotate( 90deg); }
75% { transform: rotate(360deg); }
100% { transform: rotate(180deg); }
}

Lalu letakkan kode berikut tepat dibawah kode <body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="load2"><div class="spinner">
<i class="sphere"></i>
</div></div>
</div>

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 3

Demo

Masukkan Kode berikut tepat diatas kode ]]></b:skin>

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#bowlG{
position:relative;
width:128px;
height:128px;margin:20% auto;
}
#bowl_ringG{
position:absolute;
width:128px;
height:128px;
border:11px solid #5C5C5C;
-moz-border-radius:128px;
-webkit-border-radius:128px;
-ms-border-radius:128px;
-o-border-radius:128px;
border-radius:128px;
}
.ball_holderG{
position:absolute;
width:34px;
height:128px;
left:47px;
top:0px;
-moz-animation-name:ball_moveG;
-moz-animation-duration:1.3s;
-moz-animation-iteration-count:infinite;
-moz-animation-timing-function:linear;
-webkit-animation-name:ball_moveG;
-webkit-animation-duration:1.3s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
-ms-animation-name:ball_moveG;
-ms-animation-duration:1.3s;
-ms-animation-iteration-count:infinite;
-ms-animation-timing-function:linear;
-o-animation-name:ball_moveG;
-o-animation-duration:1.3s;
-o-animation-iteration-count:infinite;
-o-animation-timing-function:linear;
animation-name:ball_moveG;
animation-duration:1.3s;
animation-iteration-count:infinite;
animation-timing-function:linear;
}
.ballG{
position:absolute;
left:0px;
top:-30px;
width:51px;
height:51px;
background:#FF0000;
-moz-border-radius:43px;
-webkit-border-radius:43px;
-ms-border-radius:43px;
-o-border-radius:43px;
border-radius:43px;
}
@-moz-keyframes ball_moveG{
0%{
-moz-transform:rotate(0deg)}
100%{
-moz-transform:rotate(360deg)}
}
@-webkit-keyframes ball_moveG{
0%{
-webkit-transform:rotate(0deg)}
100%{
-webkit-transform:rotate(360deg)}
}
@-ms-keyframes ball_moveG{
0%{
-ms-transform:rotate(0deg)}
100%{
-ms-transform:rotate(360deg)}
}
@-o-keyframes ball_moveG{
0%{
-o-transform:rotate(0deg)}
100%{
-o-transform:rotate(360deg)}
}
@keyframes ball_moveG{
0%{
transform:rotate(0deg)}
100%{
transform:rotate(360deg)}
}

Lalu letakkan kode berikut tepat dibawah kode <body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="bowlG">
<div id="bowl_ringG">
<div class="ball_holderG">
<div class="ballG">
</div>
</div>
</div>
</div>
</div>

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 4

Demo

Masukkan Kode berikut tepat diatas kode ]]></b:skin>

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#circular3dG{
position:relative;
width:100px;
height:100px;margin:10% auto;
}
.circular3dG{
position:absolute;
background-color:#00C4FF;
width:28px;
height:28px;
-moz-border-radius:30px;
-moz-animation-name:bounce_circular3dG;
-moz-animation-duration:0.48s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-webkit-border-radius:30px;
-webkit-animation-name:bounce_circular3dG;
-webkit-animation-duration:0.48s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-ms-border-radius:30px;
-ms-animation-name:bounce_circular3dG;
-ms-animation-duration:0.48s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-o-border-radius:30px;
-o-animation-name:bounce_circular3dG;
-o-animation-duration:0.48s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
border-radius:30px;
animation-name:bounce_circular3dG;
animation-duration:0.48s;
animation-iteration-count:infinite;
animation-direction:linear;
}
#circular3d_1G{
left:41px;
top:6px;
-moz-animation-delay:0.18s;
-webkit-animation-delay:0.18s;
-ms-animation-delay:0.18s;
-o-animation-delay:0.18s;
animation-delay:0.18s;
}
#circular3d_2G{
left:61px;
top:23px;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#circular3d_3G{
left:73px;
top:45px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#circular3d_4G{
left:69px;
top:67px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#circular3d_5G{
left:42px;
top:73px;
-moz-animation-delay:0.42000000000000004s;
-webkit-animation-delay:0.42000000000000004s;
-ms-animation-delay:0.42000000000000004s;
-o-animation-delay:0.42000000000000004s;
animation-delay:0.42000000000000004s;
}
#circular3d_6G{
left:8px;
top:48px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#circular3d_7G{
left:0px;
top:14px;
-moz-animation-delay:0.5399999999999999s;
-webkit-animation-delay:0.5399999999999999s;
-ms-animation-delay:0.5399999999999999s;
-o-animation-delay:0.5399999999999999s;
animation-delay:0.5399999999999999s;
}
#circular3d_8G{
left:17px;
top:0px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
@-moz-keyframes bounce_circular3dG{
0%{
-moz-transform:scale(1)}
100%{
-moz-transform:scale(.3)}
}
@-webkit-keyframes bounce_circular3dG{
0%{
-webkit-transform:scale(1)}
100%{
-webkit-transform:scale(.3)}
}
@-ms-keyframes bounce_circular3dG{
0%{
-ms-transform:scale(1)}
100%{
-ms-transform:scale(.3)}
}
@-o-keyframes bounce_circular3dG{
0%{
-o-transform:scale(1)}
100%{
-o-transform:scale(.3)}
}
@keyframes bounce_circular3dG{
0%{
transform:scale(1)}
100%{
transform:scale(.3)}
}

Lalu letakkan kode berikut tepat dibawah kode <body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="circular3dG">
<div id="circular3d_1G" class="circular3dG">
</div>
<div id="circular3d_2G" class="circular3dG">
</div>
<div id="circular3d_3G" class="circular3dG">
</div>
<div id="circular3d_4G" class="circular3dG">
</div>
<div id="circular3d_5G" class="circular3dG">
</div>
<div id="circular3d_6G" class="circular3dG">
</div>
<div id="circular3d_7G" class="circular3dG">
</div>
<div id="circular3d_8G" class="circular3dG">
</div>
</div>
</div>

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 5

Demo

Masukkan Kode berikut tepat diatas kode ]]></b:skin>

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}

.bubblingG {
text-align: center;
width:100px;
height:63px;margin:10% auto;
}
.bubblingG span {
display: inline-block;
vertical-align: middle;
width: 13px;
height: 13px;
margin: 31px auto;
background: #7BFF00;
-moz-border-radius: 63px;
-moz-animation: bubblingG 0.6s infinite alternate;
-webkit-border-radius: 63px;
-webkit-animation: bubblingG 0.6s infinite alternate;
-ms-border-radius: 63px;
-ms-animation: bubblingG 0.6s infinite alternate;
-o-border-radius: 63px;
-o-animation: bubblingG 0.6s infinite alternate;
border-radius: 63px;
animation: bubblingG 0.6s infinite alternate;
}
#bubblingG_1 {
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-ms-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
#bubblingG_2 {
-moz-animation-delay: 0.18s;
-webkit-animation-delay: 0.18s;
-ms-animation-delay: 0.18s;
-o-animation-delay: 0.18s;
animation-delay: 0.18s;
}
#bubblingG_3 {
-moz-animation-delay: 0.36s;
-webkit-animation-delay: 0.36s;
-ms-animation-delay: 0.36s;
-o-animation-delay: 0.36s;
animation-delay: 0.36s;
}
@-moz-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-moz-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-moz-transform: translateY(-26px);
}
}
@-webkit-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-webkit-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-webkit-transform: translateY(-26px);
}
}
@-ms-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-ms-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-ms-transform: translateY(-26px);
}
}
@-o-keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
-o-transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
-o-transform: translateY(-26px);
}
}
@keyframes bubblingG {
0% {
width: 13px;
height: 13px;
background-color:#7BFF00;
transform: translateY(0);
}
100% {
width: 30px;
height: 30px;
background-color:#FF0000;
transform: translateY(-26px);
}
}

Lalu letakkan kode berikut tepat dibawah kode <body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div class="bubblingG">
<span id="bubblingG_1">
</span>
<span id="bubblingG_2">
</span>
<span id="bubblingG_3">
</span>
</div>
</div>

Klik Pratinjau, kalau loading muncul silahkan simpan template

# Style 6

Demo

Masukkan Kode berikut tepat diatas kode ]]></b:skin>

/* X-Gen Loader */
#xgenloader-screen {z-index:999999;background:#000;width:100%;height:100%;position:fixed !important;position:absolute;top:0;right:0;bottom:0;left:0;text-shadow:none;}
#spinningSquaresG{
position:relative;
width:240px;
height:29px;margin:10% auto;}
.spinningSquaresG{
position:absolute;
top:0;
background-color:#FFDD00;
width:29px;
height:29px;
-moz-animation-name:bounce_spinningSquaresG;
-moz-animation-duration:0.6s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:linear;
-moz-transform:scale(.3);
-webkit-animation-name:bounce_spinningSquaresG;
-webkit-animation-duration:0.6s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:linear;
-webkit-transform:scale(.3);
-ms-animation-name:bounce_spinningSquaresG;
-ms-animation-duration:0.6s;
-ms-animation-iteration-count:infinite;
-ms-animation-direction:linear;
-ms-transform:scale(.3);
-o-animation-name:bounce_spinningSquaresG;
-o-animation-duration:0.6s;
-o-animation-iteration-count:infinite;
-o-animation-direction:linear;
-o-transform:scale(.3);
animation-name:bounce_spinningSquaresG;
animation-duration:0.6s;
animation-iteration-count:infinite;
animation-direction:linear;
transform:scale(.3);
}
#spinningSquaresG_1{
left:0;
-moz-animation-delay:0.24s;
-webkit-animation-delay:0.24s;
-ms-animation-delay:0.24s;
-o-animation-delay:0.24s;
animation-delay:0.24s;
}
#spinningSquaresG_2{
left:30px;
-moz-animation-delay:0.3s;
-webkit-animation-delay:0.3s;
-ms-animation-delay:0.3s;
-o-animation-delay:0.3s;
animation-delay:0.3s;
}
#spinningSquaresG_3{
left:60px;
-moz-animation-delay:0.36s;
-webkit-animation-delay:0.36s;
-ms-animation-delay:0.36s;
-o-animation-delay:0.36s;
animation-delay:0.36s;
}
#spinningSquaresG_4{
left:90px;
-moz-animation-delay:0.42s;
-webkit-animation-delay:0.42s;
-ms-animation-delay:0.42s;
-o-animation-delay:0.42s;
animation-delay:0.42s;
}
#spinningSquaresG_5{
left:120px;
-moz-animation-delay:0.48s;
-webkit-animation-delay:0.48s;
-ms-animation-delay:0.48s;
-o-animation-delay:0.48s;
animation-delay:0.48s;
}
#spinningSquaresG_6{
left:150px;
-moz-animation-delay:0.54s;
-webkit-animation-delay:0.54s;
-ms-animation-delay:0.54s;
-o-animation-delay:0.54s;
animation-delay:0.54s;
}
#spinningSquaresG_7{
left:180px;
-moz-animation-delay:0.6s;
-webkit-animation-delay:0.6s;
-ms-animation-delay:0.6s;
-o-animation-delay:0.6s;
animation-delay:0.6s;
}
#spinningSquaresG_8{
left:210px;
-moz-animation-delay:0.66s;
-webkit-animation-delay:0.66s;
-ms-animation-delay:0.66s;
-o-animation-delay:0.66s;
animation-delay:0.66s;
}
@-moz-keyframes bounce_spinningSquaresG{
0%{
-moz-transform:scale(1);
background-color:#FFDD00;
}
100%{
-moz-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-webkit-keyframes bounce_spinningSquaresG{
0%{
-webkit-transform:scale(1);
background-color:#FFDD00;
}
100%{
-webkit-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-ms-keyframes bounce_spinningSquaresG{
0%{
-ms-transform:scale(1);
background-color:#FFDD00;
}
100%{
-ms-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@-o-keyframes bounce_spinningSquaresG{
0%{
-o-transform:scale(1);
background-color:#FFDD00;
}
100%{
-o-transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}
@keyframes bounce_spinningSquaresG{
0%{
transform:scale(1);
background-color:#FFDD00;
}
100%{
transform:scale(.3) rotate(90deg);
background-color:#FF0000;
}
}

Lalu letakkan kode berikut tepat dibawah kode <body>

<script type='text/javascript'>
//<![CDATA[
$(function() {
setTimeout(function() {
$('#xgenloader-screen').fadeOut();
}, 5000);
});
//]]>
</script>
<div id='xgenloader-screen'><div id="spinningSquaresG">
<div id="spinningSquaresG_1" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_2" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_3" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_4" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_5" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_6" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_7" class="spinningSquaresG">
</div>
<div id="spinningSquaresG_8" class="spinningSquaresG">
</div>
</div>
</div>

Klik Pratinjau, kalau loading muncul silahkan simpan template

Oke akhirnya selesai juga Tutorial Cara Membuat Animasi Loading Blog CSS3 dengan 6 Variasi Loader ini, jika ada kesalahan dalam mengetik saya mohon maaf karena saya sudah ngantuk sekali ini :(

oh iya kamu juga bisa menggunakan style Animated Loader yang lain lho, cara bikin animasi nya kamu pergi aja ke situs http://cssload.net/ disana kamu bisa berkreasi membuat animasi loading yang kamu sukai

oh iya satu lagi, kalau artikel ini bermanfaat, join blog ini ya (tombolnya ada di bawah) :)

Kalau ada yang belum jelas tulis aja di komentar
Sumber