Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse

Kali ini saya sedikit berbagi tentang cara membuat gambar dalam posting blog berputar dan membesar saat di sentung oleh cursor, untuk contohnya coba sobat arahkan cursor ke gambar Naruto di atas, maka gambar akan berputar dan membesar. Apabila sobat blogger sekalian berminat untuk mencoba silakan ikuti langkah-langkah berikut ini:

1. Seperti biasa sobat harus login dulu di akun blog sobat

2. Pilih rancangan / desing dan klik edit HTML dan lanjutkan

3. Centang "Expand Template Widget" untuk menghindari apabila terjadi kesalahan

4. Sobat cari kode </head>

5. Setelah ketemu sobat copy paste code di bawah ini tepat di atas kode </head>

 <style>#mazzpuji img{float:right;
background:#2b2b2b;
-webkit-border-radius:100px;
-moz-border-radius:100px;
border-radius:100px;
border:2px solid #2b2b2b;
box-shadow:1px 1px 20px #000;
-moz-box-shadow:1px 1px 20px #000;
-webkit-box-shadow:1px 1px 20px #000;
margin:0px;
-o-transition:margin-left 1.5s ease-in 2s,margin-top 1.5s 2.5s,
-o-transform 1.5s ease-out 1s,opacity 2s ease-in;
-moz-transition:margin 1.5s ease-in 2s,
-moz-transform 1.5s ease-out 1s,opacity 2s ease-in;
-webkit-transition:margin 1.5s ease-in 2s,
-webkit-transform 1.5s ease-out 1s,opacity 2s ease-in}
#mazzpuji img:hover{
opacity:0.6;
-o-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-moz-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-webkit-transform:rotate(1460deg) scale(1.8) translate(0px,0px);
-o-transition:margin-left 0.5s ease-in 0.4s,margin-top 0.5s,
-o-transform 0.5s ease-out 1.4s,opacity 3s ease-in 4s;
-moz-transition:margin 1.5s ease-in 0.4s,
-moz-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
-webkit-transition:margin 1.5s ease-in 2.4s,
-webkit-transform 2.5s ease-out 1.4s,opacity 3s ease-in 4s;
box-shadow:1px 1px 15px #33F;
-moz-box-shadow:1px 1px 15px #33F;
-webkit-box-shadow:1px 1px 15px #33F;
}</style>

6. dan sobat klik save / simpan template.

Langkah selanjutnya untuk penenpatan gambar dalam postingan.

1. Sobat harus menambahkan kode  <div id="mazzpuji"> sebelum url gambar dan jangan lupa di tutup dengan kode </div> contoh seperti di bawah ini:

<div id="mazzpuji">
<a href="http://http://mazzpuji.blogspot.com/2013/04/cara-membuat-gambar-berputar-dan.html/"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbAz-qZ-2A1ZbwYcOFr-eSwvkPG0ROIiBmyr_2lsmmHv2dF8KWXyiQnrD5mrlHnRRgITpSaXjfr864Dpvj1XH98hLRqHvwZEfIN-hvVufd_JSswB4Jo6nkJ7d16nTxL6806nMZ2ojikMP_/s200/naruto+dont+copy.png" /></a></div>

keterangan:

1. kode berwarna merah adala kode pembuka dan penutup
2. kode berwarna hijau silakan sobat ganti dengan URL blog Sobat dan URL gambar yang ingin Sobat pasang di dalam postingan.
3. Setelah semuanya selesai klik publikasikan. 

Demikianlah tips "Cara Membuat Gambar Berputar Dan Membesar Saat Disentuh Oleh Mouse".

Semoga bermanfaat Sobat.

Widget Slide Panel With CSS & jQuery Effect

Tutorial Belajar Blog -Membuat Widget Slide Panel With CSS and jQuery Effect Inspirasi ini didapat dari tetangga blogger kita ut2a-4down blogmates. Ini adalah widget yang sederhana, namun cukup efektif untuk sekedar meringkas bagian-bagian yang biasanya dianggap terlalu panjang atau terlalu lebar. Kamu bisa menggunakan widget ini untuk meletakkan foto, video, daftar teman atau apapun, yang menurutmu terasa sedikit mengganggu penampilan.

