22 September
Add 2 or more Custom HTML Modules
You can have as many Html boxes as you want on your space to display anything that you may like via code.
Click here to learn how to get a HTML sandbox / Module.
You can carry out the steps shown in the HTML sandbox tutorial to add more Html boxes. Keep clicking on the Html Add button to get as many Html boxes as you want.
You can also hide/show the Html boxes that you added to your space from here as shown in the picture above. Click on Close and then save your page/layout.
Done!
Click here for the HTML Sandbox gadget! << Can be used when certain codes do not work on the Html sandbox.
Due to recent updates made to WL Spaces the tutorial below does not work anymore! Please do NOT attempt it!
Before your start :
- Read the Sandbox Module tutorial and get it onto your space before going onto this one.
- This tutorial is for Advanced Users only. Please do not ask me Questions such as , Where is the notepad ? I do not provide email support for this tutorial.
- Try the following at your Own Risk. I am not responsible if anything goes wrong.
- If you do not do it correctly , It may have adverse effects on your space. I recommend that You try it on a Back-up/Extra space and use Internet Explorer only.
- The Basic Tutorial in english was made and published first by atiger and by Yang in chinese
The Tutorial
[See images in between the tutorial for a better understanding | Click the pictures to enlarge]
- Now you will see a Customize Layout Page of your space.
- Click the View tab on the IE menu bar and select Source from the drop down menu that appears.
- A notepad will open with all kinds of codes that make up your space. (Save a file of this code for future use. In case you mess up your space trying out this tutorial, You can always fall back to the original Code)
- Now , Search for Custom HTML in this mess of codes!. [Tip : Press Ctrl + F and type in Custom HTML and click on the 'Find Next' to search]
- Note the image below has another code term, it was an older method and not valid anymore, so please search for Custom HTML
- After you have found it. Include the code below , in between Custom HTML and tags :
PowerToy: Custom HTML
- This code will give you an extra HTML module. Add this code once only if you already have a Custom HTML 'Sandbox' Module, so you end up with 2 of them. Or Add it as many times to get that many Modules more. Recommendation is 2 modules. [See the picture below for an idea]
- After adding the codes save the file using the 'save as' function as shown in the pictures below :
- Now open that saved .htm file in another IE window. You will notice there are 2 ☑Custom HTML PowerToys in the Modules frame or maybe more depending on the number of times that added that code. Check Tick the ☑ [boxes] and you will notice the Custom HTML PowerToys in the Module Arrangement frame.
- Click Save !
-
Return to your space on the 'Edit your space' Page. You Shall see the multiple Custom HTML PowerToys. They looks the same, but they are different. The leftmost one is the Mother module, all others are Child modules.
-
Done !
-
Just add different codes in the different HTML modules and click save. You can add Pictures, Banners, Clocks, etc. See various tutorials on my space. Get their codes and add them to these modules...
Now there is a problem. [Read it carefully..]
In one of the modules, You cannot add any code. When you click save, nothing gets added.
Take that as your beta module.
The other one in which You can add content is the alpha module. Add code/content that you want to put in the beta module into the alpha module first and then press save on the alpha module.
Now move the beta module anywhere on your space or the place where you want it and click You will be promted if you want to save this arrangement of modules or something like that.
'Save' it. You must do this step!
You will notice the content/code present in the alpha moule has come onto the beta module.
Now add code/content that you want to put into the alpha module into the alpha module and click save.
Done! Preview your space. You will notice 2 html modules with different content.
At first its a bit confusing and hard to grasp. But please re-read the whole alpha beta bullshit.
Now, if you ever move the beta module, the content on alpha comes onto the beta module, and you will have to do the procedure mentioned above to transfer content into the beta module. If you do wish to get rid of the extra beta html module. Go to 'Customize' >> 'modules'>> Custom HTML module powertoy remove. Click on that and click 'save'.
All done!
(Thanks to Mark Slack : Little Fish Big Pond for updating my code) & Asuka Aki for commenting the updated code
(Thai version : Click here )