How To Host Self CSS - JavaScript (.js) Files Using Dropbox

data:blog.title
In one of our previous article we have share how to host self CSS and JS files using google drive in blogger and now we are going to share another way to host your CSS and Js files. There are many websites where we can host our CSS and Js files for free but According to us dropbox is the best cloud server to host files for a website because of its fast loading technique.

host files on Dropbox, Using Dropbox host blogger, dropbox

As we have mentioned above dropbox is the best cloud server. Dropbox gives us 2GB free space with 10GB/day Bandwidth(Data Transfer Limit) and if you are a paid user then you can get even more. By using dropbox we can direct hotlink to our files by public sharing.

Read Also : Floating - Horizontal Jumbo Animated Counter Social Share Bars for Blogger.

Okay now we are going to learn how to use dropbox for hosting our CSS file and JS Files without any cost. So lets get straight to work.

Host CSS & JS Files On Dropbox

STEP1] First you have to create a file which you want to host using notepad. To host a file, Open notepad and paste CSS code or script code which you want to host.

Note: Remove <style> ... </style> tag from CSS files and <script> ...  </script> tags from JavaScript files.

STEP2] Now in the notepad menu click on File >> Save As and after that type the file name. For example : If you are creating a CSS Style sheet then type filename.css and if you are creating any script file then type filename.js. For more see demo screenshot below.

Notepad File Create, Notepad Save As, Host CSS - JS Files Using Dropbox

STEP3] In the same window (Save As) you have to select UTF-8 in Encoding option before save it. All all of above guide click on save button to save it.

UTF-8 Encoding, Notepad UTF-8, Host CSS - JS Files Using Dropbox

STEP4] Now go to dropbox site and create an account on dropbox if you don't have and after that verify your mail address.

STEP5] Now login to your dropbox account.

STEP6] Click upload button which is placed at the right side of page.

Dropbox Upload, Upload CSS File, Host CSS - JS Files Using Dropbox

STEP7] Now click on choose file button which is appear on inline pop-up window.

Choose Uploading File, Dropbox Choose file, Host CSS - JS Files Using Dropbox

STEP8] Select the file which you have created using notepad.

select file, dropbox upload, Host CSS - JS Files Using Dropbox

STEP9] After complete the process of uploading file click on Done.

Upload Successful, Click Done, Host CSS - JS Files Using Dropbox

STEP10] Click On Share Button >> Click on create a link to generate a link and after that click on copy link to copy the link.

Click File Share, Create A Link, Host CSS - JS Files Using Dropbox

STEP11]  If link not copied then press CTRL+C to copy the file link.

Copy Link, Dropbox file hosting, Host CSS - JS Files Using Dropbox

How To Use Dropbox File Link to Host in Blogger?


Every dropbox link contain with ?dl=0 at last. This link format is for only see the file. So you have to change the link format. You can host dropbox file by doing little change. You have to replace ?dl=0 to ?dl=1 in every link which you want to host.

For example in our case the link which we have copied is https://www.dropbox.com/s/mooxqy1cdh37awg/filename.css?dl=0 but we have to change it like this https://www.dropbox.com/s/mooxqy1cdh37awg/filename.css?dl=1.

Hosting CSS Files in Blogger Using Dropbox


If you want to host CSS file then search for <head> tag inside blogger template code area and after that paste below line to template code area in <head> ... </head> section and after that change link to your dropbox file link.

<link rel="stylesheet" type="text/css" href="https://www.dropbox.com/s/mooxqy1cdh37awg/filename.css?dl=1"/>

Hosting JS Files in Blogger Using Dropbox


If you want to host JS file then search for </body> tag inside blogger template code area and after that paste below line just above of </body> tag and after that change link to your dropbox file link.

<script src="https://www.dropbox.com/s/mooxqy1cdh37awg/filename.js?dl=1" type="text/javascript"></script>

After all above procedure click on save template button to save it properly.

Also Read : Customized Contact Form for Blogger Static Page.

Conclusion:

So above guide is about "hosting CSS and JS files using Dropbox". We tried our best to make tutorial easy as much as possible but if any case you are facing problem then let us know via dropping a comment below. We would like to assist you. Hope you like this trick and now its your turn to give feedback via using comment box. Do Share with your friends and Subscribe Us.
Thank You! Stay Blessed!