Jumat, 17 Februari 2012

TweetThis Button

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 sobat

Langkah 3

Karena Sobat menggunakan ini sebagai header Sobat, 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 dengan dialog "apakah ingin tetap mempertahankan widget atau menghapusnya" kemudian tekan hapus widget.

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.

Sumber :
http://mwcrew10.blogspot.com/2012/01/spritely-jquery-animated-plugin-for.html

0 komentar:

Posting Komentar

.:Tutorial DHTML DLL:.

Tutorial tentang Dhtml scripts, Jquery plugins ,Javascript, CSS, CSS3, Html5 Library dll dan penerapannya pada Website, langsung aja kunjungi Website nya dan yang nggak kalah penting Free Yaa !!

.:distrowatch:.

Pengin Banyak tau tentang distro linux Langsung Aja Kunjungi DistroWatch Hmmm, banyak banget distronya, Download dan Pasang Linuxnya Lets Go Boss !!

.:jQuery Tutorial:.

Tutorial jQuery Widget ada disini semua Langsung Ke TKP Boss !!

.:Hirens Boot CD:.

Hiren's Boot CD cukup ampuh untuk membuat Clonning Atau Copy windows, dan banyak tool yang sangat berguna bagi para teknisi komputer maupun yang masih pemula silahkan Download filenya Disini kalo mau lihat tutorialnya membuat Flashdisc Bootable Disini Lumayan buat nambah ilmu dan Tool, Langsung aja Boss !!

Hiren’s BootCD

Bookmark and Share