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

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

1419 ratings | 70929 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 (225)
Want to add a Comment section to your Google Sites? Check out my latest video: https://youtu.be/gkB0yivanZA
Prashant Mandora (3 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 (3 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++++++
Armin Heurich (4 days 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 (12 days ago)
Can u make tutorial how to insert google sign in on google sites?
Unacceptable_TBH (20 days 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 (24 days 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 (23 days 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 (23 days 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 (29 days 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 (1 month 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 (1 month 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 (1 month 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 (1 month 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 (1 month ago)
144Donn (1 month ago)
Brilliant! Excellent production and explanation...very calm and confident!
+144Donn Thank you. Glad you enjoyed it.
Amber Rizwan (1 month 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 (1 month ago)
Q: How do I get rid of the white space at the sides of a slideshow?
Quang Vinh Phung (2 months ago)
Thank you! But after i embed it into my sites, some ios devices cannot view slideshow.
Carlos Wild (2 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 (2 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 (2 months ago)
Thanks for this video. Make more tutorials like this...😁😁
Francisco Castro (2 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 (2 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 (2 months ago)
Best video. Thank always
Alex Three (2 months ago)
Is there a way to prevent the slideshow from flipping through the images automatically?
Sean Peete (2 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 (3 months ago)
Can we put a payment option in google sites?
Fernando Pizzani (3 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 (3 months ago)
Is any way to add html / css buttons to New Google Sites?
Nathan Finlay (3 months ago)
Thank so much Fantastic tutorial. One question, can you change the duration of the photo??
Yihong Hu (3 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 (3 months ago)
You're welcome.
Kissing Toast (3 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 (3 months ago)
Is there any way to use Bootstrap for Navbar and header?
Imran Nasim (3 months ago)
I have a Google business site . How Can I migrate to Google site?
Tiffany Moore (3 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 (3 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 (3 months ago)
how to remove horizontal margin
Peyman Kalhor (3 months ago)
Do It (3 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 (3 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 (4 months ago)
Excelente aporte.
Gloria Cotter (4 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 (4 months ago)
Thanks you so much can't wait to show this to my teacher
Nouri Anis (4 months ago)
Is it possible to import a cmplete html page to google sies (from head to /body)
Norrey B (4 months ago)
My slideshow doesn't show up on Google Chrome but when I opened it up on Microsoft Edge, it showed up. Help!
Klosteinmann (4 months ago)
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.
Alex Mc (4 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 (4 months ago)
thanks , follow your steps , i add the code but dont show on page , what would go wrong ?
THE Wolverine (4 months ago)
Please make more
THE Wolverine (4 months ago)
Thank you.
Kurt Nilsson (4 months ago)
Awesome! Love the animated header!
Charlotte Lees-Peyer (4 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 (4 months ago)
I liked the animated header.
Mirwan Siregar (4 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 (4 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 (5 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 (5 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 (5 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 (3 months ago)
Are you trying to reference your photos from your own google drive?
Anthony Mark (5 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 (5 months ago)
Tnx dud very helpful.
muthyala maheshkumar (5 months ago)
my images are not showing up..? what might be the reason. pls help me
muthyala maheshkumar (5 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 (5 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 (5 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 (5 months ago)
Excellent, congratulations
Thanks. Glad you liked it!
Hub-e- Office (5 months ago)
Love the cards! Can you put a link on them out to another site or page? Want to use them as "Image buttons"
Absolutely, simply add in the link tags (html) glad you like it.
Holly Kidson (5 months ago)
This makes me so happy!!! I didn't know about Bootstraps! My Google Sites are going to be *ah-maz-ing*.
Ka Win (5 months ago)
Carousel doesnt work in mobile platform. It cant see images . Thank you for excellent tips.
Ka Win (5 months ago)
Thank for your help. :)
Interesting might be the collapsible carousel combination. I will have a look and see what I can find. No promises but I'll do my best.
Ka Win (5 months ago)
PS.I put carousel code into Collapsible everything work fine except on mobile
Ka Win (5 months ago)
No it's just show white screen and my images size is 2mb.
Work fine on my phone (S7) could it be that the images take a long time to load? I used 7Mb images in the example. My mistake...
Aubrey Harrison (5 months ago)
This was a helpful video. Do you have one on creating a searchable database through Google Sheets to your Google Site?
Aubrey Harrison (5 months ago)
Thank you. I used to use Awesome Tables for this but it is no longer an option for me. I was just curious if you had an alternative solution.
Thank you. Not yet, but will add it to my list.
Omer Aviram (5 months ago)
the carousels is working great on web browser but is not working on mobile phones like android. is there a way the make it show? i get the "alt" name shown instead of the actual pic
Omer Aviram Hi, On. Mobile now and the carousel seems to be working fine. I did use very large files for the example so loading can be an issue. What are you experiencing on a Wi-Fi connection? Not sure what could be causing this problem.
Stefano Raineri (5 months ago)
Hi, I have a problem. On w3school my code works, also in Safari, Internet Samsung and Mozilla Firefox...but in Google Chrome (mobile version and computer version) doesn't work. Any ieda?
Stefano Raineri (5 months ago)
Flipped Classroom Tutorials later I'll try. Thank you!
Not sure what could be wrong have you tried running different code? Are you getting any error messages?
Punkypowerslam (5 months ago)
Hello, Wonderful Tutorial! I just had one question. For the cards section, I'd like to add my own character instead. I created one on the androidify website you put up, but what next? I'm not sure how to get an "export view" link. And when I click on the little Google icon underneath my avatar it just comes up with an error page. Can you please advise me on what to do? Thank you
Punkypowerslam (5 months ago)
Thank you very much, I will give this a go:)
Hi you would upload the image to your Google Drive, set it as public and use one of the following methods to get a hosted image link: https://youtu.be/zhwYRPImH9E another method is to amend the url like this: Next: Get a usable URL for a Google Drive image by using the image's ID and appending it to this URL: https://drive.google.com/uc?export=view&id=YourIdHere hope this helps you.
elarte commissions (5 months ago)
Hi I want my google site to show up in google search . Is this possible?
Riaz Mohammed (5 months ago)
How do I add a call button like the one on the ready-made google my business site?
Hi. You would have to manualy create a call button and embed this as html. The first step is to find a button image or create one you will use. Then you change the following html code: <a href="tel:5555555555"><img src="http://www.domain.com/phone-icon.jpg"></a> replace the 55555 with your number and the link domain with the link to the image file. Hope this helps.
João Carlos TR (5 months ago)
Brilliant! Thank you for sharing. Great to see how other people use these amazing tools!
João Carlos TR (5 months ago)
see this page of the site: https://sites.google.com/uem.br/hospital-universitario/hospital/implante-coclear
João Carlos TR (5 months ago)
With your class I built this one: http://www.hum.uem.br thank you for teaching
+João Carlos TR Let me know what else you would like to do in Google Sites and I will try my best to fins a way.
+João Carlos TR glad you liked it
Gary Cole-WM (5 months ago)
How do you change the image of the card?
Gary Cole-WM (5 months ago)
Thanks again!
There is a simple workaround that will allow you to host an image on Google drive. Here's a video I made in this last year https://youtu.be/zhwYRPImH9E do check the comment section if that video as well. As since making it a shorter and url trick has become available as well. Hope this helps and I'm happy to answer your questions. Welcome to the channel and community!
Gary Cole-WM (5 months ago)
Thanks for the quick response. May I ask where one would upload the image to? I've followed your carousel tutorial without a hitch, but replacing the image on a card is giving me trouble...
You would upload a different image and use the url of that image where the html says img src. Hope this helps
Mike Ehrmantraut (5 months ago)
Cori Ortega (6 months ago)
Hi Seth, thank you for making an advanced tutorial. The features you included are very useful. Plus of course, unlike a lot of Google Sites tutor, you really prepared your course materials. Plus you started by showing the finished work (what are we going to build) which means you really know how to teach this type of topic :-) Got one question for you: Is it possible to make the source text of the Accordion dynamic, like it's taken from specific rows of Google Sheets, instead of hardcoded embedded text? Thanks a lot and more power to you!
+Cori Ortega first of all, thank you so much for taking the time and leaving a comment! To answer your question, in principle it sgould be possible to make the code dynamic by referencing an external source in the html code. I have personally never done this as using tools such as sheetu and awsometables have always allowed me to embed sheets data in a visually appealing way. I might look into thia over the summer as it sounds like a fun little project to play around with.
Larry Lloyd (6 months ago)
Hi Sethi Thank you for this video tutorial, it's plain, simple & straight forward. You teach, using video medium extremely well. I'm very grateful for the service you give. I will certainly subscribe to your channel. (& give it a thumbs up) Thanks again.
You're welcome. Thank you for your feedback and comment. Really appreciate it!
Tempest Teller (6 months ago)
I got an error 404 when I tried to use the view link a bit of help?
A 404 stands for page not found. So I would double check the url you have used.
Mr Wood (6 months ago)
Excellent, really useful. Thank you.
Vanduzel (6 months ago)
is there some problem with the embed features? I can't see them on your sample website, and can not implement them in mine.
Not that I have noticed I will have another look tonight :-)
George Chiramal Davis (6 months ago)
Is there a way to have conversational comments? Also is it possible for them to get a notification if I or someone else replies to them?
suhas krishna (6 months ago)
Thank you for this useful video. waiting for your next video on this topic.
Thank you. I appreciate you leaving a comment.
Manish Kumar (6 months ago)
Thank you for such a great tutorial. When I tried a card in my site, along with the shadow effect I also see a text "Custom embed" appearing on mouse hover. Is it possible to remove that or modify it into something else?
Nirmal Giri (6 months ago)
Excellent video. Definitely going to implement slideshow & collapsible on the google website I am working on. One question, can I add images under collapsible. Like under "item 1", add image and description? How can I do this?
I've never done this but in theory this should be possible by putting your img tag inside the collapsable. The image tag looks like this <img src='UrlOfImage'> that would go where your text usually goes. I might have a go at it myself tonight. + you can host the image on your Drive. ( https://youtu.be/zhwYRPImH9E ) hope this helps. Let me know how you get on.
Wai Ting KWONG (6 months ago)
That’s really useful! I am trying on the carousel functions. However the photos turned 90 degree clockwise. How should I turn it upright ?
Afraid that's not an option :-)
Wai Ting KWONG (6 months ago)
Thanks thanks! Oh btw is it possible to delete the line “this website is made by google sites” at the bottom ?
Make sure that your source has to photographs in the correct orientation. Glad to hear you found the video helpful!
Thank you for an amazing tutorial. I'm definitely subscribing.
Great to hear that! Welcome to the community!
Janet Dean (6 months ago)
Thank you for the great tutorial! I wanted to place text under one of the accordion folds with a link. Can you tell me how I would go about doing that? I was able to place text but could not link it. Thanks in advance.
Hi you would add the following code into the text part of your accordian code : <a href="https://eduflip.net">I'm a link</a> Change the Text in between the " " to any URL you want and the text in betwee > and < to be the text that will be highlighted. I hope this makes sense. If not, give me shout :-)
WOmanofthefield1 (6 months ago)
Can you show how to create to-do lists, tracking progress, and also stream google alerts on the site?
Randolfo (6 months ago)
Amazing video, thank you, thank you, thank you...
Talha Iqbal (6 months ago)
Excellent training Sir, Thanks a lot, Good work
You're welcome. Thank you for taking the time to leave a comment and letting me know!
Lucky nguyen (7 months ago)
What should I do if I would like more than 3 pictures on the slide show and more than 3 lines on the collapsible page. Thank
You would simple copy the section that you can see repeated three times (with the link and source of your image) and add that section into the code to add more than 3 images. The same for a collapsible; look for the repeated code and look for a pattern of 3 time the same code. Then, copy one section. Hope this helps.
Y.C. Cable (7 months ago)
Does the slideshow will affect SEO??
There doesn't seem to be a way to dive into the actual html in such way that you can tweak the seo, however this slideshow will contribute to you sites ranking, as will other content. In addition to this, whenever I've run tests on keywords and created blank sites with the keyphrase in the websites name, Google appears to give websites created using Google Sites a bit more love and rank them higher than they should.
Umang gandhi (7 months ago)
What happen when we remove image from the Google drive, which we are use for embedded in site.
taylor henderson (7 months ago)
Great Tutorial! Appreciate the work that you put into these vids- Can you tell us where you got your .gif for the waterfall?
Hi there. Your video on Google Site is awesome. Thank you for the information shared. Google site is an awesome website generator, and you make it easy and enjoyable. But, I have 2 questions ; * how to add hyperlink to each pictures of the carousel * is it possible to get an " autoresized image " carousel to ensure the carousel has always the same height ? Thank you for your support.
Jorge L (7 months ago)
Please teach us how to create buttons with hyper-links to pages of the same google-site. How to find out what the URL to each page is?

Would you like to comment?

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