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 :
- Login ke blog sobat...
- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5SKX1_H-65RH7h0RbJkH9tTtaoC0PBhM75yYwSO484_ru35Z8cognhjjHH81K7gVadkNrfjmyhamujK_dyroq7CyxS19Ob-e5cyf0fz82mnjU0CNtduOsupVTe_uMzvaZTvbjWvsbB7M/s800/train-set1.gif'; var trainStation='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicaeSDyDvxrwQMWLVNKIf89J9r0_5vcJgjHP5cFcJanQvVfpiJznz9VWz4K4RxKzes22-75ra_dxta4DmzPSnAaZAaSzAX3WbhMioeHlZEWLgjXKN-e0ogvECHg6y1Miy9jHldkH8L3kM-/s800/train-set3.png'; var trainLight='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOhdiw2rPXFDZRW3QcodGUbJ0v0rKmp9DX5Ele828bGm25L0zNc-BxpFwtcUdyY6c-9mWcVSCdamJhvzL8C4FOGbHMVAa1dfx3Rc-shiofNRt_4D3EIoq5n5ghcgZWFZH8Igx08sBE-gaO/s800/train_cargo_set4.gif'; var trainBridge='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3EFhWco-IDtJva709sw6vN210Kx1by3U5sNArEYCkAHrmeQ5nxFVWsUGvDhaMI6hyphenhyphen-PkOLKp_mnyXxrfbRsHSJ42oGC4FTyCUP6WkzIY19v_9bwC0iEJYV0HiIj9M66pIpA-LJlEIHx0/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 :- var trainLoco1 // link gambar locomotif kereta 1;
- var trainLoco2 // link gambar locomotif kereta 2;
- var trainStation // link gambar stasiun kereta;
- var trainLight // link gambar dekorasi lampu peringatan;
- var trainBridge // link gambar dekorasi jembatan;
- Klik "Save" dan lihat hasilnya...
Pilihan Set Kereta Api :
- Set Lokomotif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinCZ-eF399VLWb75-Y9DjP2-qKUyofOhFxDq6JQhRQVwY-gobWKR0nencUiGY7NstutFy7lsqvE2tukWP-wJEGL3jHH1EfHKHDax53zKv0g16d5CXZokiGAAMr7WtAu7fpt1FPDBb1U6I/s1600/MozLoco3a.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5RpCmb5beYkuNE5PzeqjHZxLcxhlZt1mSLkCxMaiF-HLGpM9TWgbTWN0Hj6tX6j4ipPW6vNBiPZlavfFMmMWQIHBilKQ2kRoijqKahxFLcQ-0Dn4-Howx-QbdK8VeiYOjvDAwY6SL-3A/s1600/MozLoco4.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6UGhf4FttwhMEss2L6ot_dSXzI7rXDYuOZRwdHGMdAhdECn7fNIYH01eCrhSs09BE2_-nxKdm303sz7-4Y19nY6Wm7AxnWmTDhWIeMWVMShfFMzbGJZL2gCevcnVQxasbMoRy0KRx0_g/s1600/MozLoco5.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzUkR5dolFV1ucBOfxsq4kyT8TxE5oYSWzGWbICGvwjZuOGOmNp9uJnSEjN_gIvhGr_2HIEd1Ek8Fco1zj4l8QtHKvFnootjFla41AgxmwzBfmuPNxjsBzNn_iICe7mOHxFLRZQr_htjs/s1600/MozLoco6.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7bNflAjUHv5NeHyeezeq8fbYmfHyBqR2p1Smf7UZDMK-LeRK_bsMl4yrBOOWj4Vg8nDeq_pnAP6mmOck36sqSKAlWBXOfLxoiz_U4SZN6X2Sacj2Zds3jNjq1COGvs5sf-7dDd-Es5wWQ/s1600/kereta_api_monosbit.png
- Set Kereta Api 1
- Kereta Api
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhi5SKX1_H-65RH7h0RbJkH9tTtaoC0PBhM75yYwSO484_ru35Z8cognhjjHH81K7gVadkNrfjmyhamujK_dyroq7CyxS19Ob-e5cyf0fz82mnjU0CNtduOsupVTe_uMzvaZTvbjWvsbB7M/s800/train-set1.gif - Set 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF3EFhWco-IDtJva709sw6vN210Kx1by3U5sNArEYCkAHrmeQ5nxFVWsUGvDhaMI6hyphenhyphen-PkOLKp_mnyXxrfbRsHSJ42oGC4FTyCUP6WkzIY19v_9bwC0iEJYV0HiIj9M66pIpA-LJlEIHx0/s800/train-set2.png - Set 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicaeSDyDvxrwQMWLVNKIf89J9r0_5vcJgjHP5cFcJanQvVfpiJznz9VWz4K4RxKzes22-75ra_dxta4DmzPSnAaZAaSzAX3WbhMioeHlZEWLgjXKN-e0ogvECHg6y1Miy9jHldkH8L3kM-/s800/train-set3.png - Set 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_8bC0AmbUU42PJyELgDdH8uR6z0k5-CneioW8aElRnvj2MAyZGqo3-yFpZhWOD7sJXrtvpxHZH1K1vlCA2F4tD7j41RLbuU7n38xDF9qsoPy6rqtki0F_W1_PoObz-Nx48goOlgaQRv0/s1600/train-set4.gif
- Kereta Api
- Set Kereta Api 2
- Kereta Api
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikPv8DZRW-BYIVZDP5w-Ni5WavupnxlC4jdZR9onwygpL6nvogZzBH7ibPUFqSjyHCS_KJOf5ogqoY18la57TKypmRTAVRfopcKzr3jSPaU48axS6uQa5qfJtfFcNASauAThraXCovrrIU/s800/train_cargo_set1.png - Set 1
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOhdiw2rPXFDZRW3QcodGUbJ0v0rKmp9DX5Ele828bGm25L0zNc-BxpFwtcUdyY6c-9mWcVSCdamJhvzL8C4FOGbHMVAa1dfx3Rc-shiofNRt_4D3EIoq5n5ghcgZWFZH8Igx08sBE-gaO/s800/train_cargo_set4.gif - Set 2
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi-W3k2nNZWZDW4jRh5MtBNU0hnSDgRhogiRhMFhntGiXo-vpFORYBOwxDo8eDvFvGtji4fJFTlaBlhithCtq9TXe5hHxiKuubXeRjzBc1efvzeiFlq7DD5UgpL5LpH2bAXjIC3qNqYIUbg/s800/train_cargo_set4b.png - Set 3
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWMYqbU1-uTeHNzZ9-lltJ85Ynf8TNjTshS-54y640gOJZ4RrOfbtlQWl4vbUKfCCr8rU7aFYdEzzOntLKBi7wRChl-ABVIWcrYsf_owCAl_fYWHu5As3YZcYLDPpqsJ6XOmqG9WZLg_SP/s800/train-station.png
- Kereta Api
.: Semoga Bermanfaat :.
0 Comments