Widget Kereta Api Berjalan Di Blog

Naik kereta api...tut...tut...tut, hehehe :):) kreasi unik, orisinil dan dinamis dari MonosBit kali ini mengenai widget kereta api (train). Pasti sobat bertanya-tanya widget yang gimana ya... koq bisa.... bisa sob, coba lihat contohnya di postingan artikel ini... Gimana unik-kan... Oke dech...Widget ini menggunakan trik dasar kode HTML dan sedikit olahan animasi gambar. So.. buat moz's blogger yang pengen menghias blognya dengan widget kereta api ini monggo disimak cara pemasangannya.

Catatan :
Gambar kereta api dan gambar pendukung rencananya akan disediakan dalam beberapa model set kereta api, so... buat yang hobby sama kereta api stay tuned terus di postingan artikel ini untuk melihat pilihan gambar set kereta api lainnya. Jika sobat blogger ingin request set kereta api tertentu atau set kereta api tanpa ada watermark monozcore ataupun dengan watermark yang sobat inginkan, monggo hubungi saya lewat email.

Cara Pemasangan :

Klik "More Options" selector box kemudian klik "Template" setelah itu pilih "Edit HTML".

Cari kode </Body> pada template blog (tekan tombol keyboard CTRL+F untuk menampilkan kotak pencarian di browser dan mempercepat pencarian) kemudian copy kode di bawah ini dan paste di atas kode </Body> tersebut atau taruh di kotak gadget blog.

<script>
if(typeof(jQuery) == 'undefined'){document.write("<scr" + "ipt type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></scr" + "ipt>");}
</script>
<script>
var trainLoco1='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7bNflAjUHv5NeHyeezeq8fbYmfHyBqR2p1Smf7UZDMK-LeRK_bsMl4yrBOOWj4Vg8nDeq_pnAP6mmOck36sqSKAlWBXOfLxoiz_U4SZN6X2Sacj2Zds3jNjq1COGvs5sf-7dDd-Es5wWQ/s1600/kereta_api_monosbit.png';
var trainLoco2='https://lh4.googleusercontent.com/-XGVa4obnGBs/T2Bj-S26H4I/AAAAAAAABa0/yvgGhKN-M1I/s800/train-set1.gif';
var trainStation='http://lh4.googleusercontent.com/-mxFDN0t_jFc/T2BT2L8fENI/AAAAAAAABaY/_pmxIlcP7BU/s800/train-set3.png';
var trainLight='http://lh5.googleusercontent.com/-E8TDvyv-KJM/T8-YZEV9huI/AAAAAAAAB1Y/CV6uj36KXLo/s800/train_cargo_set4.gif';
var trainBridge='http://lh3.googleusercontent.com/-YnWPATFN4ig/T2CICLEectI/AAAAAAAABbI/y1-Wsr50aiQ/s800/train-set2.png';
</script>
<script>
var trainSetSlc='false';
var bgEffectTrainSet;
var trainSection=1;
var trainLoco=trainLoco1;
mozTrainBGWidth  = $(window).innerWidth()+500;
mozTrainImgHTML  = '<img id="mozTrainSet1" src="'+trainLoco+'" border="0" style="margin:0;position:fixed;bottom:0;left:'+mozTrainBGWidth+'px;z-index:+99;">';
mozTrainImgHTML += '<img id="mozTrainSet2" src="'+trainBridge+'" border="0" style="margin:0;position:fixed;bottom:0;left:50%;z-index:+999;">';
mozTrainImgHTML += '<img id="mozTrainSet3" src="'+trainStation+'" border="0" style="margin:0;position:fixed;bottom:0;left:10%;z-index:+9999;">';
mozTrainImgHTML += '<img id="mozTrainSet4" src="'+trainLight+'" border="0" style="margin:0;position:fixed;bottom:0;left:25%;z-index:+9999;">';
$('body').append(mozTrainImgHTML);
if(trainSetSlc=='false'){animBgTrainSet1();trainSetSlc='true';}
function animBgTrainSet1(){
mozTrainBGWidth=$(window).innerWidth()+500;
mozTrainBGWidth=mozTrainBGWidth+'px';
$('#mozTrainSet1').animate({'left':'20'}, 5000);
$('#mozTrainSet1').delay(2000).animate({'left':'-700'}, 5000, function(){$(this).css({'left':mozTrainBGWidth});});
if(trainSection==1){trainSection=2;$('#mozTrainSet1').attr('src',trainLoco2);
}else{trainSection=1;$('#mozTrainSet1').attr('src',trainLoco1);}
bgEffectTrainSet = setTimeout(function(){animBgTrainSet1()},13000);
}
</script>

- Keterangan :