| haii sobat blogger.... aduhhh... akhirnya bisa juga membuat slideshow flash cuber di blogspot... sebenarnya udah lama sich.. cara membuat slide show menggunakan flash cuber ini.. tpi tidak apalah.. saya akan menjelaskan kembali cara pemasangan dan java script yang akan kita gunakan nanti.... tapi anda tahu tidak apa itu slide show cuber... klo slide show saja pasti kalian sudah pada tahu kan... nah bagai mana dengan flash cuber... kita sudah sering dengar yang namanya flash maupun cuber.. flash pasti tahulah... karena sebelum kita membuat project ini kita browser kita harus benar benar memiliki flash player untuk menjalankan.. usahakan flash browser anda terupdate.. kalau belum silahkan anda kunjungi di sini untuk mendownloadnya... --- kank denzdii ---- | nah kalau cuber biasanya orang menyebutnya object yang berbentuk kotak. yang dimana sebuah objek tersebut memiliki lebih dari 1 komponen... ya kira-kira seperti itu lah.. dan kali ini bagaimana klo di terapkan dalam sebuah slide show bloggspot.. mungkin kalian akantertarik untuk mencobanya... Dan ternyata penjelasan saya di atas terlalu bertele-tele... oke sekarang kank denzdii atau biasa di sapa ucoxx... haha... kaya orang batak ya.. padahal saya kan orang sunda... udah ach cape jelasinnya (jangar sirah).. kita langsung mulai saja ya... |
sebelumnya itu mari kita lihat dulu demonya... biar lebih jelas lagi apa itu slide show dengan flash cuber :
untuk tahap pertama lihat script di bawah ini :
tahap 1.
<script src='http://dl.dropbox.com/u/31323979/cu3er/js/swfobject/swfobject.js' type='text/javascript'/> <script type='text/javascript'> var flashvars = {}; flashvars.xml = "http://dl.dropbox.com/u/66187775/config2.xml"; flashvars.font = "font.swf"; var attributes = {}; attributes.wmode = "transparent"; attributes.id = "slider"; swfobject.embedSWF("http://dl.dropbox.com/u/31323979/cu3er/cu3er.swf", "cu3er-container", "900", "400", "9", "http://dl.dropbox.com/u/31323979/cu3er/js/swfobject/expressInstall.swf", flashvars, attributes); </script>
untuk yang saya garis bawahiitu... sebenarnya tidak perlu saya jelaskan.. dan anda tidak perlu merubahnya agar tidak terjadi kesalahan...
yang harus anda perhatikan adalah url yang berwarna merah.. itu adalah xml yang berisi tentang configurasi objeck pada box cuber.. di dalamnya adalah code-code untuk memasukan foto yang akan kita pasang ...
coba lihat/klik infonya dulu
jika sudah di lihat , kalian perhatikan code url gambar/link kira kira seperti ini...
<slide> <url>http://dl.dropbox.com/u/66187775/cube/cube1.jpg</url> <link target="_blank">http://boxfree-88.blogspot.com</link> </slide>
anda cukup menganti alamat link gambar dan link tujuannya...
Note:
ouh iya ada cara mudah agar kita dapat meng upload foto yang kita inginkan dengan cepat...
jika anda berminat silahkan anda kunjungi link INI.
jika sudah anda cukup download saja softwarenya...jika kurang mengerti silahkan ajukan pertanyaan..
kita mulai ketahap code HTML
tahap 2.
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div id='mygallery'> <b:section id='123gallery' maxwidgets='1'> <b:widget id='HTML2' locked='true' title='Slider' type='HTML'> <b:includable id='main'> <div class='gallery'> <div class='cu3er_resize'> <div id='cu3er-container'> <a href='http://www.adobe.com/go/getflashplayer'><img alt='get adobe flash player' src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif'/></a> </div> </div> </div> </b:includable> </b:widget> </b:section> </div> </b:if> </b:if>
untuk yang bergaris bawah itu jika anda menginginkan slideshow tampil hanya pada bagian halaman blog.. jika ingin tampil di semua halaman tinggal anda hapus saja dengan tag penutupnya...
yang berwarna merah adalah itu alamat url flash player.. agar slide show berjalan dengan sempuran..
dengan catatan flash anda sudah terupdate/terpasang...
menurut saya ini sudah cukup penjelasannya... kank denzdii sudah ngantuk ...kita mulai pasang saja ya..
CARA PEMASANGAN PADA TEMPLATE
1. masuk ke blogger anda pilih design/rancangan > edit HTML >
cari code </head> biar cepat tekan ctrl+F kemudian masukan code di bawah di atas code tadi :
<script src='http://dl.dropbox.com/u/31323979/cu3er/js/swfobject/swfobject.js' type='text/javascript'/>
<script type='text/javascript'>
var flashvars = {};
flashvars.xml = "http://dl.dropbox.com/u/66187775/config2.xml";
flashvars.font = "font.swf";
var attributes = {};
attributes.wmode = "transparent";
attributes.id = "slider";
swfobject.embedSWF("http://dl.dropbox.com/u/31323979/cu3er/cu3er.swf", "cu3er-container", "900", "400", "9", "http://dl.dropbox.com/u/31323979/cu3er/js/swfobject/expressInstall.swf", flashvars, attributes);
</script>
2. kemudian copas script dibawah dan simpan dimanapun anda menginginkan slide show ini muncul :
<b:if cond='data:blog.pageType != "static_page"'> <b:if cond='data:blog.pageType != "item"'> <div id='mygallery'> <b:section id='123gallery' maxwidgets='1'> <b:widget id='HTML2' locked='true' title='Slider' type='HTML'> <b:includable id='main'> <div class='gallery'> <div class='cu3er_resize'> <div id='cu3er-container'> <a href='http://www.adobe.com/go/getflashplayer'> <img alt='get adobe flash player' src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif'/></a> </div> </div> </div> </b:includable> </b:widget> </b:section> </div> </b:if> </b:if>
3. tahap akhir adalah menggunakan CSS untuk mengatur posisi dan ukuran jika tata letak kurang baik..
cari kode ]]></b:skin> dan simpan css di bawah ini tepat di atas/sebelum code tadi :
* css cu3er
-----------------------*/
.gallery {width:970px;height:525px;margin:0 auto 0 ;background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0rRt4zruUW-cns4kZbx9EI5S5j-z_Q-GoAUhFNxNC2kg0UjyGa5kQraP8GQDQR7dSx95DjJm_s7fpsKpoG5NVB-IsdfjKOj5iDN4nWRbG0nY46o_kFcOSNwIxneG4D2wabuou1cXJwEon/s1600/simple_bg.png") no-repeat scroll center bottom transparent;}
.cu3er_resize {width:970px;margin-top:50px;display:inline-block;}
#cu3er-container {width:970px;outline:0;}coba untuk di preview dulu atau pratinjau hasilnya... jika anda menggunakan flash block.. langsung publikasikan/publish post.
selesai laporan saya kali ini... kita tunggu postingan selanjutkan yang saya rencanakan akan membuat full flash template ..mudah-mudahan saya akan share secara gratis ... hehehe... ok salam sejahtera dari kank denzdii dan happy blogging.. wassalam..!!!
tutor yang bagus gan... ditunggu karya2 yang lainnya
BalasHapus