Sep 3, 2016

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!

9 comments:

  1. Hello, can you please help me... I formerly embed a navbar with a google drive host link into my blog. Now these links don´t seem to work anymore and I´ve read that GD diasbles this function. So I need an alternative. Did everything as you explained but it doesn´t work...

    This is my link: https://www.dropbox.com/s/rs5ug2dy1na41t9/MyMenu1?dl=1

    And this the total Javascript-Code I´m trying to insert into a blogger widget:

    Can you help me to fix it so that it works again? Would be so thankful!!!

    ReplyDelete
  2. Hello @Marysol Fuega,

    First try to remove center tags and if it is not working again then there is another method.

    Don't use any cloud server and save it in your blogger template. It'll also helpful in reducing blog load time.
    I know you're also facing problem in saving it on blogger template but the method I'm going to tell you works 100%.

    Paste your JS in below tags and save it in your blogger template.

    Replace "PASTE YOUR JS CODE HERE" text with your JS code.


    //


    If it works then don't forget to subscribe and if not then leave comment again I'll find another way.

    Thank You. :)

    ReplyDelete
  3. see this screenshot https://uploads.disquscdn.com/images/059a29b07b7da5057e3f3c8eb7abb20f3266b99c475f978dad37838fb3cae055.png

    ReplyDelete
  4. THANKS!!!! Adding it to blogger template worked! I did it on my trial blog and yeeeah!
    Only thing is that now, don´t know why, the symbols of the navbar are gone and turned into squares:

    http://marys-probeblog.blogspot.de/

    Any idea why and how I could fix that? I remember that for the GD. hostlink I had one including the folder id and then specifying the javascript-file name and the Dropbox link only directs at the javascript...

    ReplyDelete
  5. Actually icons are not any image means Dropdown menu generator create icons through unicode. If you have downloaded file (When you generated the dropdown menu), then PM me hope I'll find a solution for you.

    If you're a blogger user, then why you want to use dropdown menu generator menubars only? I've also published a drop down menu for blogger users which is looking 100 times better than this one.

    Read - Drop Down Menu For Blogger

    ReplyDelete
  6. Well when I wa slooking for dropdown menus, this page seemed the easiest and I liked the layouts - originally my dropdownmenu was really beautiful - with marine seperating lines and cool icons... a year or so every thing worked finde, using GD but as they´re no no longer supporting host links :(

    Okay, so here is the whole folder with all the files & the javascript file...

    https://drive.google.com/drive/folders/0B0g97eqVVslLS1Fjb2RDeU5yRVk?usp=sharing

    ReplyDelete
  7. I've tried many cloud hosts but no one achieving the same as google drive.
    As you know very well google drive disabled the hosting facility so you can't host it on GD.

    The only solution I've find for you is redesign your navbar and host it on drop down menu generator server.

    Read this article - How To Add DropDownMenuGenerator's NavBar in Blogger Blog?

    ReplyDelete
  8. Hmmm... but that´s only working for 14 days, after that you have to pay... do you know different sites like dropdownmenugenerator where I can create & use the menu for free?

    Thanks for all your help!

    ReplyDelete
  9. Sorry dear, Not find any suitable site for you.

    ReplyDelete

We’re eager to see your comment. If you have any query related to the topic then drop a comment below. We will help you out of sure. However, Please Keep in mind that all comments are moderated manually by our human reviewers. According to our comment policy all link are nofollow so keep in mind that never use links in comments, we consider link comments as a spam.