Memasang cu3er di Blogspot

Cu3er adalah salah satu free Flash 3D image viewer. Cu3er menampilkan beberapa keunggulan yaitu costumisasi dengan xml, translation, configurasi dengan banyak cara, auto play dan lain-lain.

Pada Kesempatan ini saya mencoba berbagi informasi dan pengalaman dalam masang cu3er di blogspot. Sebelumnnya saya tertarik ketika melihat cu3er dalam menampilakan slide gambar lebih interaktif. beberapa kali saya mencari informasi dan tutorial mengenai pemasangan di blogspot namun tidak juga menemukan. Yang sering dan ada saya temukan adalah pemasangan pada website yang salah satunya menggunakan platform worpress. Ini karena perusahaan Cu3er menyediakan plugin wpcu3er untuk bisa dipasang situs-situ dengan menggunakan wordpress.


Pada beberapa hari yang lalu saya berkunjung-kunjung untuk melihat beberapa kelebihan dari template/theme yang dibangun oleh webdesigner. Tak sengaja bertemu dengan sebuah situ yang dibangun dengan blogspot. Saya sangat senang tentunya bertemu dengan dua blog ini (http://damacblog.blogspot.com/ & http://www.paulsantosh.com/)Di dalamnya berisi kontent atau informasi yang menjelaskan bagaimana cara memasang slide cu3er di blogspot.

Dari beberapa kali percobaan yang gagal akhirnya saya sangat bersyukur dari beberapa kegagalan tersebut bertemu juga dengan hasil yang cukup memuaskan. Silahkan kunjungi blog halaman ini sebagai Demo.

Ada beberapa tahapan dari informasi pemasangan cu3er yang saya ringkaskan berikut ini:

• Download file yang menjadi syarat (silahkan cari disini)

1. cu3er.swf
2. config-original.xml
3. swfobject.js
4. expressinstall.swf

• Upload semua file di atas beserta file gambar/foto yang akan dijadikan slide ke free hosting.
• Catat semua link url dari file-file tersebut
• Edit kode config-original.xml berikut:

1: <?xml version="1.0" encoding="utf-8" ?>
2: <cu3er>
3: <settings>
4: <prev_button>
5: <defaults round_corners="5,5,5,5"/>
6: <tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
7: <tweenOut tint="0x000000" />
8: </prev_button>
9: <prev_symbol>
10: <tweenOver tint="0x000000" />
11: </prev_symbol>
12: <next_button>
13: <defaults round_corners="5,5,5,5"/>
14: <tweenOver tint="0xFFFFFF" scaleX="1.1" scaleY="1.1"/>
15: <tweenOut tint="0x000000" />
16: </next_button>
17: <next_symbol>
18: <tweenOver tint="0x000000" />
19: </next_symbol>
20: </settings>
21: <slides>
22: <slide>
23: <url>your image url</url>
24: </slide>
25: <!-- changing transition between first & second slide -->
26: <transition num="3" slicing="vertical" direction="down"/>
27: <slide>
28: <url>your image url</url>
29: </slide>
30: <!-- changing transition between second & third slide -->
31: <transition num="4" direction="right" shader="flat" />
32: <slide>
33: <url>your image url</url>
34: </slide>
35: <!-- transitions properties defined in transitions template -->
36: <slide>
37: <url>your image url</url>
38: </slide>
39: <transition num="6" slicing="vertical" direction="up" shader="flat" delay="0.05" z_multiplier="4" />
40: <slide>
41: <url>your image url</url>
42: </slide>
43: </slides>
44: </cu3er>

•  Ganti your image url dengan alamat gambar punya anda.

Baca selanjutnya bagian ke dua >>

Selamat mencoba semoga bermanfaat.

Ayo blogging....!