Creating the Smiley Ice Cream Joomla! 1.5 Website Materials

I've posted here links for the "Building the Smiley Ice Cream Joomla! 1.5 Website" training resource files.

The template files:

• Creating the template files.
  

The step-by-step tutorial:

• Building the Smiley Ice Cream Website using Joomla! 1.5

The top-banner:





The top-menu background:




The left-menu background:

Google Slide Show/ RSS Feed template

I am currently working on a blog post on how to write an RSS feed for web-based slide shows from Google. The steps, though uncomplicated are quite lengthy and may take time for me to finish.

In the meantime I have uploaded guide-files to my website: a sample HTML that uses the Google slide show and the corresponding RSS feed.

The links to the uploaded guide-files files are as follows:

• HTML file: http://jundconsultancy.com/googleslide.html
• RSS feed: http://jundconsultancy.com/rss/template.rss

The codes for both files are simple and easy enough to follow. Just view the source code and follow the pattern in creating your own web-based slide show.

In the meantime, I'll try to finish my RSS feed blog post

The 7 steps of embedding youtube videos in Joomla!

One of my favorite movie titles from way back was "The 7 Steps of Shaolin". I didn't get to see the movie, but I sure was amused by the title. I suppose the plot would have been a novice undergoing 7 intense steps to become a Shaolin Kung-Fu master.

I was playing around with Joomla! 1.5 when I chanced upon an online tutorial on how to embed youtube video in Joomla! However, the tutorial is only applicable for the previous Joomla! version (1.x).

After much tinkering around, I finally discovered how to place youtube videos in Joomla! 1.5 articles. I've summarized them in 7 easy steps to show you on how to do this:

Step 1: Browse the youtube website for the video you want to embed.



Step 2: Look for the Embed field box, and highlight the entire text

Step 3: Copy the Embed text:


Step 4: Login to the administration of your Joomla! website, and view the article list (Pull down the Content menu and select Article Manager). Click to edit the article where the youtube video will play.


Step 5: The editor for the article is displayed. Click the "Edit HTML Source". (Note: I've set the Display on Front Page to "yes").

Step 6: The HTML Source Editor for the article is displayed. Now paste the copied Embed text from youtube, and click the Update button, found at the bottom of the editor.
Step 7: We are now back at the article editor. The final step, click "Save" button.

That completes the 7 steps! We are now ready to view the video on the Joomla! website. As we browse the website, we see the youtube video, ready to play. Enjoy watching ^------^

Using the AJAX Slide Show

The AJAX slide show from Google is quite a useful utility in creating a running photo gallery for web pages. Its all a matter of incorporating the AJAX code into HTML pages. Google provided a "Hello World" sample code to assist novices like me get started with it.

I had intended to use the slide show for the website I am doing for my friend. The slide show is a good idea to showcase the products his business is marketing. A sample page on the website was first created.

The "Hello World" code was copied/pasted into the sample web-page. The code the be found on this link: http://www.google.com/uds/solutions/slideshow/reference.html#hello-world.

The nest step I took was to create a Media RSS for the products of my friend is marketing. The link to the Media RSS I created is http://www.liaredle.com/prodset10.rss.

The RSS will be used by the slide show as reference to the the pictures to display on the slide show. With the RSS in place, I referred to the part of the code that read,

<script type="text/javascript">
function load() {
var samples = "http://dlc0421.googlepages.com/gfss.rss";
var options = {
displayTime: 2000,
transistionTime: 600,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);</script>

After evaluating the code, I replaced the code-line that read 'var samples = "http://dlc0421.googlepages.com/gfss.rss";' with the code-line that refers to the RSS 'var samples = "http://www.liaredle.com/prodset10.rss";'.

The code snippet is now updated to:
<script type="text/javascript">
function load() {
var samples = "http://www.liaredle.com/prodset10.rss";
var options =
displayTime: 2000,
transistionTime: 600,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(samples, "slideshow", options);
}
google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

With the final code completed, I uploaded the page to the website, which can viewed at this link, http://www.liaredle.com/ver2/

And that's how simple it is. In about less than an hour, I have created an impressive AJAX-based slide show, thanks to Google.

Hopefully, the slide show will mean more profits for my friend ^_____^