Untuk Contohnya sobat bisa lihat langsung pada postingan ini, perhatikan pada bagian Menu diatas.

Jika sobat berminat dan ingin membuatnya, ikuti langkahnya sebagai berikut :

1. Login ke akun Blogger sobat
2. Klik Perancangan >> Elemen Laman
2. Klik Tambah Gadget
3. Pilih HTML/Javascript
4. Masukan kode berikut :

<style type="text/css">
/*
Visit: http://mazzpuji.blogspot.com/
*/
#paneloktri {display:block;}
#panel {background-color:#CF4C23;border:2px solid #CF4C23;border-width:2px 2px 0 2px;overflow:auto;margin:0;padding:20px 15px 15px 15px;color:#111;
font:normal 12px "Consolas","Courier New",Courier,mono,serif;-webkit-box-shadow:inset 0 0 7px #222;-moz-box-shadow:inset 0 0 7px #222;box-shadow:inset 0 0 7px #222;display:none;}
.tombolpanel {position:relative;cursor:pointer;text-shadow:1px 1px 2px #000;padding:7px 15px;background-color:#333;border-top:3px solid #CF4C23;color:#e5e5e5;text-align:center;font:bold 14px Times,Sans-Serif;font-style:italic;-webkit-box-shadow:0 -1px 2px #222;-moz-box-shadow:0 -1px 2px #222;box-shadow:0 -1px 2px #222;-webkit-border-radius:0 0 14px 14px;-moz-border-radius:0 0 14px 14px;border-radius:0 0 14px 14px;}
.tombolpanel:hover {color:#ccc;}
.tombolpanel:after {content:'';position:absolute;top:100%;margin-top:-10px;left:5%;width:0;height:0px;display:block;border-width:20px;border-style:solid;border-color:#333 #333 transparent #333;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
     $('.tombolpanel').click(function() {
          $('#panel').slideToggle('slow');
          $('.tombolpanel span.in').toggle();
     });
});
</script>
<div id="paneloktri">
<div id="panel">

... ISI KONTEN DI SINI ...

</div>
<div class="tombolpanel">
<span class="in">Open Panel</span>
<span class="in" style="display:none;">Close Panel</span>
</div>
</div>

5. Klik Simpan, dan lihat hasilnya. :D

KET ::
- Kode yang Saya beri warna hijau adalah JQuery. Sebelum menambahkan widget ini sebaiknya periksa dulu isi template anda. Jika template anda sudah dilengkapi dengan JQuery, maka buang kode tersebut dari widget.

Sobat juga bisa meng-otak-atik script sesuai kehendak sobat asalkan sobat mengerti. Semoga berhasil dan bermanfaat.

Animasi Loading Page Blog dengan jQuery

Cara Membuat Animasi Loading Page Blog dengan jQuery, Merupakan Tutorial edit blog tidak beda jauh dari tips sebelum nya Cara Membuat Animasi Loading Page di Blog dan  , Untuk membedakan coba sendiri ataupun liat dari gambar yang sudah ada.

Sekilas Tentang  Animasi loading page memberikan tampilan yang penuh dan sesuai, artinya setelah loading page selesai, maka animasi loading juga selesai. Waktu loading page bisa diukur dengan adanya animasi ini, karena animasi ini menggunakan hitungan persen.

Script animasi loading page ini saya dapat dari om Google yang merupakan versi awal dari script tersebut. Untuk membuat dan memasang animasi loading page pada blog Anda, langsung saja ikuti tutorial/panduan di bawah.

1. masuk ke Design > Edit HTML lalu cari kode ]]></b:skin> dan letakan kode berikut ini diatas ]]></b:skin>.

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




2. kemudian cari kode </head> dan letakan kode berikut ini di atasnya.



<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js' type='text/javascript'/>
<script src='http://sektim-project.googlecode.com/files/loadingpage.js' type='text/javascript'/>



3. Untuk kode yang diberi warna merah (jQuery), tidak usah dipasang lagi jika sudah terdapat di template Anda (cukup 1 saja).
4. Selanjutnya cari kode </body> dan letakankode berikut ini di atasnya.



<script>
QueryLoader.selectorPreload = &quot;body&quot;;
QueryLoader.init();
</script>



