Spritely Jquery Animated Plugin for Blogger



Spritely adalah jQuery plugin yang dibuat oleh Artlogic untuk menciptakan karakter dinamis dan animasi latar belakang murni HTML dan JavaScript.
Plugin ini sederhana dan ringan, dengan metode sederhana untuk membuat sprite animasi seperti burung yang Anda lihat pada halaman ini, dan latar belakang bergeser dinamis.
Anda bisa lihat di website ini untuk Demo dan situs beberapa lainnya menggunakan Spritely dalam Galeri mereka.

Tapi apakah sobat pernah melihat seorang Blogger dengan templatenya yang terdapat fasilitas seperti ini? Tentu sangat jarang bukan? ini disebabkan karena blogger-blogger tersebut belum tahu bagaimana cara memasangnya di dalam template mereka. Oleh  karena itu MWcrew membuat postingan ini untuk sobat-sobat blogger yang belum tahu cara membuat Animasi Spritely dengan Jquery.

Langsung saja simak langkah-langkah berikut :

Bagaimana mengintegrasikannya kedalam Header template sobat?

Langkah 1

Klik Desain-> Edit html
Tepat di atas kode </head> paste kode di bawah ini. (Gunakan Ctrl + f untuk menemukan kode tersebut)
<script src='http://www.spritely.net/lib/jquery/1.3.2/jquery-1.3.2.min.js' type='text/javascript'/>
    <script src='http://www.spritely.net/scripts/jquery-ui-1.7.2.spritely.custom.min.js' type='text/javascript'/>
    <script src='http://www.spritely.net/lib/jquery/1.3.2/plugins/jquery.spritely-0.2.1.js' type='text/javascript'/>
<script src='http://www.spritely.net/scripts/main.js' type='text/javascript'/>

Langkah 2

Cari kode ]]></ b: skin> taruh kode css dibawah ini diatas kode ]]></ b: skin>
#stage {
top: 0px;
left: 0px;
z-index: 100;
}
.stage {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-width: 900px;
height: 359px;
}
#bg {
background: #aedfe5 url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvwPnvGrI/AAAAAAAAAFg/Qbbq-4zMPBc/s1600/sky1.png) 0 0 repeat-x;
}
#clouds {
background: transparent url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvtGzYMYI/AAAAAAAAAFU/E5A0QizNsQ4/s1600/cloud.png) 305px 102px repeat-x;
}
#hill2 {
background: transparent url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQvuX_kU8I/AAAAAAAAAFY/4a_VXNaGhXs/s1600/hill2.png) 0 263px repeat-x;
}
#hill1 {
background: transparent url(http://4.bp.blogspot.com/_Gs8qUUWSOoc/TKQvvpNqviI/AAAAAAAAAFc/Y_h0NLgEDVI/s1600/hill-with-windmill.png) 0 160px repeat-x;
}
#bird {
background: transparent url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQvslDVPRI/AAAAAAAAAFQ/vQ-mvk1qN6c/s1600/bird-forward-back.png) 0 0 no-repeat;
position: absolute;
top: 150px;
left: 65px;
width: 180px;
height: 123px;
z-index: 2000;
cursor: pointer;
}

#dragMe {
position: absolute;
top: 290px;
left: 57%;
z-index: 150;
background: url(http://4.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5Oy1NJRI/AAAAAAAAAFs/g-j77pIBQgc/s1600/dragme_text.png) 0 0 no-repeat;
margin-left: -50px;
width: 100px;
height: 65px;
}
#slider {
display: none;/* show dynamically for non smart-phones or ipad */
position: relative;
z-index: 200;
height: 14px;
width: 100%;
background: url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5PZDTE0I/AAAAAAAAAFw/ogpblya-v0Q/s1600/slider_bg.png) 0 0;
}
#slider.ui-corner-all,
#slider .ui-corner-all {
-moz-border-radius: 0;
-webkit-border-radius: 0;
}
#slider.ui-widget-content {
background: url(http://1.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5PZDTE0I/AAAAAAAAAFw/ogpblya-v0Q/s1600/slider_bg.png) 0 0;
border: 0;
}
#slider .ui-state-default, #slider.ui-widget-content .ui-state-default {
background: url(http://2.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5NtTB0YI/AAAAAAAAAFk/2xojrhrue20/s1600/slider_handle.png) 0 0 no-repeat;
width: 23px;
height: 30px;
border: 0;
}
#slider.ui-slider-horizontal .ui-slider-handle {
position: absolute;
top: -9px;
cursor: pointer;
outline: none;
height: 23px;
}
#bird2 {
background: transparent url(http://3.bp.blogspot.com/_Gs8qUUWSOoc/TKQ5Od-6f6I/AAAAAAAAAFo/nOGk-5bkG3E/s1600/bird-forward-back-sm.png) 0 0 no-repeat;
position: absolute;
top: 70px;
left: 155px;
width: 140px;
height: 96px;
z-index: 1800;
cursor: pointer;
}
Simpan template

Langkah 3

Karena Sobat menggunakan ini sebagai header dalam template, Maka Sobat perlu untuk menghapus widget di header. bagaimana melakukannya?
Masuk ke Edit html Cari <head> dan hapuslah kode di antara kode <head> dan </head>
<head>
.........
.........
</head>
Maka sobat akan diminta untuk mengkonfirmasi dengan sebuah dialog seperti ini : "apakah ingin tetap mempertahankan widget atau menghapusnya" kemudian hapus saja widget tersebut. Simpan template.

Langkah 4

Tambahkan sedikit kode dan letakkan diantara tag body, caranya cari kode <body> kemudian tambahkan kode berikut persis dibawah tag <body>
<div id="container" style="padding-top: 359px; ">
<div id="stage" class="stage"> 
<div id="tap" class="stage"></div> 
<div id="bg" class="stage"></div> 
<div id="clouds" class="stage"></div> 
<div id="hill2" class="stage"></div> 
<div id="hill1" class="stage"></div> 
</div>
<div id="bird2"></div> 
<div id="bird"></div>
Kemudian sobat sudah menambahkan kode penutup Div, Hati-hati saat melakukan ini, cari kode </body> tempatkan </div> seperti yang diitunjukkan di bawah ini :
</div>
<script type='text/javascript'>
window.setTimeout(function() {
document.body.className = document.body.className.replace(&#39;loading&#39;, &#39;&#39;);
}, 10);
</script>
</body>
Simpan Template sobat, jika tidak terdapat eror maka sobat telah berhasil melakukannya.
6 Comments
Related Post

Join the Discussion!

Anonymous
June 01, 2013 9:49 PM | Delete comment

Mу brothеr recοmmenԁed I may like this blоg.

He ωas onсe tοtally right.
This publish tгuly maԁe my dаy.
You cann't imagine just how so much time I had spent for this info! Thank you!

Check out my web site; reputation management

Dont give a spam please!
Untuk menyisipkan video, gunakan
Untuk menyisipkan gambar, gunakan
Untuk menyisipkan kode, gunakan
Untuk menyisipkan beberapa baris kode, gunakan
Untuk menyisipkan catatan, gunakan
Untuk menciptakan efek teks tebal gunakan