Custom Search

Tutorial - How to make and embed wix to overlay profile

Want to have a flash overlay but don't know much about adobe flash? I've discovered wix wherein you can create stunning flash websites for free. I've been using it for quite sometime. Many are asking me how to do it. So I've decided to create this tutorial.
Sign up for an account on wix. After you've signed up. Login your account. Click create. On the blank, you'll see this:

click edit
Another window will open. make sure you allow pop-up window for this site which looks like this:

You can now design your layout. Navigate the tools above. usually i make it fit to screen. So it's easy for me to think and design.
Choose your background. You can upload your own image if you have or choose from the premade backgrounds in wix.

click on the background you want. Just like this

Then design anything you want. Don't forget to make the navigation for friendster. Here's how to make navigation: Move your mouse on the first one you see on the left: Page Parts; It will open another set of tabs; click buttons. Just like this:

When you click buttons, it will open a tab on the right side. You can choose any of the buttons you want. There are 3 pages to choose from. When you know what you want. click it. Then the button will appear on the  middle of layout. That has My Buttons: Just like this


Select and Move the button in anywhere you want to place it in your layout. Then click edit.


then change the text name of Your Button to navigations of your friendster. ex. home .You can also change the color of the text and font by selecting the color and font below. Just like this


then by still selecting the button click behavior. Another window will come out. select go to url. to change the url setting check the go to url then paste the url address ex. http://www.friendster.com/ ; for target: new page. Then click apply.


Finish your layout with all the navigations you want. Some of the important navigations are home, profile, add me, send message, photos, submit photos, logout. you can add this also, add comment, friends, groups, i'm a fan of (but not so important. because you can have it when you use the auto update modules of those.) Make boxes or spaces for your friends, about me, groups, photos, visitors, comments, etc. You can also add music. You can choose from the list of music players (also located on the left)
I've made my layout and it looks like this:


Make sure that you are saving your work from time to time. Once you are happy with your layout, Here's how to get the code:
Click publish:

Click embed:

Click copy embed code; then next


-END OF WIX PART-
How to embed it to your html code:

now that you have your embed code of your wix, get a notepad and paste the codes there. we will use that code later. embedded code of the wix changed a little bit so we have to reformat that code to embed the add ons that we have.
If you have a dreamweaver, open a new html

After the body part of your html copy and paste this one:
wix embed code
It should look like this:


since you have your own code for wix, you will need that code now. but not all codes just this higlighted part. on your code find the "FlashVars" value="pageId=lFlelpSHrvw-a&embedFormat=normal&embedID=Z0Utrg6pk8s1z;LLhM5vpTl3jxGzZMtZA81oosQ42ZW_thFClHfpl4lyPz9PlQB9a&partner_id=WMGs4POB1ko-a" /> each of the wix we make we differ from others. So just replace this one.


after that you can now add other codes particularly the css and add ons. For the css part, add this to your head tag. the first style is for auto update friends, the second is for the scroll bars (IE and Opera only) third is for the comments (css link):


if you want to copy my code for this here it is: css wix
don't forget to configure it on your own: like the colors, and the css of the comments here
Then we will add the add ons: Let's start with about me:
add this on body part of your html: about me wix
=for this part you are going to test it on the browser. test where it is located, it is trial and error since we can't see the design in the dreamweaver. but you can drag this part on the dreamweaver. and adjust the size. it looks like this:

to preview it on your browser, do this:



for the other parts: the same concept; put division tags and adjust the codes: here are the extra codes: visitors and cbox


then the add ons: auto update testimonials and auto update friends: *note: since this will only be seen if you put it in your profile, we will use the overlay tester of sir je41. You will paste your codes on the left side. then click preview. Adjust the comment box and friends box to your liking. Here's what it looks like:


you can add additional codes. I'll add photos on the right. again all in the body tag of your html.
After you are finished, save it as yourname.html then upload to your webhosting site.
Finished product: The Grave
Live Preview on Friendster Profile: Sample Profile




2 comments:

Anonymous said...

hey d q magetz..naupload q na ung file q (+++++.html) sa 1 webhosting site tpos pano un magi2ng profile mo mismo sa fs??

RiA GeSiLvA said...

I haven't checked my FS lately. But you have to be active on markyctrigger forum and have access to level 2. Go to markyctrigger.com For further details

Related Posts with Thumbnails

About Me

My Photo
RiA GeSiLvA
I'm A FILIPINA I Love: Color BLUE! (isn't that obvious? hahaha) I Hate: Liars, Pretenders, Judgmental, Plastic People User-Friendly Persons I'm A Sensitive Person Sweet, Loyal and True Friend
View my complete profile

My Blog List

Link My Blogs


Copy to your page



Copy to your page



Copy to your page

Visitors

Total Pageviews

Powered by Blogger.

Readers

Help

Chatbox

Feel free to say that you dropped by my page. But no spamming please. PLEASE SPEAK IN ENGLISH. THANKS

Follow me

Followers

Site Activity and Stats

Page Rank Check



free counters
Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service