Diberdayakan oleh Blogger.

What's Awesome

About Me

JS

Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan
Tampilkan postingan dengan label Tutorial Blogger. Tampilkan semua postingan

Meta Tag SEO Friendly Terbaru

Meta adalah elemen atau tag dalam bahasa pemrograman HTML atau XHTML yang dipakai untuk mengaplikasikan metadata dalam suatu halaman web atau blog. Tag meta ini dapat dipakai juga untuk menyatakan deskripsi/keterangan dari suatu halaman web atau blog, untuk menjelaskan mengenai kata kunci (keyword) yang terkait. Trik ini sangat bagus bagi para Blogger yang ingin blognya lebih SEO, cara pasangnya ikuti cara berikut. 

  • Pastikan anda sudah Login di Blogger.com
  • Masuk ke Blog kamu



  • Silahkan Anda cari kode yang mirip seperti di bawah ini,
<b:include data='blog' name='all-head-content'/>

  • Selanjutnya, letakan Meta Tag seo Friendly di bawah ini tepat di bawah kode yang bercetak tebal,

<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<meta content='Masukkan Deskripsi Blog Anda' name='description'/>
<meta content=' Masukkan kata kunci blog anda disetai koma di belakangnya ' name='keywords'/>
<b:else/>
<meta expr:content='data:blog.pageName + &quot; -  description&quot;' name='description'/>
<meta expr:content='data:blog.pageName + &quot;, keywords&quot;' name='keywords'/>
</b:if>
<meta content='Nama Anda' name='author'/>
<meta content='noodp' name='robots'/>
<meta content='INDEX, FOLLOW' name='ROBOTS'/>
<meta content='all-language' http-equiv='Content-Language'/>
<meta content='Global' name='Distribution'/>
<meta content='Indonesia' name='geo.country'/>
<meta content='Id' name='geo.placename'/>
<meta content='all' name='webcrawlers'/>
<meta content='all' name='spiders'/>
<meta content='5' name='refresh'/>
<meta content='all' name='googlebot'/>
<meta content='all' name='msnbot'/>
<meta content='all' name='Googlebot-Image'/>
<meta content='all' name='Slurp'/>
<meta content='all' name='Scooter'/>
<meta content='true' name='MSSmartTagsPreventParsing'/>
<meta content='1 days' name='revisit'/>
<meta content='1 days' name='revisit-after'/>
<meta content='document' name='resource-type'/>
<meta content='id' name='language'/>
<meta content='ID' name='country'/>
<meta content='all' name='audience'/>
<meta content='Aeiwi, Alexa, AllTheWeb, AltaVista, AOL Netfind, Anzwers, Canada, DirectHit, EuroSeek, Excite, Overture, Go, Google, HotBot. InfoMak, Kanoodle, Lycos, MasterSite, National Directory, Northern Light, SearchIt, SimpleSearch, WebsMostLinked, WebTop, What-U-Seek, AOL, Yahoo, WebCrawler, Infoseek, Excite, Magellan, LookSmart, CNET, Googlebot' name='search engines'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == &quot;label&quot;'>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
  Note : Silahkan Anda edit khususnya pada tulisan yang bercetak tebal berwarna biru.

  • Save Template.
 Selesai silahkan mencoba tutorial ini ^_^ 

2 Macam Kotak Search Untuk Blog


Cara Membuat Kotak Search Di Blog, bagi anda yang pingin memasang kotak search atau pencarian agar pengunjung blog anda dapat dengan mudah mencari artikel, disini saya telah siapkan 2 jenis kotak search untuk blog anda, jadi pilih salah satu saja.

DEMO 2 JENIS KOTAK SEACRH :
KODE 1

KODE 2

Cara Membuat
1. Login ke blog kamu.
2. Pilih Rancangan > Edit HTML > Cari kode </head>
3. Letakan Kode 1 CSS atau Kode 2 CSS tepat di atas kode </head>
4. Pilih salah satu saja.

