Home / Technology and Science / How to do More with Google Sites and use Advanced embed features!

How to do More with Google Sites and use Advanced embed features!



Do extra with Google Sites and change into an influence consumer nowadays! Embed slideshows or carousels, Cards, Foldables, collapsible and many extra options nowadays with the following tips and tips! This video is a complete educational of ways you’ll do it!

Impress your scholars, coworkers and buddies with a sleak design and skilled taking a look Google Sites. No longer does the limitation of Google Sites have to imply a elementary site. Click at the timestamps to in finding related classes of the video.

Timestamps of the Tutorial:
zero:13 Introducing the Examples
1:30 Create a clean Google Sites
2:30 Overview of W3 Schools and Bootstrap
three:12 Create a brand new Page on Google Sites
three:25 Animated Headers for Google Sites
four:14 Adding a slideshow or Carousel to Google Sites
6:42 Indicators for the Slideshow
6:57 Insert your personal photographs for the slideshow
7:30 Find royalty unfastened or CC0 Photos to use.
eight:13 Sharing settings of your photographs on Drive
eight:50 Change the URL to create a hosted Image
10:46 Navigation buttons for the Slideshow
11:10 insert the slideshow onto Google Sites
12:30 insert a collapsible or fold impact
13:50 Tweak the collapsible code
14:15 insert the fold/collapsible onto a Google Sites
15:13 Create Custom Cards
16:15 Change the font of the cardboard
16:55 Material design styled shadow impact for the cardboard
17:15 Hover over impact for the cardboard
19:05 Review and thanks for observing

Links used within the Video
Demo Website with hyperlinks and code: https://sites.google.com/view/slideshowdemoflipped/home
W3 Website with Bootstrap examples: https://www.w3schools.com/bootstrap/default.asp

Androidify to create the avatar: https://androidify.com/
Great photographs, Creative Commons zero: https://www.pexels.com/

My Google Sites Playlist with extra guidelines and tips:

🔴 Don’t fail to remember to SUBSCRIBE nowadays for extra movies!
http://bit.ly/FlippedYT

🔴 AFFILIATE LINKS:
How I make my movies: Techsmith Camtasia and Snagit : http://bit.ly/FlippedTechsmith

Looking for a Host? www.bluehost.com/observe/flippedclassroom/

✅ SUPPORT THE CHANNEL BY SHOPPING ON AMAZON:
https://www.amazon.com/?tag=flippedyt-20

✅ OR CHECK out MY PRE-SELECTED listing of my ALL-TIME Favourite EDTECH TOOLS:
https://www.amazon.com/shop/flippedclassroomtutorials

🔴 Find me on SOCIAL MEDIA:
My Official EduFlip Website: http://eduflip.net
Follow me on Twitter: https://twitter.com/sdcthailand
Find me on Facebook: http://bit.ly/FlippedFacebook
And on Google Plus: http://bit.ly/FlippedGooglePlus

🔴 get CLASSROOM RESOURCES nowadays:
My TPT Store: https://www.teacherspayteachers.com/Store/Eduflip
My Educents Store: https://www.educents.com/eduflip
Eduflip Resources: http://www.eduflip.net/p/free-resources.html

✅ Work with us:
http://training.eduflip.net

or SUPPORT THE CHANNEL thru Patreon:
https://www.patreon.com/eduflip

About mujtaba

Check Also

Lenovo A5 Unboxing & First Look – Budget Phone 🔥🔥🔥

Namaskaar Dosto, is video mein maine aapse Lenovo A5 Smartphone ke baare mein baat ki …

