Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2
Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

Here we will show you how to use the Nivo Slider Demo in Google Sites while hosting the Nivo Slider on Google Drive.
 
THE SOLUTION
Using Google Drive to host Nivo Slider Demo in Google Sites.

Get Started
Follow the steps below. Still need help on a specific step, click it, to view detailed how to instructions.
  1. Sign in to Google Drive at drive.google.com.

  2. Download Google Drive from within your Google Drive account.

  3. Download Nivo Slider at dev7studios into your Google Drive folder.

  4. Share Nivo Slider files on Google Drive so that Anyone who has a link can view and grab the Link to share URL for each file.

  5. Modify Nivo Slider files Link to share URLs by replacing the Link to share URL text open with uc.

  6. Edit Nivo Slider style.css file by replacing the image def7logo.png location with its Link to share URL.

  7. Edit Nivo Slider default.css file by replacing the images loading.gif, bullets.png, and arrows.png locations with their Link to share URLs.

  8. Edit Nivo Slider demo.html file by replacing the files and images default.css, niv-slider.css. style.css, toystory.jpg, up.jpg, walle.jpg, nemo.jpg, jquaery.nivo.slider.js locations with their Link to share URLs. Plus directly link to Google's jqueary-1.7.2.min.js file.

  9. Launch Google Drive Hosted Nivo Slider Demo in Google Sites by taking the demo.html Link to share URL and placing it in the Google iframe gadget in Google Sites.


Nivo Slider Demo hosted on Google Drive


Now that you can see the Nivo Slider Demo fully functioning above, while being hosted on Google Drive. Lets show you how to do it.



Subscribe to posts

STEP 9: Launch Google Drive hosted Nivo Slider Demo in Google Sites

