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 htmlTepat 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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR9qbvPTIyYxOBh9iCegLeS-OS4Fq8Gj6yZ3nXPmbB5JiYSrvkgbumKB3xtsVf-gHn_jH5rjGjR91cfiX3uGaYxu2VVDHs7EdEZbrbZjAVsD6igFA02foG1x7Lwl6ULvFW3A1neX2ZKy6b/s1600/sky1.png) 0 0 repeat-x;
}
#clouds {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlTnVwesDFAaRfF6OZ4Zvv8QVzO-gfLXfHAdbPlOFjriRjSwFMJZxbj7qcLLtdhyclSlOeI-N_ulELG4aVfYz8bi5J7OqeSud4dFvt18vqGrQQ4FUeXT6C8HUv5WjyGycUIYEK5dU3Ujbd/s1600/cloud.png) 305px 102px repeat-x;
}
#hill2 {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjrRraPLGcp2JbdwTjUpuP59zRK70w3j05F-AcyjU0y2SrSDlSNX2Sgz9hl9IxCymOrhS04FOQEaHwbpE-06eUP_0JGs_7X2Up0TzPQ2kyDLIFzj9XmdHHM-5qcPtUQ64zxeS8670iM7ZGw/s1600/hill2.png) 0 263px repeat-x;
}
#hill1 {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi962YRTGlDaD_RKtyMBpFNNro0RfW_Ijdesdn5lGOGNXGWfu1lD-W4sDweThu_RmeWAiOm14KFsohMg1Vn13hEyebmmVkM_S3Ja1RNF4d6UT2Jo_-MvNe-jXLbyKFKR2Py8EvgVfhyZ8r6/s1600/hill-with-windmill.png) 0 160px repeat-x;
}
#bird {
background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqCB_M3ctCwO7-p84cH0ZB8FvsqqkdsWkzHxVUb9YKAJ8t0Et2aL_p5zmzpr3dgbqbHdv5AP6S-dXtAD7mmzYgd94uUeP-PgnykJJSTD48-5Vjrn63lZjuaPWaA54EW1CZbl0B637QmcW5/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQLPwC32VW9h5s7n6LhXk5KspBRTlbiZle0WnPIR16IL0vW3qRgr8xCFqSvqieFmJ_DFcun7zOQHSPcb2hEJBjtk8voqCmLBRQeg6AARH0cg0kC2Z2Hd4pmv-n44Lwz1cJ12E3YtrZfTcA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIMhdI7510cZ16_9GTxINsUlQZjh3rH5U8ECTkh2Wab-dyQq8zhTTXpntzN9oJxXS_bJr-pKC0D72GfXsENOMdWAXECsKpp4lycPbu_xuuaWwfC39KUPoNBH9y4rhWjUlHO0NjcbmIqBg/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmIMhdI7510cZ16_9GTxINsUlQZjh3rH5U8ECTkh2Wab-dyQq8zhTTXpntzN9oJxXS_bJr-pKC0D72GfXsENOMdWAXECsKpp4lycPbu_xuuaWwfC39KUPoNBH9y4rhWjUlHO0NjcbmIqBg/s1600/slider_bg.png) 0 0;
border: 0;
}
#slider .ui-state-default, #slider.ui-widget-content .ui-state-default {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAs1_g3GVp_g7oj6jS2vQJ570E8MVL530RkuOvJLdf1VR_Q2rPZQLl7eT4C0kjWF7NWJOnfXctrY_3ilmC72N9sJ93z41bzt1llq0w3_Mh9T1kVpUE6djpTOGkyGfW34CyzOFaLVXk7kdf/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSL1sf4hR9e_Mbru-9_jzodXpbBGkVA01PNsMs9u89DzQ35QkJDrlQs6wZj7DTB_Cj6K7FBgUBn4ADsxFLqsRY7Z4LV8tFQaN0m7MRwGTv3a0NVag8dgNECuLBVR0SstK0r2vAfBPYotBv/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>
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('loading', '');
}, 10);
</script>
</body>
Simpan Template sobat, jika tidak terdapat eror maka sobat telah berhasil melakukannya.
