We have to use different online tools to ease our workflow when it comes to web design and marketing.
You should use a good, reliable, and affordable hosting service to host your CSS and JavaScript code files online for many reasons.
If you upload custom CSS and 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 of sharing a free way to host your CSS and JavaScript files online. Yes, it’s free code hosting and an unlimited bandwidth facility.
Actually, Tumblr doesn’t provide you with 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 and JavaScript codes to the Tumblr blog. Some tricky ways are listed below.
- Add CSS & JavaScript codes directly to Tumblr by editing the Template
- Using Advanced Options
- Uploading CSS and JavaScript codes to Tumblr
- Linking External Files to Tumblr
You can only use three of the above four steps to add JavaScript codes because the Advanced option doesn’t allow you to add JavaScript codes.
TGH
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
We use This similar method to add CSS and JavaScript codes in other blogging platforms, such as BlogSpot. 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.
To add CSS codes, search for {CustomCSS} in your theme and paste your CSS codes before that. 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 quickly decrease the page loading time and eventually reduce the blog bounce rate.
Note: To work this technique, your Tumblr theme should be adequately 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 CSS code, as in the below screenshot. Don’t forget to save your changes.
Viewing this page again, you can always change your custom CSS code added to Tumblr. It’s an excellent 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. Remember that Tumblr doesn’t allow you to upload other CSS and JavaScript codes from your blog assets. Don’t violate Tumblr’s terms and conditions. Else Tumblr could terminate your Tumblr account (with blogs and followers).
This is my favorite and best way to Host a Tumblr JavaScript file. Here are the instructions to add custom JavaScript files and custom CSS files to Tumblr (and get the hosting URL)
Click on the ‘Edit HTML‘ link to the Tumblr HTML editor. Next, click on the gear icon in the top left corner of the theme editor. Select “Theme Assets” from the options. Then you would 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.
Note:
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 website.
For CSS files:– Add the below code just above </head> HTML closing tag and change My_CSS_file.css with the URL of the 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 a particular Tumblr JS file after loading HTML codes. It’s an excellent practice to decrease page loading time and improve the Tumblr SEO optimization ratio.
Furthermore, use a script management tool such as Google Tag Manager or Zaraz from Cloudflare to load Tumblr CSS and JS scripts without impacting page loading time. It’s the same approach we use to load scripts of HTML CSS website widgets providers such as Powr and email list-building tools such as ConvertBox on our websites.
Related: Top 20+ Modern Tumblr Widgets
Final Words
You don’t need to purchase hosting packages to host JavaScript files online (same for CSS). 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.