posted Jul 11, 2012, 7:01 PM by Wohphi Communications   [ updated Feb 2, 2013, 12:38 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 9: Launch Google Drive hosted Nivo Slider Demo in Google Sites

Your almost there. Soon you will have the Nivo Slider Demo up in your Google Sites.
  1. Sign in to Google Sites at sites.google.com

  2. Go to the your page you want to place the Nivo Slider Demo on

  3. View the page in edit mode

  4. Place the curse where you want the Nivo Slider Demo to appear

  5. Click to Insert in the top left menu

  6. Select more gadgets

  7. Choose the Include gadget (iframe) gadget, usually second done in featured gadgets

  8. Open the Google Document file titled Nivo Slider Link to Share that you created earlier

  9. Find the Link to share URL for demo.html

  10. Insert the demo.html Link to share URL into URL to Content text box (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  11. Width input 570 pixels

  12. Height input 400 pixels

  13. Uncheck Include a scrollbar on gadget when necessary

  14. Uncheck Include a border around gadget

  15. Check Display title on gadget

  16. Input title text as Nivo Slider Demo hosted on Google Drive

  17. Click Ok, and you are DONE!
FINISHED! HAPPINESS! YIP! YIP! YIP! Enjoy your Google Drive hosted Nivo Slider Demo in Google Sites.

Back to STEP 8: Edit Nivo Slider demo.html file

These instructions give you the basics tools to allow you to create your own Google Drive hosted Nivo Sliders in Google Sites.

COMING SOON
Wohphi will be hosting Free Nivo Slider Themes through Google Drive for those interested in using them. Learn how to use these Free Nivo Slider Themes with your own images and captions.


STEP 8: Edit Nivo Slider default.html file

posted Jul 11, 2012, 12:44 PM by Wohphi Communications   [ updated Feb 2, 2013, 12:37 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 8: EDIT NIVO SLIDER DEMO.HTML FILE

The Nivo Slider demo.html file needs to be modified to reflect the new file locations for your Nivo Slider Demo on Google Drive.
  1. Go to your Google Drive folder on your computer

  2. Open the demo folder under the Nivo Slider folder.

  3. Find and open the file demo.html in an editor

  4. Find and open the Google Document file titled Nivo Slider Link to Share or the file you recently created that includes all the Links to Share URLs for the Nivo Slider files. Perhaps your Google Document will look something like this below.

    Modified Nivo Slider Google Drive Links to Share

  5. Find and copy the default.css Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  6. Find the text ../themes/default/default.css within the demo.html file and replace it with the default.css Link to Share URL you just copied.

    replace Nivo Slider default.css with Google Drive Link to Share URL

  7. Find and copy the nivo-slider.css Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  8. Find the text ../nivo-slider.css within the demo.html file and replace it with the nivo-slider.css Link to Share URL you just copied.

    replace nivo-slider.css with Google Drive Link to Share URL

  9. Find and copy the style.css Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  10. Find the text style.css within the demo.html file and replace it with the style.css Link to Share URL you just copied.

    replace style.css with Google Drive Link to Share URL

  11. Find and copy the toystory.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  12. Find the text images/toystory.jpg within the demo.html file and replace it with the toystory.jpg Link to Share URL you just copied.

    replace toystory.jpg with Google Drive Link to Share URL

  13. Find and copy the up.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  14. Find the text images/up.jpg within the demo.html file and replace it with the up.jpg Link to Share URL you just copied.

    replace up.jpg with Google Drive Link to Share URL

  15. Find and copy the walle.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  16. Find the text images/walle.jpg within the demo.html file and replace it with the walle.jpg Link to Share URL you just copied.

    replace walle.jpg with Google Drive Link to Share URL

  17. Find and copy the nemo.jpg Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  18. Find the text images/nemo.jpg within the demo.html file and replace it with the nemo.jpg Link to Share URL you just copied.

    replace nemo.jpg with Google Drive Link to Share URL

  19. Find and copy the jquery.nivo.slider.js Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  20. Find the text ../jquery.nivo.slider.js within the demo.html file and replace it with the jquery.nivo.slider.js Link to Share URL you just copied.

    replace jquery.nivo.slider.js with Google Drive Link to Share URL

  21. Find the text scripts/jquery-1.7.1.min.js within the demo.html file and replace it with the URL pointing directly to the file http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js.

    replace jquery-1.7.1.min.js with direct link URL

  22. Save the demo.html file. (NOTE: Make sure you save the demo.html file to the demo folder that will sync to your Google Drive account automatically.)

  23. Start Google Drive on your computer and the default.css should automatically sync to your Google Drive account.
 
  
 

STEP 7: Edit Nivo Slider default.css file

posted Jul 10, 2012, 10:37 PM by Wohphi Communications   [ updated Feb 2, 2013, 12:37 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 7: EDIT NIVO SLIDER DEFAULT.CSS FILE

The Nivo Slider default.css file needs to be modified to reflect the new file locations for your Nivo Slider Demo on Google Drive.
  1. In the Google Drive folder on your computer find the default folder found in the theme folder within the Nivo Slider folder.

    Google Drive folder on your computer

  2. Find the default.css file within the default folder and open it in an editor

    Nivo Slider default folder in Google Drive

  3. Next find the file you created titled Nivo Slider dev7link id and copy the entire id text for #dev7llink and paste it at the top of the default.css file.

    Why? This puts all the images called within the CSS files in one place, simplifying any future edits.

    Nivo Slider default.css id #dev7link

  4. Find and open the Google Document file you created titled Nivo Slider Link to Share that includes all the modified Links to Share URLs for the Nivo Slider files. Perhaps your Google Document will look something like this below.

    Modified Nivo Slider Google Drive Links to Share

  5. Find and copy the dev7logo.png Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  6. Find the text images/dev7logo.png within the default.css file and replace it with the dev7logo.png Link to Share URL you just copied.

    Found within the id #dev7link under background. It should look something like this below.

    replace images/dev7logo.png with Link to share URL

  7. Find and copy the loading.gif Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  8. Find the text images/loading.gif within the default.css file and replace it with the loading.gif Link to Share URL you just copied.

    Found within the class .theme-default .nivoSlider under background. It should look something like this below.

    replace images/loading.gif with the Link to share URL

  9. Find and copy the bullets.png Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  10. Find the text images/bullets.png within the default.css file and replace it with the bullets.png Link to Share URL you just copied.

    Found within the class .theme-default .nivo-controlNav a under background. It should look something like this below.

    replace images/bullets.png with the Link to share URL

  11. Find and copy the arrows.png Link to Share URL from Nivo Slider Link to Share file you created. (NOTE: make sure you are using the URL with the uc modification to it, otherwise it will not work)

  12. Find the text images/arrows.png within the default.css file and replace it with the arrows.png Link to Share URL you just copied.

    Found within the class .theme-default .nivo-directionNav a under background. It should look something like this below.

    replace images/arrows.png with the Link to share URL

  13. Save the default.css file. (NOTE: Make sure you save the default.css file to the default folder that will sync to your Google Drive account automatically.)

  14. Start Google Drive on your computer and the default.css should automatically sync to your Google Drive account.

STEP 7 Done! Your default.css file has been modified. Only one (1) more files to Edit / modify before you launch your very own Nivo Slider Demo on Google Sites.

On to STEP 8: Edit Nivo Slider demo.html file

Back to STEP 6: Edit Nivo Slider style.css file



STEP 6: Edit Nivo Slider style.css file

posted Jul 10, 2012, 7:05 PM by Wohphi Communications   [ updated Feb 2, 2013, 12:36 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 6: EDIT NIVO SLIDER STYLE.CSS FILE

The Nivo Slider style.css file needs to be modified to reflect the new file locations for your Nivo Slider Demo on Google Drive.
  1. Go to your Google Drive folder you recently setup on your computer

    Google Drive on your computer

  2. Find the Nivo Slider folder and files your recently downloaded

  3. Open the Nivo Slider folder then find and open the demo folder

    Google Drive Nivo Slider demo folder

  4. Find the file titled style.css and open it in an editor

  5. Find the text / id #dev7link, about line 73.

    Nivo Slider style.css - id - #dev7link

  6. Cut and paste the complete id for #dev7link to a Google Document or Note Pad file and title it Nivo Slider dev7link id.

    Nivo Slider style.css - id - #dev7link - removed

  7. Save the style.css file. NOTE: Make sure you save the style.css file to the demo folder that will sync to your Google Drive account automatically.

  8. Start Google Drive on your computer and the style.css should automatically sync to your Google Drive account.

STEP 6 Done! Your style.css file has been modified. Only two (2) more files to Edit / modify.

On to STEP 7: Edit Nivo Slider default.css file

Back to STEP 5: Modify Nivo Slider files Link to Share URLs



STEP 5: Modify Nivo Slider files Link to Share URLs

posted Jul 10, 2012, 9:07 AM by Wohphi Communications   [ updated Feb 2, 2013, 12:36 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 5: MODIFY NIVO SLIDER FILES LINK TO SHARE URLS

The purpose of modifying the Nivo Slider, Google Drive, Documents, Links to Share is to allow us to call the files in our html, css, and js files all the while why we are hosting them in our very own Google Drive account.
  1. Open the Google Document file titled Nivo Slider Links to Share or the file you recently created that includes all the Links to Share URLs for the Nivo Slider files. Perhaps your Google Document will look something similar to this below.


    Nivo Slider Google Drive Links to Share

  2. Next within your Google Document you need to make a small modification to all the links. Change the text open (the red text in above image) to the text uc. Your links within your Document should now look something similar to this below.

    Modified Nivo Slider Google Drive Links to Share

Finished STEP 5! You now have the correct URL locations for your Nivo Slider files to call within the various file types as html, css, js, etc. You are almost ready to launch your very own Nivo Slider Demo hosted within your very own Google Drive account.

On to STEP 6: Edit your Nivo Slider style.css file

Back to STEP 4: Share Nivo Slider files on Google Drive


STEP 4: Share Nivo Slider files on Google Drive

posted Jul 10, 2012, 8:43 AM by Wohphi Communications   [ updated Feb 2, 2013, 12:35 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 4: SHARE NIVO SLIDER FILES ON GOOGLE DRIVE

The purpose for sharing the Nivo Slider files in Google Drive is to allow you to use your files anywhere on the Web. In order to access your files stored on Google Drive through the Web you will need to acquire the Link to Share URL.
  1. Go to drive.google.com

  2. Open your Nivo Slider folder allowing you to view all the sub-folders

    Nivo Slider files in Google Drive

  3. Next click the check box of jquery.nivo.slider.js

  4. Additional buttons will appear at the top click on the More button

  5. Scroll down to Share then over to Share and click Share.

    Share Nivo Slider files in Google Drive

  6. Now the jquery.nivo.slider.js file Sharing Settings should appear. Under Who has access click the Change link.

    Retrieve shared link for Nivo Slider file in Google Drive

  7. Now select the option Anyone who has the link can view

  8. Click the Save button for Sharing settings visibility options

    Visibility for Nivo Slider file in Google Drive

  9. Now copy the URL in the Link to share text box for jquery.nivo.slider.js in Sharing Settings.

  10. Next create a new Google Document, titled Nivo Slider - Links to share or some other file you will easily remember and have access to.

  11. Paste jquery.nivo.slider.js Link to share URL into the new Google Document title it Nivo Slider - Links to share . (NOTE: Don't forget to label each link with the file name it refers to.)

    Private Nivo Slider file in Google Drive

  12. Repeat parts 3 through 11 for all the files within the Nivo Slider folder, including sub-folders demo, demo>images, and themes>default. Perhaps your Google Document will look something similar to this below.

    Nivo Slider Google Drive Links to Share


  13. Double Check that you have all the Google Drive Link to Share URLs for your Nivo Slider Demo files. Use the list below as a reference.
  • nivo_slider - collection (folder)
    • jquery.nivo.slider.js
    • jquery.nivo.slider.pack.js
    • license.txt
    • nivo-slider.css 
    • README

  • nivo_slider > demo - collection (folder)
    • demo.html
    • style.css

  • nivo_slider > demo > images - collection (folder)
    • dev7logo.png
    • nemo.jpg
    • toystory.jpg
    • up.jpg 
    • walle.jpg

  • nivo_slider > themes > default - collection (folder)
    • default.css
    • arrows.png
    • bullets.png
    • loading.gif

STEP 4 Done! Sweet, all the files are shared and ready for service. You are well on your way to hosting your own Nivo Slider Demo through Google Drive.

On to STEP 5: Modify Nivo Slider files Link to Share URLs


STEP 3: Download Nivo Slider

posted Jul 10, 2012, 8:39 AM by Wohphi Communications   [ updated Feb 2, 2013, 12:35 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 3: DOWNLOAD NIVO SLIDER
  1. Go to dev7studios to download the latest version.

  2. Click the download button for the jQuery Plugin.

    download Nivo Slider jQuery Plugin

  3. Once the download is complete, unzip the files into the Google Drive folder you recently created.

    Google Drive computer folder

  4. These files will automatically sync with Google Drive once you start Google Drive on your computer.

STEP 3 Done! Awesome you now have the Nivo Slider files on your computer and in your Google Drive account.

On to STEP 4: Share Nivo Slider files on Google Drive



STEP 2: Download Google Drive

posted Jul 10, 2012, 8:32 AM by Wohphi Communications   [ updated Feb 2, 2013, 12:18 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2
Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 2: DOWNLOAD GOOGLE DRIVE
  1. From within Google Drive locate the Download Google Drive link on the left underneath your Drive folders.


  2. Next read through the Google Terms of Service and Google Apps Terms of Service and if you accept click the Accept and Install button, otherwise click Cancel.


    Upon accepting the Google & Google Apps Terms of Service, Google Drive will commence installing Google Drive, which normally takes a few seconds (45 or more). While directing you to their Thank You for trying Google Drive page. 

    download Google Drive Thank You

    Upon completion of installation, Google Drive will automatically launch on your computer and ask you to login to your Google Drive account.

  3. Login to your Google Drive account on your computer to setup Google Drive.

  4. A box labeled Getting Started Step 1 of 2 and titled Welcome to Google Drive allows you to Opt In to share crash report and usage statistics with Google. Select whether you want to share or not and click next.

    Welcome to Google Drive

  5. Now your on Getting Started Step 2 of 2, titled Google Drive on the Web. !important! Don't jump to clicking next to quickly. You have two (2) options here Start Sync or Advanced Setup.

    Google Drive on the web

    1. Start Sync: before you click Start Sync understand that the default is your My Documents folder within your computer (PC). So, if you are cool with having access to your entire document list via your new Google Drive, which is limited to 5 Gigabytes. Click Start Sync and skip to STEP 3: Download Nivo Slider.

      NOTE, we recommend you still click Advanced Setup that you may select the folders you want to have sync within your My Documents folder to your Google Drive account. This prevents unwanted folders and files cluttering your Google Drive account.

    2. Advanced Setup recommended why it allows you to choose an existing folder or create a new folder for Google Drive to sync with; manage which folders are permitted to sync; and decided whether you want to start Google Drive automatically when you start your computer.

      Advanced Setup - Google Drive

      For these instructions we are going to create a new folder titled Google Drive on our Desktop. Continue to section 6 to create a new folder.

  6. In Advanced Setup for Folder Location click the button Change. A window titled Browse For Folder should appear.

    Browse for Folder

  7. Click the button Make New Folder and rename new folder to Google Drive.

  8. Click another folder then re-click Google Drive folder you just made. The name Google Drive should appear in the Folder text box.

  9. Click OK

    Advanced Setup - Google Drive

  10. Sync Options there are no folders in the new folder you just created, we will skip this option. And leave checked Sync Google Docs files. This can be updated later at any time through Google Drive Preferences.

  11. Misc. decided if you want to Start Google Drive automatically when you start your computer.

  12. Click the button Start Sync.

STEP 2 Done! Google Drive is now on your computer.

On to STEP 3: Download Nivo Slider

Back to STEP 1: Sign in to Google Drive


STEP 1: Sign in to Google Drive

posted Jul 10, 2012, 8:11 AM by Wohphi Communications   [ updated Feb 2, 2013, 12:17 PM ]

Wohphi logoNivo Slider for Google Sites
line dash
Wohphi - Building Better Communication One Person & One Business at a Time
OPTION 2

Use Google Drive to host Nivo Slider Demo files
For the DO IT YOURSELF'ers

STEP 1: SIGN IN TO GOOGLE DRIVE
  1. Go to drive.google.com

  2. Enter your username and password. Don't have one. No worries. Now is the time to get one, go ahead and sign up for your Google Drive account and login.

  3. You should now see a page something like this below, minus the Wohphi logo.
Inside Google Drive


STEP 1 Done! The foundation for hosting Nivo Slider in Google Drive has begun. And the fun stuff is just ahead.

On to STEP 2: Download Google Drive


1-9 of 9