5. Save template Anda dan coba buka blog Anda untuk melihat hasilnya.
6. Bila script tidak berfungsi silakan cek ulang apakah Anda sudah mengukuti langkah di atas dengan benar. Jika Anda sudah mengikuti semua langkah dengan benar namun scriptnya tidak berfungsi juga, berarti script tersebut bentrok dengan script yang lain.

Merubah Tanpilan Populer Post

Cara Merubah Tampilan Popular Post menjadi keren,

Widget Popular Post ini akan lebih manis lagi jika dipasang di sidebar blog. Supaya pengunjung mengetahui keberadaannya, dan supaya tampilan blog lebih cantik lagi. Daripada penasaran, mending dicek aja langsung widget popular post nya.

Berikut ScrenShotnya.

Yang dibawah ini adalah SSnya ketika salah satu popular post di sorot mouse

Berikut Ini Langkah Langkah Untuk Membuat Nya :

1. Login akun blogger sobat.
2. Menuju Ke menu Tata Letak
3. Sebelumnya Tambahkan Widget Popular Post Terlebih Dahulu pada blog sobat dengan cara Klik Menu Tata letak, Tambah Gadget, Popular post / Entri Popular, Pilih 7 Hari Terakhir, Centang Thumbnail gambar Dan Jangan Centang Cuplikan ! Jika sudah, simpan
4. Kemudian, Tambah gadget kembali, Pilih Html Javascript.
5. Masukan Semua kode dibawah ini.
<script language='Javascript'>document.write(unescape('%3C%73%74%79%6C%65%3E%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%2E%69%74%65%6D%2D%74%69%74%6C%65%7B%64%69%73%70%6C%61%79%3A%6E%6F%6E%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%7B%62%61%63%6B%67%72%6F%75%6E%64%3A%20%6E%6F%6E%65%20%72%65%70%65%61%74%20%73%63%72%6F%6C%6C%20%30%20%30%20%74%72%61%6E%73%70%61%72%65%6E%74%3B%66%6C%6F%61%74%3A%20%6C%65%66%74%3B%6C%69%73%74%2D%73%74%79%6C%65%3A%20%6E%6F%6E%65%20%6F%75%74%73%69%64%65%20%6E%6F%6E%65%3B%6D%61%72%67%69%6E%3A%20%33%70%78%20%21%69%6D%70%6F%72%74%61%6E%74%3B%70%61%64%64%69%6E%67%3A%20%30%20%21%69%6D%70%6F%72%74%61%6E%74%3B%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%61%63%6B%67%72%6F%75%6E%64%3A%23%66%65%66%65%66%65%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%30%20%31%70%78%20%31%70%78%20%23%33%65%37%38%62%33%3B%66%6C%6F%61%74%3A%6C%65%66%74%3B%6D%61%72%67%69%6E%3A%30%20%36%70%78%20%30%20%30%3B%70%6F%73%69%74%69%6F%6E%3A%72%65%6C%61%74%69%76%65%3B%6F%76%65%72%66%6C%6F%77%3A%68%69%64%64%65%6E%3B%2D%77%65%62%6B%69%74%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%2D%6D%6F%7A%2D%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%31%30%30%70%78%3B%20%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%7D%0A%2E%50%6F%70%75%6C%61%72%50%6F%73%74%73%20%75%6C%20%6C%69%20%69%6D%67%3A%68%6F%76%65%72%20%7B%70%61%64%64%69%6E%67%3A%33%70%78%3B%62%6F%72%64%65%72%2D%72%61%64%69%75%73%3A%35%70%78%3B%2D%6F%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%20%20%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%66%6F%72%6D%3A%73%63%61%6C%65%28%31%2E%32%29%74%72%61%6E%73%6C%61%74%65%28%30%70%78%29%3B%2D%6F%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%77%65%62%6B%69%74%2D%74%72%61%6E%73%69%74%69%6F%6E%3A%61%6C%6C%20%31%2E%35%73%20%65%61%73%65%3B%2D%6D%6F%7A%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%2D%77%65%62%6B%69%74%2D%62%6F%78%2D%73%68%61%64%6F%77%3A%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%62%6F%78%2D%73%68%61%64%6F%77%3A%20%30%70%78%20%30%70%78%20%35%30%70%78%20%23%35%35%35%35%35%35%3B%7D%0A%3C%2F%73%74%79%6C%65%3E%0A%3C%64%69%76%20%73%74%79%6C%65%3D%22%70%6F%73%69%74%69%6F%6E%3A%20%66%69%78%65%64%3B%20%62%6F%74%74%6F%6D%3A%20%30%70%78%3B%20%72%69%67%68%74%3A%20%30%70%78%3B%22%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%73%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%61%20%68%72%65%66%3D%22%68%74%74%70%3A%2F%2F%68%65%72%6D%61%6E%62%61%67%75%7A%2E%62%6C%6F%67%73%70%6F%74%2E%63%6F%6D%22%20%72%65%6C%3D%22%64%6F%66%6F%6C%6C%6F%77%22%20%74%61%72%67%65%74%3D%22%5F%62%6C%61%6E%6B%22%20%73%74%79%6C%65%3D%22%6D%61%72%67%69%6E%2D%74%6F%70%3A%2D%32%35%70%78%22%3E%2E%3C%2F%61%3E%0A%3C%2F%64%69%76%3E'));</script>
6. Dan kemudian simpan, dan lihat hasilnya, Semoga Membuat tampilan blog sobat menjadil lebih keren dan semoga bermanfaat :)

