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

in today's video we are going to look at some of the more advanced things you can do in the new Google Sites this is another flipped classroom tutorials right now in this video we're going to look at four very fun and advanced features that you can use today in your Google Sites and at first you can see demonstrated here at the top which is an animated header that a second feature that we are going to look at today is a slideshow now when you look at my example here we have a demo of a slideshow and when I scroll down you will see that here I demonstrate the first version of this slideshow that is automatically Scrolls to the next image but I can also select the next image by clicking on the arrows left and right the third special feature regular looking at today is a collapsible or a fold where you can click on different individual items and reveal information this is another very cool feature for your websites we are also going to have a look at some cards now this is just an example of such a card now you can see these cards have a very fun material design feel to it a little image at the top and a name at the bottom now if there is any of these features that you are particularly interested in make sure you check out the description below I will time stamp everything seeing as this video will be a little bit longer than usual so the first thing you'll have to do is go to your Google Drive now in order for you to build this advanced Google website you are going to have to click on new more and then create a blank Google Sites now when you are doing that I want you to start off by choosing a title for your website now I'm going to call this demo advanced features and we are going to set the same page title advanced features demo now in order for you to complete all the steps that I'm going to show you in this video you will need two links now I will link to these two links in the description below and the first link is from w3 schools and the second one is a link that you are going to change later on so go ahead and click on the w3 schools link down below and this will bring you to their bootstrap tutorial website now bootstrap 3 is a JavaScript HTML and CSS framework that is often used to develop responsive and mobile first websites now the bootstrap is going to allow us to embed features that are not natively available in Google Sites now what does that mean that means we are going to go to w3 the website we're going to build what we want on our Google Sites and then we're going to embed it onto our Google Sites so let's start off by creating a carousel or a slideshow now click on the page option and your Google Sites we're going to add a new page and this page is going to be slideshow demo now the first thing you can do is change this header now we're going to change this header and we're going to turn it into an animated header now the way you do that is by simply finding a gif file that you like and uploading that image so we're going to go to upload going to upload a gif file that I've previously downloaded to my computer and I would highly recommend that you only you've used gif files that are calm peaceful and not too distracting yet add a little bit of movement to your header and here you can see I've uploaded a gif file of a waterfall running down now this just adds that special effects to my website now let's have a look at the preview and as you can see this looks really good yet different so let's go ahead and build our slideshow now now when you are on the bootstrap 3 tutorial website the first thing you need is you need the core HTML text or code now don't worry you don't have to read or write code simply click on next and this will give you some sample bootstrap code down below you will see an explanation of how this code works and here this is the important part it says this is how you can access bootstrap without installing it onto your own service which is exactly what we need to do for our Google Sites the scroll all the way down and get this sample code now we're going to go to the bottom example we going to click on try it yourself now here when you go to try it yourself you can build your code from scratch and immediately see what happens at the bottom so let me just quickly change the Texas as my first bootstrap page into see this demo changing and then I click on run and you will see that immediately this changes now what this is going to allow us is it's going to help us build the individual tools we need and then we can simply copy this code and embed it onto our Google Sites so what we are going to use we are going to go down and we are going to locate the bootstrap carousel that a bootstrap carousel is again a framework that allows you to create various forms out of these carousels so go ahead and click on try it yourself and here you have an example of such a carousel that you can see there are controls to go left and right and there are images embedded and there are little navigational buttons at the bottom that the first thing you'll have to do is change the title of your page now we are going to call this slideshow demo we are going to leave all this code because these three lines are the lines that are accessing the bootstrap code on their servers I'm going to scroll down now you can choose to either change this title which says h2 stands for heading but we can also simply delete that's so let's go ahead and delete that line let's scroll down now if you do not want to have your indicators here at the bottom these three dots what you will do is you will remove this section of the code now I do want those indicators so I'm going to leave these leave the wrapper for the slides but when you look carefully at this code you will see that says that it says IMG source now this is where you are going to put the source of your image files the alt is an alternative text for when the image is not able to show and then the style we will leave this to with 100 so what you are going to do now is you are going to go on to your Google Drive and you are going to locate the files that you want in your carousel not a great website to find images that you are allowed to use is called pixels now again I will leave a link to this website in the description below and just for the sake of this example I'm going to use the first three images I come across so I'm going to download this image I'm going to do the same with the second image on their trending page and then we find a third image on their threatening page so we have our images here I'm going to simply save this as save this image as and do the same for the third image save as here we go I can now go to my Google Drive and I am going to drag and drop these images into my Google Drive which is going to upload them and there we go we now have three images in our Google Drive and we now need to set these images to be available to other people so what we're going to do is we're going to click on the get shareable link turn link sharing on double check our sharing settings make sure anyone with a link can view done we're going to do this for all three images link sharing on any one with link you can view do this for the third image there we go now let's take our first image click on this link again which will copy the link to our clipboard we are going to simply go into the try it editor and here in the source code we are going to paste our code or our URL now you are not finished just yet go back to the description below and you will see one more link down below and that is this link that says HTTP Drive Google export view I want you to copy it all the way up to where it says your ID here copy that link go back into your special viewer and replace the first part of your URL now make sure that you leave the complete file id intact and paste your amended link this now allows you to view the file in an external website so what we're going to do we're going to do the same for the other two images so I'm going to again copy the link go into my try it editor paste the original URL copy the first part of my amended URL and paste it instead of the open i.d URL we're going to do the same for the third image select your image click on shareable link go into your try it editor replace this with your URL copy the first part of this special URL and replace the beginning there we go now when we click on run we will see very different images in our sample below now we have not yet changed the alternative texts now we're going to change this say beach image to and image three all done now when you scroll down a little bit further you will see there are some left and right controls now again if you do not want to have these left and right controls simply take out this section of the code and then you will not see these left and right controls on your slideshow now you can leave them and I am going to leave them for our demonstration I am all happy with this example so what I'm going to do now is I'm going to simply highlight all the code in my try it editor copy the code go into my demo double click on my page go to embed and select the embed code option this is where we paste our code and click on next insert and this is now going to insert our beautiful carousel onto our Google Sites now for you to test this let's say that we make this a little bit bigger and let's Center it onto our page there we go it will click on preview and here we go when I scroll down you will see we have our carousel I can go to the next slide or I can return to the previous slide I have my indicators down below which allows me to skip straight to the third slide or I can wait and I can have the slideshow automatically advance to the next slide so this is our first bootstrap advanced demonstration now the second demo that we're going to work with today is called a foldable or a collapsible so go ahead and create a new page so it's create a new page and call this the collapsible demo now collapsibles are great for when you have a lot of information on your website and you want to break it down into easier to read chunks information now go back to your bootstrap w3 school and we're going to navigate to the bootstrap collapsible now again just like before we get nice little examples so this is an example of one collapsible when you scroll down you'll see some more examples here's a collapsible panel which slides open with two little menu structures in there you have a collapsible list group and then here you have the accordion which is the one that I've used on my demo website now we are going to go with this one so go ahead and open up the try it yourself editor let a try it yourself editor what is this going to do is again going to open up a full HTML version of this bootstrap example and it already puts the HTML code where it's needed so here you have your HTML header and your body opener now again this references bootstrap on their external server so you do not have to install anything on your end down here we have the accordion example again you can get rid of this if you want we can also get rid of this note if we want so go ahead and get rid of that I'm going to leave everything as it is but I am going to change the titles just to show you what happens so we're going to call this item 1 I'm going to go down call this item 2 and then down below we have item three now click on run to see an example of this in action there we go I'm going to copy all this code right click copy and I'm going to go into my Google Sites again double tap click on embed and make sure that you've got embed code selected paste in your code and click on next to insert your collapsible and here we now have our collapsible now because this acts as an iframe is very important that you make sure your collapsible has enough space to open up the information once you have clicked on it so go ahead and open this up a bit taller and let's go ahead and click on the preview and here we have our collapsible demo know I've got item 1 item 2 and item 3 all very easy to implement in your own Google Sites now the final example in this slightly longer tutorial is the example of a card now the card again requires us to do a little bit more work and change some URL information so go ahead and create a new page called card now for the card I did not use the bootstrap panels but we are going to use custom CSS and HTML now if you are not into CSS and HTML code no worries I have a link down below that will link to my demo website right here where you can scroll down and find the code on the web sites so go ahead and select all the code that you can find on my Google Sites example we're going to ctrl C this code and then we're going to embed the code onto our own websites now do not click on next yet however scroll all the way up because we now have to change this code slightly to fit our purposes now the first link you will see is a link to the fonts that I'm using in my cart now if you want to use a different font family than I would suggest changing Roboto - whichever font family you want to use then you can find more about fonts on the fonts google.com website now you can scroll down here and again you will see I reference the font name and then here I reference the font size so if you want to make any changes to the fonts this is where you would do it and then I close my first style now I open a second style which is again going to define the card and here I define my box shadow now again you can tweak this you can have more shadow or less shadow I would suggest that you play with this you can change the transition so whenever you hover over the card you can have a longer duration or a shorter duration in that hovering effects and when you go down here again you see card hover box shadow so if I change my box shadow to let's say 8 pixels here 16 pixels there and then when I hover I'm going to have 16 and 32 so I have a much thicker shadow without a hover and double the size of that when I hover so let's go ahead and slide down and now you will see that I'm in the body of my code now in the body of my code I am going to add again that image link now using the same trick as what you've seen before you can insert any image here all you have to do is make sure that the first part of your URL is set to export equals view and ID so that link can be found on my websites now scroll down and here you see had a four and then my name that you can change this into hether 1 2 3 or 4 and this will change the size of your text so I'm going to leave this at header for for now and then your first line flipped classroom tutorials this is sort of subtitle and that's all there is to it when you click on next you will see a nice little preview of what this card will look like and then you click on inserts now another thing you need to make sure is that it is properly sized so that you can clearly read your card going to make this a little bit bigger and then Center it go ahead and click on preview to see what your card looks like and we now have our card now you can see it has a nice thick shadow and when I hover over it that size doubles there we go and that's all there is to it for this tutorial of today now if you would like to see even more special tricks or advanced features that you can use on the new Google Sites let me know in the comment section below let me know which of these four features is your favorites now this could be the animated header that you've seen up here this could be the slideshow the card feature or the collapsible demo now all the links to what has been discussed today are in the description below and everything is time-stamped so don't forget you can pause the video go through all the code and do it on your own Google Sites I hope you found this helpful if you did don't forget to give it a thumbs up subscribe to the channel and I will see you in the next one thank you for watching

Channel: Flipped Classroom Tutorials

Views: 405,509

Keywords: Eduflip, Teaching with Tech, eduflip.net, Advanced tips and trick for Google Sites, How to add a slideshow to Google Sites, How to embed a slideshow in Google Sites, How to use a collapse button on Google Sites, How to embed in Google Sites, How to create a professional Website on Google Sites, Google Sites Tutorials 2018, Google Sites tips and tricks, Making cards on Google Sites, Add material design cards to your google sites, GSuite for Education, Google Apps Power tips

Id: 1Ny-1zHw5AI

Length: 19min 53sec (1193 seconds)

Published: Sat Mar 10 2018