44 comments

  1. Flipped Classroom Tutorials

    Want to add a Comment section to your Google Sites? Check out my latest video: https://youtu.be/gkB0yivanZA

  2. Christina Reuter Mitchell

    Brilliant tutorial on VITAL G-Sites elements. And outstanding teaching skills. Thank you very much.

  3. Charlotte Lees-Peyer

    Hi there, I've just used the "Collapsible" – working well 🙂 I have to place a manual with lots of chapters & sub-chapters (up to 15 per chapter) on a website; can I repeat the code or is there a better way to do this? Thanks & Greetings from New Zealand

  4. Awesome! Love the animated header!

  5. Excellent!

  6. Please make more

  7. thanks , follow your steps , i add the code but dont show on page , what would go wrong ?

  8. The new Google Sites layout it's plain horrible, even when I try to embed HTML code instead of using the default editor, it creates a sub-box window that's smaller than it's content and can't be expanded….it's just a mess.

  9. This doesn't work cross-browsers on Firefox the embedded code didn't even load. This is a no-go.
    And you particular, load a lot of libarys on which you have no control over, which could be closed in the feature, and you certainly don't know if it won't change in these libaries. That's just stupid to be honest.

  10. My slideshow doesn't show up on Google Chrome but when I opened it up on Microsoft Edge, it showed up. Help!

  11. Is it possible to import a cmplete html page to google sies (from head to /body)

  12. Thanks you so much can't wait to show this to my teacher

  13. This is great. I'm wondering if a link can be added to the collapsible? For example, Chapter 1 as the top visible layer, Chapter 1.1 as the first collapsible, and a link to a video or a picture with the Chapter 1.1 layer.

  14. Excelente aporte.

  15. Thank you for the tutorial! One of the features was what I was looking for (collapsible buttons). I'd like to change the color of the text in the box, not the header. I've played with trying to over-ride the CSS but was unsuccessful. Do you have a suggestion?

  16. Holy crap! It's about time! This has been the most informative and helpful tutorial of advanced Google Sites operations I've ever come across. And I've been looking for a LONG time! Thank you! Massive thumbs up!

  17. Awesome

  18. Priyanshu Chakravarti

    how to remove horizontal margin

  19. Informative video; I've already made a carousel and a collapsible based on your instructions. I've always wanted to learn to create a carousel and now I can. Thank you!

  20. Howdy! Love your work! How to I make my email into a hyperlink in my Google Site?

  21. I have a Google business site . How Can I migrate to Google site?

  22. Is there any way to use Bootstrap for Navbar and header?

  23. Did you do anything special when you downloaded the avatars from Androidify? When I download them they seem to have partially inverted colors. Is there something I'm doing wrong? I appreciate any help with this anyone can offer!

  24. phawat pakhakorntanatorn

    Thanks

  25. I have existed intranet website. How use embed function to appear in the site page directly without user click the link

  26. Thank so much Fantastic tutorial. One question, can you change the duration of the photo??

  27. Is any way to add html / css buttons to New Google Sites?

  28. Fernando Pizzani

    Thank you for a great tutorial. I got really excited thinking that this technique would fix all the New Google Site shortcomings. So I followed your tuts, then I added a Bootstrap Jumbotroon with drop shadow and all…but my excitement was short-lived. The embedded code works fine on a desktop screen but it doesn't work on small screens, as the iframe scales down proportionally cropping the content inside. Have you come across this issue and know of a solution?

    Cheers and thanks again for your generosity in sharing your knowledge

    Just tested the accordion example, as well as embedding html with inline styles. In both cases the iframe will scale down and add a scroll bar, when viewed in a small screen, which is not an elegant solution. So as far as I can see all these examples of embedding Bootstrap assets and code have no use in a real word situation where sites need to be fully responsive. The only one that seems to work across all screen sizes is the slide show module.

  29. Account with no name

    Can we put a payment option in google sites?

  30. e-learning para profesores

    Saludos desde México. Muchas gracias por compartir este excelente material. ¿Qué programa usas para grabar la pantalla de tu computadora?

  31. Audra Arman-Richardson [CPD]

    Great ideas. I am very excited to implement these. Is it possible to add video and/or links within the collapsibles? or only text? If possible, what needs to be added?

    Thanks in advance!

  32. Did they take away the ability to control access to certain pages in the new google sheets? In the old version, I used to have certain pages that could only be viewed by specific google user accounts. I guess that ability is gone now.

  33. Is there a way to prevent the slideshow from flipping through the images automatically?

  34. Best video. Thank always

  35. where can i get good Animated Headers ?
    or how can i search for one ?

  36. HI! thanks for this tutorial!!
    How can i put a link in each slideshow image so when visitors click on them they redirect to another page?

  37. Hi! Is there a possibility of making the cards into a link so that someone can click on it and then be sent to said link?

  38. Álvaro Guzmán Parrochia

    There is a way to remove the footer on the google sites? The one which says "Made with Google Sites"

  39. Where did you get the GIF file without the watermark? (Excellent video)

  40. Thank you! But after i embed it into my sites, some ios devices cannot view slideshow.

  41. Q: How do I get rid of the white space at the sides of a slideshow?

  42. Flipped Classroom Tutorials

    For those wondering where I get my animations and gif files from… check out https://www.motionelements.com/?ref=6296xaccx

  43. Totally revolutionized my site! Thank you so much!

  44. Brilliant! Excellent production and explanation…very calm and confident!

Leave a Reply

Your email address will not be published. Required fields are marked *