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), GetResponse (for email marketing 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 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 Tumblr blog. Some tricky ways are listed in 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 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 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 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 theme 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 like in below screenshot. Don’t forget to Save your changes.

ADD-CUSTOM-CSS

You can always change your custom CSS code added to Tumblr by viewing this page again. It’s a good way 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 don’t allow 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 JavaScript file on Tumblr. Here’s the instructions to add custom JavaScript files and custom CSS files to Tumblr (and get the hosting URL)

Theme-Assets-Tumblr

Go to Tumblr HTML editor by clicking on the ‘Edit HTML’ link. Then click on the gear icon on the top left corner of theme editor. Select on “Theme Assets” from the options. Then you’d see there are file(s) and block of codes which 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 which are hosted on Tumblr. Follow 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 Tumblr SEO optimization ratio.

Final Words…

You don’t need to purchase hosting packages to host JavaScript files online (same for CSS). Just follow 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 below comment form.

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.

>