Animasi Loading Blog

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>

.circlewrapper { width: 98px; height: 98px; float: right; font-size: 14px; text-align: center; text-shadow: 0 1px 1px black; } .circle { background-color: rgba(0,0,0,0); border:5px solid rgba(255,0,0,0.9); opacity:.9; border-right:5px solid rgba(0,0,0,0); border-left:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 35px #ff0000; width:70px; height:70px; margin:0 auto; -moz-animation:spin1Pulse 1s infinite ease-in-out; -webkit-animation:spin1Pulse 1s infinite linear; } .circle1 { background-color: rgba(0,0,0,0); border:5px solid rgba(255,0,0,0.9); opacity:.9; border-left:5px solid rgba(0,0,0,0); border-right:5px solid rgba(0,0,0,0); border-radius:50px; box-shadow: 0 0 15px #ff0000; width:50px; height:50px; margin:0 auto; position:relative; top:-70px; -moz-animation:spin2Pulse 1s infinite linear; -webkit-animation:spin2Pulse 1s infinite linear; } .circle2 { background-color: transparent; border: 5px solid rgba(255, 0, 0, 0.9); opacity: .9; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-radius: 50px; box-shadow: 0 0 15px #ff0000; width: 90px; height: 90px; margin: 0 auto; position: relative; top: -150px; text-align: center; line-height: 90px; } @-moz-keyframes spin1Pulse { 0% { -moz-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;} 50% { -moz-transform:rotate(145deg); opacity:1;} 100% { -moz-transform:rotate(-320deg); opacity:0;} } @-moz-keyframes spin2Pulse { 0% { -moz-transform:rotate(0deg); } 100% { -moz-transform:rotate(360deg);} } @-webkit-keyframes spin1Pulse { 0% { -webkit-transform:rotate(160deg); opacity:0; box-shadow:0 0 1px #ff0000;} 50% { -webkit-transform:rotate(145deg); opacity:1;} 100% { -webkit-transform:rotate(-320deg); opacity:0;} } @-webkit-keyframes spin2Pulse { 0% { -webkit-transform:rotate(0deg); } 100% { -webkit-transform:rotate(360deg);} } .circlebg { width: 53px; height: 53px; position: relative; border-radius: 50px; -moz-animation: spin3Pulse 3s infinite ease-in-out; -webkit-animation: spin3Pulse 3s infinite linear; } .circlewrapper2 { width: 53px; height: 53px; text-align: center; border-radius: 50px; border: 3px solid rgba(0, 0, 0, 0.9); padding: 8px; background: -webkit-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%); background: -moz-radial-gradient(center, ellipse cover, #D41B00 5%,#570401 74%); } .circlewrapper3 {float:right;} .circlewrapper3 a { width: 78px; height: 78px; float: right; font-size: 14px; text-align: center; border-radius: 50px; text-shadow: 0 1px 1px black; margin-top: -50px; position: absolute; line-height: 20px; } .circle4 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; -webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); } .circle5 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -51.5px; -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); } .circle6 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -103.5px; } .circle7 { background-color: transparent; border: 1px solid rgba(0, 0, 0, 1); opacity: .9; border-top-right-radius: 50px; border-bottom-left-radius: 50px; width: 50px; height: 50px; margin: 0 auto; position: relative; top: -155px; -webkit-transform: rotate(135deg); -moz-transform: rotate(135deg); } @-moz-keyframes spin3Pulse { 0% { -moz-transform:rotate(360deg); } 100% { -moz-transform:rotate(0deg);} } @-webkit-keyframes spin3Pulse { 0% { -webkit-transform:rotate(360deg);} 100% { -webkit-transform:rotate(0deg); } } span[class*="l-"] {/*Blog Johanes-Djogzs.blogspot.com*/ height: 4px; width: 4px; background: #fff; display: inline-block; margin: 2px 2px; border-radius: 100%; -webkit-border-radius: 100%; -moz-border-radius: 100%; -webkit-animation: loader 4s infinite; -webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -webkit-animation-fill-mode: both; -moz-animation: loader 4s infinite; -moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); -moz-animation-fill-mode: both; animation: loader 4s infinite; animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415); animation-fill-mode: both;}/*Blog Johanes-Djogzs.blogspot.com*/ span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;} span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;} span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;} span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;} span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;} span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;} @-webkit-keyframes loader { 0% {-webkit-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;}/*Blog Johanes-Djogzs.blogspot.com*/ 50% {-webkit-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}} @-moz-keyframes loader { 0% {-moz-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;} 50% {-moz-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}} @-keyframes loader { 0% {-transform: translateX(-30px); opacity: 0;} 25% {opacity: 1;} 50% {-transform: translateX(30px); opacity: 0;} 100% {opacity: 0;}}/*Blog Johanes-Djogzs.blogspot.com*/ .tombol-readmore {clear:both;font-size: 14px;text-shadow: -0px 1px 1px black;} .loading:hover {-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 1);-moz-box-shadow: 0 1px 5px rgba(0,0,0,1);} .loading {line-height: 7px;margin: auto;text-align:center;width: 110px;color:#fff;-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 1px 4px rgba(0,0,0,0.6);border-bottom: 1px solid #333;border-left: 1px solid black; border-right: 1px solid #333;border-top: 1px solid black;/*Blog Johanes-Djogzs.blogspot.com*/ background: -moz-linear-gradient(top, rgba(76, 76, 76, 1) 0%, rgba(89, 89, 89, 1) 12%, rgba(102, 102, 102, 1) 25%, rgba(71, 71, 71, 1) 39%, rgba(44, 44, 44, 1) 50%, rgba(0, 0, 0, 1) 51%, rgba(17, 17, 17, 1) 60%, rgba(43, 43, 43, 1) 76%, rgba(28, 28, 28, 1) 91%, rgba(19, 19, 19, 1) 100%);/*Blog Johanes-Djogzs.blogspot.com*/ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76, 76, 76, 1)), color-stop(12%,rgba(89, 89, 89, 1)), color-stop(25%,rgba(102, 102, 102, 1)), color-stop(39%,rgba(71, 71, 71, 1)), color-stop(50%,rgba(44, 44, 44, 1)), color-stop(51%,rgba(0, 0, 0, 1)), color-stop(60%,rgba(17, 17, 17, 1)), color-stop(76%,rgba(43, 43, 43, 1)), color-stop(91%,rgba(28, 28, 28, 1)), color-stop(100%,rgba(19, 19, 19, 1)));border-radius: 14px;-webkit-border-radius: 14px;-moz-border-radius: 14px;}

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

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

Dan langkah yang terakhir, pasang kode berikut dibawah  <div id='header-wrapper'>

<div class='circlewrapper'>
<div class='circle'/>
<div class='circle1'/>
<div class='circle2'/>
</div>

Demikian tutorial yang saya buat mengenai Membuat Animasi Loading Di Header Blog,apabila anda sudah menggunakan script css pada tutorial membuat animasi loading blog, tinggal perlu lagi menambahkan css diatas , tinggal langsung saja pasang