Add 3D Cu3er (cuber) slider to your Blog or Website

Cu3er is a really neat 3D image slider with crazy visual transitions. This tutorial will help you to integrate cu3er to your  blogger easily. You can see an example how i integrated it into Blogger's header in my blog on the homepage. I will also explain how one can integrate cu3er to header and post and as widget as well.


Step 1

Download the required files from http://dl.dropbox.com/u/3255460/blogpostfiles/cu3er.zip
The package contains following files:

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

Now upload the files to a free hosting except config.xml and note down URL's of uploaded files.
You can host the files to public folder of DROPBOX.COM

Step 2

Upload the images that you want to show in slider and host it where you hosted the other files.
Note down the URL's of the images as well(it should be like http://dl.dropbox.com/u/3255460/images/129CL1C43P-31060.jpg) 

Step 3

Edit the config.xml by opening it with notepad and replacing url of your images that you want to show in slider and save it as config.xml and upload to the hosting site(dropbox).
see eg below:

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>  

Step 4

A. To add the slider in post or header

Paste the below given code (after inserting the URL's of the required files) to the html of blog or website to put it into header or to the html coding of your post to use it in a post.
replace your path to the file with your URL to the file and change the width 
and the height of the slide show.

 <script type="text/javascript" src="your path to the file/swfobject.js"></script>  
 <!-- Configure SWFObject JavaScript and embed CU3ER slider -->  
 <script type="text/javascript">  
           var flashvars = {};  
           flashvars.xml = "your path to the file/config.xml";  
           var attributes = {};  
           attributes.wmode = "transparent";  
           attributes.id = "slider";  
           swfobject.embedSWF("your path to the file/cu3er.swf", "cu3er-container", "width", "height", "9",  
           "your path to the file/expressInstall.swf", flashvars, attributes);  
 </script>  
 <object data="your path to the file/cu3er.swf"  id="cu3er-container" style="visibility: visible;" type="application/x-shockwave-flash" >   
 </object> 

 B. To add slider using html/javascript widget to the sidebar or anywhere else(i prefer using this one)

Repeat the step1, step2, step3 and then paste the below given code in html/javascript widget of blog or website to put the slider in the sidebar or anywhere else you like. I prefer this because after putting the code in html/javascript widget, you can move it anywhere on your website conveniently, all you have to do is change the dimensions of slider and images accordingly.

 <script src="your url/swfobject.js" type="text/javascript">  
 </script>  
 <script type="text/javascript">  
  var flashvars = {};  
  flashvars.xml = "your url/config.xml";  
  var attributes = {};  
  attributes.wmode = "transparent";  
  attributes.id = "slider"; 
 var params = {};
        params.allowscriptaccess = "always";
        params.allownetworking = "all";
  swfobject.embedSWF("your url/cu3er.swf", "slideshow", "width", "height", "9",  
  "your url/expressInstall.swf", flashvars, attributes, params);  
 </script>  
 <object data="your url/cu3er.swf" id="slideshow" style="visibility: visible;" type="application/x-shockwave-flash"> </object>  

you can change the width and height of the cu3er to any size to fit into side bar and header.
For more info or query, contact me. 

Follow me on twitter(twitter.com/bajaj_vikash)