HomeОбразованиеRelated VideosMore From: Flipped Classroom Tutorials

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

1890 ratings | 91718 views
Do more with Google Sites and become a power user today! Embed slideshows or carousels, Cards, Foldables, collapsible and many more features today with these tips and tricks! This video is a full tutorial of how you can do it! Impress your students, coworkers and friends with a sleak design and professional looking Google Sites. No longer does the limitation of Google Sites have to mean a basic website. Click on the timestamps to find relevant sessions of the video. Timestamps of the Tutorial: 0:13 Introducing the Examples 1:30 Create a blank Google Sites 2:30 Overview of W3 Schools and Bootstrap 3:12 Create a new Page on Google Sites 3:25 Animated Headers for Google Sites 4:14 Adding a slideshow or Carousel to Google Sites 6:42 Indicators for the Slideshow 6:57 Insert your own images for the slideshow 7:30 Find royalty free or CC0 Photos to use. 8:13 Sharing settings of your images on Drive 8: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 effect 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 card 16:55 Material design styled shadow effect for the card 17:15 Hover over effect for the card 19:05 Review and thank you for watching Links used in the Video Demo Website with links 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 images, Creative Commons 0: https://www.pexels.com/ My Google Sites Playlist with more tips and tricks: https://www.youtube.com/watch?v=Aflbbvw25xA&list=PLwXXOxvDboeZ5C9XI0gU_Wed3yzlfYf0m 🔴 Don't forget to SUBSCRIBE today for more videos! http://bit.ly/FlippedYT 🔴 AFFILIATE LINKS: How I make my videos: Techsmith Camtasia and Snagit : http://bit.ly/FlippedTechsmith Looking for a Host? www.bluehost.com/track/flippedclassroom/ ✅ SUPPORT THE CHANNEL BY SHOPPING ON AMAZON: https://www.amazon.com/?tag=flippedyt-20 ✅ OR CHECK out MY PRE-SELECTED list 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 today: 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 through Patreon: https://www.patreon.com/eduflip
Html code for embedding videos on your blog
Text Comments (283)
Want to add a Comment section to your Google Sites? Check out my latest video: https://youtu.be/gkB0yivanZA
Prashant Mandora (6 months ago)
Thank you for making these awesome videos. Is it possible to embed a Google spreadsheet in my Google site with all the features still available (filters, images and formulas), please advise. Thanks again!!
k8sher (6 months ago)
Can you teach us non-coders how to make any embedded iframes responsive on Google Sites? Your channel and videos are excellent! A++++++
EebamXela (1 day ago)
Great video thanks! Is there a way to embed a code that will automatically scroll down the page to another section? For example on my FAQ page of my website i want to list the questions at the top, and when you click on one, it scrolls to the answer further down the page.
Colin Rebello (3 days ago)
Very nice video. Thanks !. This video helps to improve the layout, make the site look good etc. ..ie the UI part Thats one aspect of a webapp. The other requirement of a webapp is Business logic which usualy involves writing code and that means developers getting involved.. or does it ? The website below demos a way for non developers to add business logic to forms by coding the business logic as Formulas in a Spreadsheet and linking HTML to Spreadsheet. See this at : https://www.colinrebello.com/GoogleForm.html
Thank you for commenting and getting involved in the community. Great little website you've created there! How have you been using this and in what scenario? Would love to hear and find out more.
xmasterblue (3 days ago)
You are wonderful! Thanks a lot.
Thank you! It's always great to read comments like this. Happy you found the video helpful.
myupl nv (3 days ago)
Thank you! Very helpful video!
Anime Frissons (6 days ago)
your video is so helpful 👍👌thanks
Thank you!
Venuja Adikari (8 days ago)
For the card did you find a GIF or did you code it?
Brilliant! Glad it worked well!
Venuja Adikari (1 day ago)
+Flipped Classroom Tutorials Thanks man i tried it and came out amazing
Hi, That was a Gif made with the app androidify. You can easily make an android version of anyone!
Keith Harris II (12 days ago)
They're has to be an easier way to do this... Is this a free builder? Dragging and dropping seems so much easier with other paid builders. Domain names? Favicons? Custom footers? PRODUCT PAGES? I want to use Google for easy integration with other Google products I use, and seemless functionality in the Google ecosystem.
Dalton Dowding (13 days ago)
Is there a way to change the background color of the list? It's a white background and my websites background is grey. Is there any where in the code that I can change it to grey?
Porky Porky (15 days ago)
Hey I have a question. Can I make the Collapsible with Pictures?
Daniel Ogilvie (18 days ago)
That was great! You have a new subscriber. Can you tell me a little more about the cards? I am not sure what they are... Why I'd use them... How to find them or make them... Thank you!
Hi, welcome to our community! I hope yoi fins many more tips and trick or things you can use. In regards to the cards, i wnated to create something that looked like the material design language with a hover effect. I juat liked the look of it. You could use it to highlight different products, ideas, people, etc.. on your website.
Daniel Ogilvie (18 days ago)
Wait I found the link to the cards below.
Julius Laurella (18 days ago)
sir where to get that google id thing?
If you mean the google file id, that can be found in the url of a 'share link'. I tried my best in the video to highligh that section but its usually a string of random digits and letters.
Drew Mills (18 days ago)
Well done, thank you!
Glad you found it helpful.
Bioconstrucción GDL (20 days ago)
Amazing video, thank you so much! Just one question: would it be possible to do something similar to the carousel but with text and hyperlinks over the images? Thank you!
If you tweak the html to include text and hyperlinks, it should be possible to have each text link navigate to another page.
Florida Network USA (25 days ago)
Very good trying out some other css implantations
Thank you! Glad you found it interesting.
Alejandro Murillo (25 days ago)
could be possible to create call button? On google sites
Hi, yoi can use the following https://developers.google.com/web/fundamentals/native-hardware/click-to-call/ to turn hyperlinks into call buttons. Hope this helps.
Najah R (1 month ago)
when you add in the link to put a picture for the sideshow (u did 3 pics) can we do more than that and if we can how?
Najah R (12 days ago)
+Keith Harris II thank you for the advice and feedback i probably will do it , also just so you know i do have a favicon so ye......
Keith Harris II (12 days ago)
+Najah R nice website. It would be even better if your site address was "worldofmarshmellow. com" or something like that instead of "sites.google.com....". And the footer at the bottom says "Made with Google Sites". I particularly don't like that. I imagine you can change the footer within the code, but the domain name has to be in the address bar of the browser, and a favicon image should be placed on the tab for the most professional look. It would just make your content look that much more credible and polished and less amateur-ish feel. I still like the content on your site in spite of all that. Your videos are totally professional quality and the mixes for the songs are quality too. Good job!
Najah R (30 days ago)
+Flipped Classroom Tutorials Thank You So Much!! Would it be ok if you could check out my website? this is the link: https://sites.google.com/coombe.org.uk/world-of-marshmello/h-o-m-e
You certainly can. You will have to copy the oart of the code where you insert the image. Look for the code that repeats itself 3 times ( looks like <img /> ) then copy the vlock if cose however many times you want. Hope this makes sense.
John Morrison (1 month ago)
Awesome, thanks man.
Glad you found it useful!
Bags of Taste (1 month ago)
I tried to do the slider thing but my sharing link for my photos from Google Drive does not look like the one you've posted unfortunately :-( It looks like this: https://drive.google.com/file/d/1IE7HE9qw78SHYXbpJr-TNBMw-_ulZoAN/view?usp=sharing there is no id= any more However I have worked out that you just need to take the ID which is the bit after file/d/ .... and before the /view?usp=sharing and add it on to the end of the code you put of https://drive.google.com/uc?export=view&id= then it will still work.
Yes. If you check the description of the video, you will find the link to use when files have been shared. You need to change the shared file into a hosted file by using this url trick. Glad you found an answer to your problem!
Chyrez Sandblom (1 month ago)
awesome. would be great if you show how to make an contact form without google form. with im not a robot widget. that sends to your hotmail email. hope you make more films like this.
Quintessa Anderson (4 days ago)
I'm curious how to do this as well!
Jonathan Barrera Gil (1 month ago)
Man! you be a grate helper with this introduction to the advanced features on google sites, Thanks you
nati (1 month ago)
Wow very much thanks !!! It was an excellent guide !! I wanted to ask please, I saw your video also on adding a personal domain to the site, but I have a private Google Account ... so if I understand correctly, I have no chance to change the domain to my personal domain? Thank you!!
I would like to integrate my google sites with Hootsuite is that possible? also, I´m having problems with facebook comments box could you help me? Thanks, for everything, love your tutorials.
Pacman Animaties (1 month ago)
Best tutorial ever!
Richard Denell (2 months ago)
Man you are gooood and you have instilled a sense of confidence in my endeavor to build my site. Many Thanks
Thats always great to hear! Have fun creating your website and I would love to see what you end up building.
Esha Shah (2 months ago)
My life is complete
Ludwig Baier (2 months ago)
Geoff Kelly (2 months ago)
Thank you Thank you
maite vanucci (2 months ago)
This tutorial is amazing. but need help! I am sure that I used the code correctly for creating the slide show. in the preview, the pictures are working but when I paste the code on my google sites they disappear. could you help me ?
Dániel Kovács (2 months ago)
what type of vide can i use, for video backgound?
You xan uoload gif files as backgrounds. So convert your video into a gif and it will work.
Asher Obeja (2 months ago)
Hey, can i use google sites as may landing page for a marketing campaign?
Absolutely, you can use any website builder.
Adam Dunn (2 months ago)
Where did you find your first gif with just the water moving?
Have a look for Cinemagraphs and you will find many amazing images! Just make sure you check the usage rights :-)
zack mezera (2 months ago)
Thank you so much, this adds a ton of possibilities to my nonprofit's backend site. Quick question: would it be possible to mix some of the native embed options (like Youtube videos or especially charts imported from Google Sheets) into these bootstrap setups? For example, could someone embed auto-updating google charts into the accordions you showed? Thank you so much for your thoughts!
zack mezera (2 months ago)
+Flipped Classroom Tutorials Thanks for the reply! I'll try to play around with it next week too, see what happens…
I have never done this myself, but in theory it should be possible. Would be great to hear if anyone else has tried it. If I get some free time I'll look into it :-)
nmp (2 months ago)
Thank you for sharing. Lots of useful information.
Thank you. Appreciate the feedback.
Jack Sellers (2 months ago)
It did not work on my chromebook
Armin Heurich (3 months ago)
I can't thank you enough for this video! You have really helped me and my library out with this.
This is ABSOLUTELY THE BEST tutorial for Google Sites!
Thanks! Appreciate that!!
Nanda Rahmawan (3 months ago)
Can u make tutorial how to insert google sign in on google sites?
Unacceptable_TBH (3 months ago)
its jif
jif gif ;-) Let's agree on Graphics Interchange Format. Agreed, Steve Wilhite pronounced it jif, still doesnt feel right rolling off my tongue though haha
rmcellig (3 months ago)
I am thinking of adding an audio playlist to my page. Is this possible? I would like to try this out with some audio files I have on my Google drive. Great video BTW!!😂
https://youtu.be/irSTS8CF4eU Here you go friend!
rmcellig (3 months ago)
If you are able to, could you do a video on how this is done. I really like the way you explain things and I'm sure there are other people who would be interested in this as well.
rmcellig (3 months ago)
+Flipped Classroom Tutorials let me try that out and I'll post back. I have been using WordPress for the past few years and I sure would like to sing if my website experience. That's why I'm thinking of using Google sites. Thanks again!!! 😂
You can definitely do that. Make sure the files are viewable to anyone with link, then using an iframe code you can embed the file using a url trick. Change the word 'view' into 'preview'. That should do the trick. Should look like this: <iframe frameborder="0" width="300" height="150" src="https://drive.google.com/file/d/123xyz/preview"> </iframe>
Marlene Mayr (3 months ago)
Thanks a lot for the amazing video. But sadly somehow it doesn't work for me. No matter what code I try to embed (even the simplest ones I can imagine) the area is just white. It looks just like the area in your video before it loads the slideshow but loads no further. I have a great internet connection so it can't be loading problems. Does anybody have an idea what could be the reason?
Thats strange. Have yoi selected the code instead of link option? If you are happy to share the site I could always have a look at it.
Ryk Good (4 months ago)
It's odd. When I embed the code, it doesn't seem to take. This is my second attempt (just to make sure that I'm following the steps to a "T") and it still doesn't seem to work.
Charles Alphonse (4 months ago)
Thank you very clear and concise video, slideshow is my favourite
Great to hear you found it helpful. I agree, slideshows are a great tool to use!
SKD Admin (4 months ago)
This demo worked fine in bootstrap but did not work in google site. Any suggestions?
Strange have you tried it with any other code from bootstrap as it might be a tag missing.
SKD Admin (4 months ago)
Yes sir. I double clicked on the area where I wanted the carousel and from the popup, I chose the embed code tab.
Did you use the 'embed code' sub menu when embedding in google sites?
Ojasvi Singh 786 (4 months ago)
144Donn (4 months ago)
Brilliant! Excellent production and explanation...very calm and confident!
+144Donn Thank you. Glad you enjoyed it.
Amber Rizwan (4 months ago)
Totally revolutionized my site! Thank you so much!
For those wondering where I get my animations and gif files from... check out https://www.motionelements.com/?ref=6296xaccx
John Verschragen (4 months ago)
Q: How do I get rid of the white space at the sides of a slideshow?
Quang Vinh Phung (4 months ago)
Thank you! But after i embed it into my sites, some ios devices cannot view slideshow.
Carlos Wild (5 months ago)
Where did you get the GIF file without the watermark? (Excellent video)
There is a way to remove the footer on the google sites? The one which says "Made with Google Sites"
That is currently not possible.
juan cediel (5 months ago)
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?
Surjit Das Gupta (5 months ago)
Thanks for this video. Make more tutorials like this...😁😁
Francisco Castro (5 months ago)
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?
omar basem (5 months ago)
where can i get good Animated Headers ? or how can i search for one ?
Hi, A great place to start is https://www.pexels.com/search/gif/ anoter option is to do an image search on googe and select the animated option under the tools menu. Have fun!
Wow Wow (5 months ago)
Best video. Thank always
Alex Three (5 months ago)
Is there a way to prevent the slideshow from flipping through the images automatically?
Sean Peete (5 months ago)
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.
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!
Saludos desde México. Muchas gracias por compartir este excelente material. ¿Qué programa usas para grabar la pantalla de tu computadora?
Hi. Happy You enjoy the content. I use the latest version of Camtasia for all my videos: http://tools.eduflip.net/Techsmith I absolutely love this program and it is very easy to learn.
Account with no name (6 months ago)
Can we put a payment option in google sites?
Fernando Pizzani (5 months ago)
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.
fomaszdano (6 months ago)
Is any way to add html / css buttons to New Google Sites?
Nathan Finlay (6 months ago)
Thank so much Fantastic tutorial. One question, can you change the duration of the photo??
Yihong Hu (6 months ago)
I have existed intranet website. How use embed function to appear in the site page directly without user click the link
You can use iframes to embed other content, as the embed feature is technically an iframe. Hope this helps.
phawat pakhakorntanatorn (6 months ago)
You're welcome.
Kissing Toast (6 months ago)
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!
Not at all. Have you tried a different file type? Maybe that will help.
Alec Prince (6 months ago)
Is there any way to use Bootstrap for Navbar and header?
Imran Nasim (6 months ago)
I have a Google business site . How Can I migrate to Google site?
Tiffany Moore (6 months ago)
Howdy! Love your work! How to I make my email into a hyperlink in my Google Site?
+Tiffany Moore Google sites should automatically recognize your email and turn it into a hyperlink. If that doesn't work you can manually link to: email:[email protected]
Mrs. D. Meyers (6 months ago)
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!
Priyanshu Chakravarti (6 months ago)
how to remove horizontal margin
Peyman Kalhor (6 months ago)
Do It (6 months ago)
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!
Thank you! Really happy you found it helpful. I'm always trying to create content people can use, hopefully you find more helpful tips and tricks on the channel!
Robert Lucas (6 months ago)
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?
Juan Martin (7 months ago)
Excelente aporte.
Gloria Cotter (7 months ago)
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.
Abdel Neymar (7 months ago)
Thanks you so much can't wait to show this to my teacher
Nouri Anis (7 months ago)
Is it possible to import a cmplete html page to google sies (from head to /body)
Norrey B (7 months ago)
My slideshow doesn't show up on Google Chrome but when I opened it up on Microsoft Edge, it showed up. Help!
Alex Mc (7 months ago)
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.
Delph Soft (7 months ago)
thanks , follow your steps , i add the code but dont show on page , what would go wrong ?
THE Wolverine (7 months ago)
Please make more
THE Wolverine (7 months ago)
Thank you.
Kurt Nilsson (7 months ago)
Awesome! Love the animated header!
Charlotte Lees-Peyer (7 months ago)
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
Brilliant tutorial on VITAL G-Sites elements. And outstanding teaching skills. Thank you very much.
Jeralo (7 months ago)
I liked the animated header.
Mirwan Siregar (7 months ago)
Thanks a lot Flipped...I have tried it, but in the creation of Carousel. The vertical scroll bar display in the preview...How to delete that....?
Lovie Arthur (7 months ago)
Thanks so much for this! I've been trying to figure out how to have cards on the diversity site I'm creating for my org's intranet and this is perfect! Love the carousel too! Super helpful!!!
Caitlin Cramer (8 months ago)
Question.. Using bootstrap I can only show three slides in my carousel. I've coded additional images, and they appear but will not rotate through.
Marc Montague (8 months ago)
Hey, great job on this. I need some help. Any idea why the custom HTML and CSS won't display in the Chrome window. It opens in firefox but not in chrome. I reset chrome to default and still nothing. Any ideas as to which setting I have "stitched on/off" by accident. Any help by anyone would be greatly appreciated.
Carmen Tu (8 months ago)
Hello, first off thank you so much for your video it is really helpful but I'm having some trouble following it and hope you can help me. My images for the embedded carousel are not working and I tried to fix it with your hosting images video but nothing change, the only thing that appears on my site is just a blank box after I embedded the code (everything works well on the Bootstrap site). Please help me fix it, thank you.
Lanny Lewis (6 months ago)
Are you trying to reference your photos from your own google drive?
Anthony Mark (8 months ago)
How do i create my own card and get the code
You can find the full code on the website linked in the description below.
anze klinec (8 months ago)
Tnx dud very helpful.
muthyala maheshkumar (8 months ago)
my images are not showing up..? what might be the reason. pls help me
muthyala maheshkumar (8 months ago)
Flipped Classroom Tutorials tqq
It could be the images are not properly hosted images. If you look at my video on hosting images that might help.
Charlotte Lees-Peyer (8 months ago)
This is great! Thanks so much, from New Zealand :-)
You're welcome! Glad you liked it! Great to see people from all over the world in this community! Welcome!
Holly Gray (8 months ago)
But...how long before Google stops allowing you to embed code??
I see absolutely increasing for them to disallow it at any time in the future. Embedding is a star date feature across the internet and having this within the new Google sites helps them transition from classic sites to new sites.
Joaquín Aizpurua (8 months ago)
Excellent, congratulations
Thanks. Glad you liked it!

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.