ကိုကြီးဇော် ( မုန်တိုင်း )

First Phase: Uploading 4 Javascript Files to Google Code
1. Downloading the Javascript files
In order to make the Flash Slide Show Widget to work 0n your blog, you must have 4 javascript files installed in your blog template. Here they are the 4 Javascript files that have been wrapped up in one single Zip file called "Flash Slide Show Pictures Javascript". Now download that Zip file in your Computer, and then extract those 4 files to your Computer.

2. Upload the Javascript
After Extracting the 4 Javascript files into your Computer, now upload those 4 Javascript files to the Google Code website. In my previous post about - How to Upload Javascript and Other Script Files? - i already uncovered to you the tutorial on uploading the javascript files to Google Code website, you must head to that page first before proceeding to the next step of this tutorial.

3. Copy the Link Location of the Javascript
After Uploading the 4 Javascript files to the Google Code, now copy the 4 URL addresses of the Javascript files from Google Code website to the Notepad one by one. Remember!, One By One.

If you don't know how to copy the link address of Javascript file, you can check this page, and read the step on number 11 of that tutorial.

4. Paste the 4 Javascript URL address
After getting the 4 Javascript URL addresses from Google Code website, now paste the 4 URL addresses of 4 Javascript files one by one to the code below, and 4 javascript files must be placed in the right order:
5. Copy the finished Javascript code
Okay. Finished putting the URL address to that code above? Now Copy all the code above to the Notepad because we are gonna use it again in the next step of this tutorial. Now proceed to the next step.

1. Log in to Blogger Account
Now Sign in to your http://www.blogger.com by typing the username and password you've already registered before in the first place.

2. Go to Layout
After landing to the Dashboard page, now pick your chosen blog and then press Layout/Design button in that area of your chosen blog.

3. Go to Edit HTML
In the default page, Page Element, there are 3 sub-tab that can be manually switched, now press the sub-tab Edit HTML to start installing the Slide Show Flash Picture.

4. Find the Code
Anyway, before doing any kind of customization, i strongly suggest you to Save your current template just in case you do something wrong with the template. Now click at the link Download Full Template.


After clicking the Download Full Template link, you will be prompted with the choice about where you are gonna put the xml file in your Computer, just put it in the Desktop to make it easier if later you want to switch back to the current template.

Back to topic. In the Edit HTML page, now press Ctrl + F at the same time to enter the Find mode. After that, find the code below:
5. Paste the CSS style for the Slide Show Flash
After finding the code on number 4, now block all the codes below and press Copy. After that, paste the code before the code ]]></b:skin>.
6. Find the Code
Now Press again Ctrl + F at the same time to enter to the Find mode. After that, find the code below:
7. Paste the Javascript Codes From the First Phase
After finding the code on number 6, now copy again the Javascript code we've already made in the First Phase of this tutorial, and then paste it above the code </head>. Look at the example below:

8. Find the Code
By pressing Ctrl + F at the same time, now enter again the Find mode. In this tutorial, i want to show you how to embed the Flash Slide Show widget below the Header element, so you must find the div tag code that indicates the header area in your blog template (i assume that now you are currently using Minima Template). Now find the code below
As you can see in the code above, that is the code that controls the header element in blog template. If you are having a problem in locating the code above, i suggest you to find the first line of the code above to make it easier for you.

9. Paste the Flash Slide Show widget element
Okay, after finished locating the header element in your blog template, now block the code below and press Copy. After that, paste it below the code on number 8 above.
10. Save the Template
Now press the Save Template button to save the current changes you've just made. If you have done all the instructions above correctly, now you can proceed to the next phase, Third Phase.

11. Give a tick at the "Expand Widget Templates"
On the upper right position of the HTML box in the Edit HTML page, you can see the small box called " Expand Widget Template", now give a tick/check mark to that small box to enter the whole widget code of your blog template.

12. Find the Code
Now press again Ctrl + F at the same to enter again to the Find mode. After that, find the code below:
If you are having a problem again in locating the code above, i suggest you to type the word flashslide1 as a keyword in the Find mode to make it easier for you in finding that code.

13. Replace the code
After locating the whole codes on number 12, now block the whole code from the line <b:section class='flashslide1' id='slideshow1' showaddelement='no'> until the closing line </b:section> and then Replace it by using the code below:
14. Save the Template
Now press the button Save Template again to save the current change you've just made.

15. Switch the Sub-tab to Page Element
Okay, after finishing all the 3 Phases correctly, now switch the sub-tab to the Page Element to start installing the Widget.

16. Press the Edit Link
After landing to the Page Element, as you can see in your blog layout, there is one new widget element below the header element. Look at picture below!



Now press the Edit Link in that new widget element. By doing so, you will be prompted with the new small window of HTML/Javascript box.

17. Copy the Code
Now Copy the code below and then Paste it all in the HTML/Javascript box. The code i've presented below is just for example to your blog, to make sure that The Flash Slide Show Picture is working in your blog. And if it doesn't work to your blog, i suggest you to Upload back the back up template you've just saved in your computer. That's why, in the beginning part of this tutorial, i insisted you to firstly make a back up template just in case you did some errors in your blog template.
As you can see at the code above, those codes can be manually customized using your own preferences. In that code above, i've already made 4 different Flash pictures that later, will be shown in the slide show mode.

18. Save the Change
Okay, now you are officially finished this tutorial. By pressing the Save button, now you can save the current change you've just made. To see the result, you can simply go directly to your blog.

Now, pay attention to the code on number 17 of this tutorial. As you can see in that code, i've already made 4 slide show pictures. If you want to customize it with your own slide show pictures, now look at the code below!
As you can see in that code above,
a) The-URL-Address indicates the link address that will link to other page when the picture or link being clicked with mouse cursor.
b) And for the code The-Title indicates the title that will appear in the Flash Slide Show Picture.
c) The code Short Description of the Picture indicates the summary of the article that relates to the The-URL-Address that has been set as link.
d) The last code, Image-URL-Address indicates the URL address of the Image of the Article.

And last but not least, if you want to make 4 Slide Shows, you can just simply copy the code above and then paste it after the previous code over and over again, 4 times. Look at the example below!

Okay guys, that's it for now. Hope this work to your blog because i have spilled lots of efforts on typing this 2135 words article and it would be in vain if it doesn't work to your blog. Having any problem with this tutorial? Just type your question in the comment section below and i'll try my best to help you.

Anyway, if this tutorial works to your blog.