Kode 1 CSS :
<style type='text/css'>
#search {
height:34px;
width:auto;
margin-top:10px;
padding:17px 5px 10px 15px;
width:311px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiauWdHVt2TzTof48XXzDbd8c0pakAt-HmwwTieb41HVQl9amlsTfjWWGUkNOnjujQHOjhSsERNosZc6ENV0lO0YkxZXyEPBHnfYiNc7COYLx-9lLmYmgu6Bk6GCUMI-CqiqwCi_VzcXcj3/);
}
#search form {
margin: 0;
padding: 0;
}
#search fieldset {
margin: 0;
padding: 0;
border: none;
}
#search p {
margin: 0;
font-size: 85%;
}
#s {
margin-left:0px;
float: left;
width:231px;
padding: 6px 2px 6px 5px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXnsj3dc63yiEPPqO-mPqZS69eY6jTO7HqNVJBF8QzpkLonPkNAD7_PV_JtwxUMURP7tThDHvGpXEDhIO_6oqKDy8nVeNjGLkUhbLvtwvPU9bEjtHRO5JAA6nXiZnloCvRpwmGJBzjaX7X/s1600/sform.png) no-repeat;
border:none;
font: normal 100% &quot;Tahoma&quot;, Arial, Helvetica, sans-serif;
color:#C6C6C6;
}
#searchsubmit {
width:57px;
float: left;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg40WduWb5ZTFToNZVrYSDPkBwwAfW-uSBVzhMi5CYUGa2Bz3ie7UL8KKkDRlU3-1DiI6gSHeH4zdap350w1_HaxUSRUn8RTKJ7YhJXeNOkGRGoSr6ETM8uxBhrnXI7sluW2nekrH0c_IFg/);
border:none;
font: bold 100% &quot;century gothic&quot;, Arial, Helvetica, sans-serif;
color: #FFFFFF;
height:28px;
margin-left:5px;
}
</style>
Kode 2 CSS
<style type='text/css'>
div#search { background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhFXWJyepBi3LRuj5qSJ494nkcdlrSeBhIASAOfNCItQKWLXdwwTQmXr62P2Zt7dO1-_JZJ5oyvcFQL4nxEejKN34SSOL253H75A-_BYFCRxvxIbioXJcNea6vTBMebnIC9md4CS5N4P1i8/") no-repeat scroll left top;margin: 0; width: 320px; height: 44px; }
div#search form { height: 44px; }
div#search form p { display: block; margin: 0; padding: 14px 0 0 30px; }
div#search form p input { width: 285px; border: 0; background: transparent none; color: #ffffff; }
</style>
Setelah dipilih salah satu kode di atas, simpan template, kembali kemenu awal, pilih ADD GADGET lalu PilihHTML JavaScript. Pilih salah satu dari kode HTML di bawah ini.

Pilih Kode 1 HTML (jika kamu memasang Kode 1 CSS)
<div id='search'>
<form id="searchform" action="http://YOURBLOG.blogspot.com/search" style="display:inline;" method="get">
<input id="s" name="q" type="text" value=""/>
<input id="searchsubmit" value="" type="submit"/>
</form>
</div>
Pilih Kode 2 HTML (jika kamu memasang Kode 2 CSS)
<div id='search'>
<form action="http://YOURBLOG.blogspot.com/search" id='search form' method='get'>
<p><input id='searchform' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;Type your search here...&quot;;}' onfocus='if (this.value == &quot;Type your search here...&quot;) {this.value = &quot;&quot;}' type='text' value='Type your search here...'/></p>
</form>
</div>
Perhatian : Jika kamu memilih Kode 1 CSS , maka kamu harus Pilih Kode 1 HTML, begitupun sebaliknya. Dan ganti kata yang berwarna merah dengan URL blog anda.

Mendaftarkan Blog Ke Yandex Untuk Meningkatkan Pengunjung Dari RUSIA


Mendaftarkan Blog ke Yandex untuk meningkatkan pengunjung dari Rusia
Banyak cara agar blog kita dibanjiri pengunjung, bahkan pengunjung dari luar negri, di Rusia Yandex merupakan Mesin Penelusur No.1 loh... Mbah Google,Yahoo,dll berada diposisi bawah, nah oleh sebab itu apa salahnya kalo blog kita ikut nangkring di Yandek, Ya biar orang2 rusia nyasar ke blog kita, yang penting rame pengunjung ,,,hehe, Caranya Mudah sob ,,

