How to Include a JavaScript and CSS Content Slider on Blogger

Here, we will discuss on how to include a Javascript and CSS Content Slider on to your Blogger Site. All you have to do is to follow this article carefully and you will be able to add a Slider on to your account. Let's see on how to do this.

At first, you need to download these two files.

1. JavaScript File
2. CSS File

Now, since you ave the codes, we will see on how to proceed step by step. 

Part:1

1. Go to your blogger account and create a new post and enter Test in the Title Box.
2. Now, insert the images which you want to use as Slider in your account. 
3. Once, you have inserted the images, make sure that you have chosen the HTML rather than Toggle Button. 
4. In Blogger, focus your cursor below the existing markup and paste the below written code in to the HTML. If you preview the blog post at this point the slider will not be rendered properly because the CSS and JavaScript have not yet been included.

The Codes to be Entered: 

<div class="slider" id="my-slider"> <ul> <li> <img src="First Image Url" /> <div class="ism-caption ism-caption-0">First Image</div> </li> <li> <img src="Second Image Url" /> <div class="ism-caption ism-caption-0">Second Image</div> </li> <li> <img src="Third Image Url" /> <div class="ism-caption ism-caption-0">Third Image</div> </li> </ul> </div>

Note: Wherever, there is need of "Image Url", just copy and paste the img src attributes. You can get the attributes right from the HTML Button. Save the blog post.  

Part: 2

1. Open a new browser tab, go to Google Drive and sign in if you need to.
2. Click on the New button and select File upload from the drop-down menu.
3. Select the JavaScript file which you have downloaded at the beginning of this article.  
4. Follow the above steps again to upload the CSS file.
5. Now, locate the two files in your Google Drive.
6. Either click on My Drive or Recent in the left-hand menu.
7. Right-click on CSS_file and select Share from the context menu.
8. The "Share with others" options popup will appear. Make sure the "Anyone with the link can view" option is selected.
9. Click "Get shareable link", located towards the top right of the panel.
10. The URL of the file should now be copied to your clipboard.
11. Either paste the copied URL into a text file or make a note of it, because we are going to need it later.
12. Repeat steps 7, 8, 9 and 10 for Java_file.

Part: 3

1. Go back to Blogger, make sure you're signed in and click through to your blog's Overview page.
2. Select "Template" from the left-hand menu.
3. You may need to select a template before continuing.
4. There should be a template preview near the top of the page.
5. Click the Edit HTML button, which will open a HTML editor for you edit your blog's template.
6. Enter the following two lines above the closing </head:> tag:

<link href="https://googledrive.com/host/XXXXXXXXXXXXXXXXXXXXXXXXXXXX" rel="stylesheet" /> <script src="https://googledrive.com/host/YYYYYYYYYYYYYYYYYYYYYYYYYYYY" type="text/javascript"></script>

For the link tag, which we use to include the CSS file, replace the 28-character identifier with the one you copied from Google Drive.

https://drive.google.com/open?id=0B0Lx6QimWZErUUVXS0Ytd1huRVE

Here, in this case, we will replace the XXXXXXXXXXXXXXXXXXXXXXXXXXXX with 0B0Lx6QimWZErUUVXS0Ytd1huRVE Similarly, for the script tag, which includes the JavaScript file, replace the 28-character identifier with the one you copied from the Google Drive. Save the template.

Conclusion

This is it. I hope you get your own Java Slider on your Blogger Site. If you still have any doubt, you can ask us in the comment section.