1. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
1 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 1:
1. Log in your Frog
2. Click Quick Launch
3. Click Site
STEP 2:
1. Resource Manager pop-up will appear.
2. Click My Site
3. Click New Site

2. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
2 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 3:
1. Give your site a name
2. Write simple description of your site
3. Click Next
STEP 4:
1. Choose your site theme. Click any theme until blue line appear.
2. Choose an icon. Click any icon until blue line appear.
3. Click Next

3. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
3 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 5:
1. Click Create Site
# We can add Subject, Class , Keyword later
STEP 6:
1. This is how your site look like depends on the theme choosen
2. Click Edit button to edit your site.

4. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
4 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 7:
1. Click Layout. Choose your boxes for the layout.
2. Click Save Changes
STEP 8:
1. Double Click at New tab
2. Change and type the text. For example : LEARNING OUTCOMES
3. Click Save Changes

5. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
5 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 9:
1.To insert text, click Widgets
2. Choose Ab widget for Text
3. Click Ab widget > Drag > Drop the widget to the layout on your right screen. Make sure the
blue box appear before you drop the widgets.
STEP 10:
1. Double click Sample text (Text Widget)
2. Setting box for text will appear
3. Type your text
4. Change your text size, font, alignment
5. Click Save Changes

6. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
6 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 11:
1. Close Edit button
2. This his how your 1st page of your site appear.
3. You can add New tab for any subtopics

7. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
7 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 12:
1. Click + (Plus) and - (minus) button to add New Tab (Add Page)
2. Double Click New tab to change the text
3. Click Layout to choose the layout
5. Click Save Changes

8. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
8 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
HOW TO INSERT WIDGETS TO YOUR SITE
A. How to insert Media Widget (Graphic, Video, Audio, Animation)
STEP 1:
1. Double click to any tab
2. Click Widgets
3. Drag and drop Media widget

9. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
9 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 2
1. Double click Media widget
2. Setting box will appear.
3. Three options to insert media : Upload, Import Resources or Pinpoint

10. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
10 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 3:
How to insert media from your computer (Upload)
1. Click Upload button
2. Click Choose Files button
3. Select any pictures, video, animation from your hard disk
4. Wait until green box appear. Its mean that Frog can accept the file format
5. Click Done button at the bottom
6. Click Save Changes

11. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
11 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 4:
How to insert media using Import Resources (File from Resource Manager)
1. Click Import Resources
2. Resource manager pop up will appear
3. Click My Documents
4. Choose media (Picture, Video)
5. Click Use

12. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
12 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
STEP 5:
How to use Pin-Point to insert image/video
1. Double click Media Widget. Click Pin-Point icon at media setting.
2. Click Image or Video. Type any picture or video. Click Search or Enter
3. Choose any image or video
4. Click Use.
5. Image or video will attach into your page.
6. Click Save Changes.

13. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
13 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
B. How to Insert Link to File Widget (User can download file)
STEP 1:
1. Click Link to File widget. Drag and drop the widget
2. Double click widget. Choose Upload/Import Resource or Pin-Point to upload resource.
3. Enter name of file: Examples: Activity sheet 1
4. Click Save Changes.
5. Now user can download your file.

14. Step by Step to Create A Simple Teaching and
Learning Site Using VLE Frog
2013
14 By : Cikgu Marziean Mohd Shapian
SMK Bandar Baru Salak Tinggi, Sepang, Selangor
How to use Embed Website Widget
STEP 1:
1. Click, drag and drop Embed Website widget
2. Double click to make sure setting panel for Embed website appear on the left site.
3. Enter URL Address for website
4. Change height to 1000
5. Save changes
6. Close setting panel