1. Sobat tinggal buka situs Yandex
2. Isi URL blog sobat. Isi Code Captcha. dan Klik Add

Terlebih dahulu sobat ganti bahasanya ke bahasa inggris biar ngerti sedikit :) , terdapat di bagian bawah

Beres deh sob ,, mudah bukan ??? OK sekin posting kali ini tentang Mendaftarkan Blog ke Yandex untuk meningkatkan pengunjung dari Rusia . Semoga dapat membantu ya

CARA MEMBUAT BLOG MENJADI VALID HTML5

"Apa sih keuntungan menggunakan menjadikan blog Valid HTML5 ?"
Kalau kata si Irvan blog yang Valid HTML5 katanya lebih SEO Friendly dan lebih cepat, kalau menurutku sih mengikuti perkembangan jaman aja alias ikut-ikutan.

Ok dan ini adalah masalah dan cara mengatasi Blog agar Valid HTML5 :

1. Masalah yang mirip kayak gini :
Cara agar blog Valid HTML5, zone-uchiha.blogspot.com, Uchiha Melvin, Uchiha Community, DeezClan
Cara mengatasinya :

  • Ubah aja kode seperti ini :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

  • Dengan kode :
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>

  • Lalu ubah code <html> dan </html> menjadi huruf besar yaitu : <HTML> dan </HTML>


2. Untuk masalah yang kayak gini :
Cara agar blog Valid HTML5, zone-uchiha.blogspot.com, Uchiha Melvin, Uchiha Community, DeezClan
Cara mengatasinya :

  • Hapus aja kode yang mirip dengan ini :
<b:include name='quickedit'/>
atau
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' height='18' src='http://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
</a>
</span>
</b:if>
</b:includable>

3. Untuk masalah yang kayak gini :
Cara agar blog Valid HTML5, zone-uchiha.blogspot.com, Uchiha Melvin, Uchiha Community, DeezClan

Cara mengatasinya :

  • Hilangkan aja kode imageanchor pada tag img.
  • Hilangkan aja kode border pada tag img.
  • Terus tambahin kode alt di setiap tag img.

4. Untuk masalah yang mirip seperti ini :
Cara agar blog Valid HTML5, zone-uchiha.blogspot.com, Uchiha Melvin, Uchiha Community, DeezClan
Cara mengatasinya :
  • Hapus aja kode <b:include data='blog' name='all-head-content'/>

Mungkin hanya segitu yang bisa saya sampaikan, dan bila ada pertanyaan, silahkan berkomentar saja..
Terimakasih..

Cara Membuat CSS Border Triangle



CSS ini paling saya sering pakai dan saya suka gabungkan dengan elemen :before dan :after cuma saya suka kelupaan kode-kodenya, oleh karena itu saya postkan sebagai dokumentasi di blog ini biar tidak bolak-balik search tentang CSS Border Triangle. referensi css ini saya baca dari hompimpaalaihumgambreng.

1. Pmbentukan Triangle(Segitiga)
bisa dilihat pada demo Div dibawah ini:

Div diatas terbentuk dengan css style dibawah ini:
.coba {
  width:0px;
  height:0px;
  border-width:150px;
  border-style:solid;
  border-color: red green blue yellow;
}

dengan kode html :  
<div class="coba">
</div>
Untuk ukuran dari bordernya bisa kamu atur pada kode css border-width, jika belum mengerti pembentukan tampilan dari css triangle ini bisa di ilustrasikan dengan gambar dibawah ini:
CSSTriangle

2. Menghilangkan sebagian atau semua Border color 
kamu juga bisa membuat tampilan lain menggunakan css border triangle seperti ini :
dengan menambahkan kode transparent pada border-color css stylenya untuk menghilangkan bagian yang diinginkan :

.coba2 {
  width:0px;
  height:0px;
  border-width:50px;
  border-style:solid;
  border-color: black black black transparent
}

