Your blogger website so let's get started first of all let me show you how it works we can see that we have these.
Stories displayed over here and if i click on one of these stories we have the story displayed in full screen mode and after some time we can see that it moves on to the.
Next story and we can also click on the next in the previous buttons to go to the next in the previous stories and then we can click on this close button to close the full screen mode.
Right now let's go to the dashboard of our blogger website and we can add this design into a post or a page or you can even add it to all the pages in your website by just going to theme and then.
Clicking on this arrow and clicking on edit html and just add the code over there now in this video i'll show you how to add it inside a post so let's go to posts and let's create a new post you.
And the first thing you have to keep in mind is that you have to go to the html view so by default it will be in the compose view so click on this button and click on html view now here you can add.
The html the css and the javascript so first of all let's add the css i'll just create a style tag over here and now let's go to the source code of our.
Design and i will leave the link of the source code in the description so let's go to style.css file and let's copy all these styles from.
Here and let's paste it over here inside the style tag right now let's go outside the style tag and let's add the html.
So let's go back to our source code let's go to the index.html file and let's copy everything from here till the end and we don't need to have.
These Wesdigital
Commented code over here so i'll just delete all of this right now let's copy everything from here all the way till.The end over here and let's paste it inside our post and the last thing we need to do is add the javascript so let's create a script tag over here.
And here we will add the javascript let's go back to our source code and let's go to the main.js file and this is all the javascript of our stories design and if you scroll up we.
Can see that we have this old stories array over here and in that we have all these stories we have the thumbnail url we have the image url which is the full image url and also the title.
Now you can go ahead and change these information you can also add new objects by just copying this and pasting it down here and just changing these details right now we have these many objects.
Over here inside this array and all these image urls are here inside this folder right here called images and in that we have all these images now in our blogger website we don't have.
This folder called images so we have to change the image urls we have to upload the image somewhere and get the url and paste it over here but for now let's copy and paste all this code.
And if we scroll down we also have some other settings over here you can go ahead and change the timing of the autoplay of the full screen stories.
So right now it is set to five seconds so after five seconds the story will change to the next story when in the full screen mode right now let's copy all of this and.
Let's go back and paste it over here
Inside the script tag now the last thing we need to do is change all these image urls now for the images we will use a service called cloudinary so you can.Just go over here to cloudenary.com and just create a free account and then just log in and go to media library and here you can go ahead and upload your images so let's click on upload and then click.
On upload local files now let's click on browse and these are all the images in our project so let's select all of this.
And let's click on open and here we can see all the images are uploaded inside cloudinery now let's go ahead and change the urls of all the images so here we can see the first one.
Over here is the full screen image of the eighth story and this is the thumbnail so let's go ahead and copy all the links now you can just click on this button.
Called copy url or you can also click on options and click on copy url from here so let's copy this and let's paste it inside the eighth full image so i'll just delete this.
And paste the url over here and in the same way let's go ahead and get the thumbnail url so let's click on copy url and let's paste it over here.
Now in the same way we have to go ahead and change the url of all these images so i'll just do that real quick alright so i have updated all the image and thumbnail urls now let's click on.
Publish and confirm and here we can see that our post has been published let's click on weave and our stories are displayed over here but we have some problems in the styling so.
Let's fix that let's right click over here and click on inspect and here we can see this is a flexbox so if i just click on stories container we can see it is set to display flex and i.
Think that's why it is trying to fit into this fixed width so what we have to do is we have to add a line of code to the content and we have to type flex shrink.
And set it to zero now we can see it works all right so let's add this line of code to the content in the css let's go back to our.
Post and let's go to the content so here we can see we have the selector for the content here i'll just type flex shrink and.
Let's set it to zero now let's update this and let's go back to our post and let's refresh this page and now we can see that the stories are.
Displayed over here and let's click on one of these stories and we can see that it is displayed in full screen mode and after five seconds it changes to the.
Next story and if i click on the next button we can see the next story and if i click on the previous button we can see the previous story.
And we can close the full screen mode by clicking on this close button so everything is working all right so that's basically how you add this stories design into your blogger website.
So that's basically it for this video i will leave the link of the source code in the description and if you have any doubts you can ask in the comments below and if you like this video please click.
On the like button and subscribe to this channel to get the latest video updates thanks a lot for watching have a nice day .