How to Host Custom CSS and JavaScript Codes on Tumblr Free

When it comes to web design, email marketing, SEO, or blogging, we have to use different online tools to ease our workflows, such as Semrush (for competitor analysis), Long Tail Pro (Long Tail Keyword research), ContentStudio (manage social media accounts including Tumblr), Grammarly (for proofreading articles), Gist (for email marketing and customer relationship management) and also some other free online code hosting services too.

There are lots of reasons why you should use a good, reliable, and affordable hosting service to host your CSS and JavaScript code files online.

If you upload custom CSS and custom JavaScript files (.js files) to your web hosting, someone might hotlink your hosting files and increase the bandwidth.

That you don’t want to happen, right?

So, today, I thought to share with you a free way to host your CSS and JavaScript files online. Yes, it’s free code hosting and, importantly, with an unlimited bandwidth facility.

Actually, Tumblr doesn’t provide you free javascript or CSS hosting services. However, you can use some tools such as Tumblr asset upload and Tumblr javascript upload to host your files on Tumblr servers.

There are a few ways to add custom CSS codes and Custom JavaScript codes to the Tumblr blog. Some tricky ways are listed below.

  1. Add CSS & JavaScript codes directly to Tumblr by editing the Template
  2. Using Advanced Options
  3. Uploading CSS and JavaScript codes to Tumblr
  4. Linking External Files to Tumblr

Out of the above four steps, you can only use three of them to add JavaScript codes because the Advanced option doesn’t allow to add JavaScript codes.


So, here are other methods and steps to add custom JavaScript and CSS files to the Tumblr blog.

Adding CSS & JavaScript codes directly to Tumblr by editing the Template

This is a similar method we use in other blogging platforms such as BlogSpot to add CSS and JavaScript codes. But, here, we should understand how a Tumblr Blog works and what’re Tumblr data types. You can find out more details about Tumblr data types by following this link, where you will learn more about creating a Tumblr theme. To add CSS and JavaScript codes from this method, go to the Customize page of your blog. Then click on the ‘Edit HTML’ button.

Now to add CSS codes, search for {CustomCSS} code in your theme and before of that, paste your CSS codes. You don’t need to add <script type=”text/css”>…</script>  or <style>… </style> tags, if they are rendered.

You can add JavaScript code to your Tumblr blog by searching </body> HTML code and adding JavaScript before that closing tag. Don’t forget to add <script type=”text/JavaScript> and </script> codes between the JS code. By rendering JavaScript code bottom of your Tumblr layout, you can decrease the page loading time and eventually reduce the blog bounce rate fast.

Note: To work this method, your Tumblr theme should be properly optimized for adding custom codes to Tumblr. If you can’t find these tags, pay attention to using an SEO-optimized Tumblr theme. Here is a great place to find thousands of high-quality Tumblr themes for your blog.

Using Advanced options

This option allows you to add custom CSS codes only. Click on the “Advanced Options” tab in the blog customize panel. Then add your own CSS code, as in the below screenshot. Don’t forget to save your changes.


You can always change your custom CSS code added to Tumblr by viewing this page again. It’s a good way to host CSS codes on Tumblr.

Uploading CSS and JavaScript codes to Tumblr

This is a pretty cool feature in the Tumblr blogging platform. You can upload any assets through your Tumblr dashboard. Keep in mind that Tumblr doesn’t allow you to upload other CSS or/and JavaScript codes out of your blog assets. Don’t violate Tumblr terms and conditions. Else Tumblr could terminate your Tumblr account (with blogs, followers).

This is my favorite and best method to Host a JavaScript file on Tumblr. Here are the instructions to add custom JavaScript files and custom CSS files to Tumblr (and get the hosting URL)


Go to the Tumblr HTML editor by clicking on the ‘Edit HTML’ link. Then click on the gear icon on the top left corner of the theme editor. Select “Theme Assets” from the options. Then you’d see there is a file(s) and block of codes that have been uploaded to your theme. Click on the “Add a file” link and choose the .css or .js file(s) you want to upload. After uploading, click on the Save button.


Your Tumblr CSS file should always be ending with .css. That means, if you uploaded your CSS file with another extension (such as .html) in some devices and browsers, Tumblr custom CSS codes would not work properly.
Same for Tumblr JavaScript files. Their file extension always should be .js.

Linking External Files to Tumblr

You can link external JavaScript or CSS files that are hosted on Tumblr. Follow the below steps to add any code files on Tumblr servers to your own website.

For CSS files:– Add below code just above </head> HTML closing tag and change My_CSS_file.css with the URL of CSS file.

 <link rel=”stylesheet” href=”My_CSS_file.css”>

For JavaScript files:-  Find </body> code in your Tumblr theme, and just above it, paste the below piece of code. Change  My_JS_file.js with the address of your JavaScript file.

<script src=”My_JS_file.js”></script>

How to Load JavaScript Asynchronously to Increase Page Loading Time

Even though you use HTML DOM inside your website to change HTML elements, here is how to load JavaScript codes asynchronously.

<script src=”Your_CSS_file.js” async=”yes”></script>

aysnc=”yes” tag will specify web browsers to load particular Tumblr JS file right after loading HTML codes. It’s an excellent practice to decrease page loading time and ultimately improve the Tumblr SEO optimization ratio.

Final Words…

You don’t need to purchase hosting packages to host JavaScript files online (same for CSS). Just follow the above tactics to add custom CSS and JavaScript code files to your Tumblr blog.

So, How did you host JavaScript files online earlier? Have you found any other free way to host codes online? Please share them on the below comment form.

host js css online

Leave a Comment

1 Share
Share via
Copy link