Juga seperti ini tinggal kreasikan pemilihan warna dan transparent -nya.
.coba3 {  width:0px;  height:0px;  border-width:50px;  border-style:solid;  border-color: #fc0 #fc0 transparent #fc0}

oke cukup sampai sini saja
semoga artikel ini bermanfaat untuk anda, terimakasih :)

CARA MEMPROTEKSI CSS BLOG


Miris ngelihat banyaknya blog-blog teman yang di Plagiatin sama Plagiator. Karena itulah saya buat postingan ini, kalau di copas sertakan sumber yah ^_^. Ikutin Step by Step :)

Sebelum memulai, kamu harus menyiapkan sebuah hostingan, Saya sarankan gunakanGoogleCode karena servernya cepat. Jangan gunakan hostingan gratisan, servernya suka naik turun soalnya :)


1. Compress terdahulu CSS blog anda dihttp://www.cssdrive.com/index.php/main/csscompressor
CSS Drive

2. Ambil kode CSS mu, lalu encrypt di http://tools.irvankadhafi.com/jsencrypt/, Sebelum di encrypt jadikan css mu menjadi HTML seperti ini
<style>Isi CSS blog mu</style>
Jika masih gak ngerti ini aku kasih contohnya. Misalkan css blogmu
body{background:url(blablabla);font-family:verdana}
#wrapper{border:2px solid #000;color:#fff;border-radius:8px}
Dijadikan HTML, maka :
<style>body{background:url(blablabla);font-family:verdana}#wrapper{border:2px solid #000;color:#fff;border-radius:8px}</style>
3. Setelah di encrypt, copy hasil encrypt itu ke notepad, dan simpan dengan format .js  misalnya cssku.js (Bisa juga tanpa format)
4.  Upload file yang disimpan itu ke GoogleCode
5. Copy link js nya, lalu jadikan linker, seperti ini
<script src='link-js-kamu' type='text/javascript'>
6. Setelah itu taruhlah linker tersebut diatas html </head>
7. ^_^ Blog anda sudah terproteksi

Jika ada css yang tidak bekerja setelah anda proteksi, lebih baik css itu tidak usah ikut di encrypt :)

NB : Walaupun kamu sudah memproteksinya seaman-aman pun semuanya tetap bisa dibongkar, tapi cara ini hanya untuk mengakali perbuatan Plagiator agar tidak gampang menyuri css anda ^_^

ANIMASI LOADING BLOG DENGAN CSS KEYFRAMES



CSS


A. Animation 1 (Bounce and Rotate efek) :
Anda bisa lihat contohnya di sini  : "http://skynet-fordeon.blogspot.com/"
Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :
@-webkit-keyframes WAKloading{
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;}
}
3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!
;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s
4.Sehingga nantinya jadi seperti ini :
#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 4s;animation:WAKloading 3s;-o-animation:WAKloading 3s}
5. Save Template!

B. Animation 2 (Earthquake Effect) :
Bisa dilihat contohnya di sini : "http://simple-ware.blogspot.com/"
Untuk menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :
@keyframes WAKloading{
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);}
}
3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!
;-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;
4. Sehingga hasilnya nati jadi seperti ini :
#outer-wrapper {-webkit-animation:WAKloading 3s;-moz-animation:WAKloading 3s;-ms-animation:WAKloading 3s;animation:WAKloading 3s;-o-animation:WAKloading 3s;}
5. Save Template

C. Animation3 ( Sliding Effect ) :
Bisa anda lihat di sini : "http://dodgerhack.blogspot.com/"
Untuk Menggunakannya :

1. Buka Blogger => Template => Edit HTML => Klik Expand Template Widget
2. Cari kode ]]></b:skin> lalu letakkan kode dibawah ini diatas kode tadi! :
@-webkit-keyframes WAKloading{from{-webkit-transform:translate(-1000px,0px);opacity:0}
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;}}
3. Cari kode #outer-wrapper kamu. lalu sisipkan kode berikut kedalamnya!
animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;
4. Sehingga menjadi seperti ini :
#outer-wrapper {animation:WAKloading 2s;-webkit-animation:WAKloading 2s;-o-animation:WAKloading 2s-moz-animation:WAKloading 2s;-ms-animation:WAKloading 2s;animation:WAKloading 2s;}
5. Save Template !