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 hoplink 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 unlimited bandwidth facility.

You might read my earlier article on hosting CSS and JavaScript files on Google code (free svn hosting service for web developers and so you too can use). It shows you how to upload JavaScript files to Google code and hoplink.

Ok, Today, I have got another solution to store your project codes online for free.

Actually, Tumblr doesn’t provide you free javascript or CSS hosting services. However, you can make use of 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.

Add 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 of 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 your 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 below screenshot. Don’t forget to save your changes.

ADD CUSTOM CSS
ADD CUSTOM CSS

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 your Tumblr account (with blogs, followers) could be terminated.

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)

Theme-Assets-Tumblr

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 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) which you want to upload. After uploading click on the Save button.

Note:

Your Tumblr CSS file should be always ending with .css. That means, if you uploaded your CSS file with another extention (such as .html), in some devices and browsers, Tumblr custom css codes will 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 of it, paste 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

Despite 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 a very good 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.

About the author 

Chamal Rathnayaka

A blogger, Growth Hacker, and Internet Marketer since 2012. Chamal Rathnayaka is the founder of this very site and he's sharing his experience and knowledge on Internet marketing through Pitiya blog. Send him a message on Pitiya.com/contact.

  • Home
  • Blog
  • Tumblr
  • How to Host Custom CSS and JavaScript Codes on Tumblr Free

YOU MAY LIKE ALSO

{"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
udimi-logo

DFY SALES FUNNEL

Host our proven sales funnel and send traffic and link your payment processor!


Enter to win Free UDIMI $50 Gift Card

Plus, DFY Sales Funnel (value: $497) and eBooks on Internet marketing.

I started Pitiya without any money. So, isn't $50 enough for you? Click the button below to learn more & join.

>