Showing all templates tagged Scripts
Showing posts with label Scripts. Show all posts
You may find many tutorials on how to host your JavaScripts on code.google.com, but this method doesn't work anymore, because the purpose of Google Code is not for this, and the site was abused by users. So Google decided to disable hosting of files on code.google.com. Here is the official news post "A Change to Google Code Download Service"

So, you have to look for alternative sites to host your blogger JavaScripts or CSS files. A good alternative is another popular product from Google: Google Drive.
As you may know, there is a method to host your JavaScript code directly inside Blogger (and i will show you how to do it bellow), it is a good method for small JavaScript code, but if you have multiple huge codes in your template they will make your blog to load slower, and the search engines may not be so happy with this.

How to host JavaScript or CSS codes on Google Drive

Step 1. Go to drive.google.com

Step 2. Make a New Folder called "Scripts" (or whatever name you want)

Step 3. Now you need to Share the folder (so that anyone can access is). First Select "Scripts" folder, than tap the first button on top, the one with a man and a plus sign.

Step 4. In the window that appeared click on "Change..." than chose "Public on the web" and Save.

 Step 5. Go inside "Scripts" folder and upload there your JavaScript or CSS.

Step 6. Now that your codes are uploaded, you need to get the direct link to them. First thing you need is "Scripts" folder ID. The ID is in the link address.

Step 7. Now you can access the direct link of your JavaScrip or CSS by going to this addres:
https://googledrive.com/host/FolderID/filename
So in the current example the direct links for the 2 files inside "Scripts" folder are:
https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.css

https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.min.js

 Step 8. Now you have to insert the JavaScript or CSS file inside Blogger. To do this copy this code in your template, usually above </head>.
<script type='text/javascript' src='https://googledrive.com/host/FolderID/filename'></script> 
 So in the current example it will look like this:
<script type='text/javascript' src='https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.css'></script>

<script type='text/javascript' src='https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.min.js'></script>

Step 9. Save the template and you are done.


I told you in the beginning of the post that you can also host your JavaScript code directly inside blogger, but as i said before you should use this method only if the script is small, or you're template doesn't use many scripts. I will show you below what you have to do if you want to host the JavaScript inside blogger.

How to host JavaScript inside Blogger template

Step 1. Open your JavaScript with notepad, and copy the whole code.

Step 2. Go to Template > Edit HTML and search for this line:
</head>

Step 3. Paste this code above </head>:
<script type='text/javascript'>
/*<![CDATA[*/

Paste JavaScript code here

/*]]>*/
</script>
Replace "Paste JavaScript code here" with your JavaScript.

 Step 4. Save the template.

I hope this methods will help you host your JavaScripts on Google Drive or directly inside Blogger, and this way you will keep your template clean and good looking for search engines.
For who doesn't know what lightbox is... Lightbox is a script that will open the images, inside the post, in a nice looking popup, without leaving the page. I encountered many situations in which the default Lightbox of blogger doesn't work as it should.

Most of the templates i tried simply doesn't work with the default lightbox in blogger and I have no idea why. So if lightbox doesn't work with your template, or you don't like how the default lightbox looks I will give you one of the best lightbox out there, that does the job automatically, so no "rel=lightbox" is needed.

This is how it will look:

Automatic Lightbox for Blogger

Step 1. Disable Blogger's Lightbox. Go to Settings > Post and comments > Showcase images with Lightbox "NO".

Step 2. Go to Template > Edit HTML. Click inside, then press "Ctrl + F" and search for this code:
</head>
Step 3. Place this code above </head>
<!--start lightbox script-->
<link href='https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.css' media='screen' rel='stylesheet' type='text/css'/>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script><script src='https://googledrive.com/host/0BxqfHzcHGf-5WEZCeFN4Q25SdEU/lightbox.min.js' type='text/javascript'></script>
<!--end lightbox script--> 
Step 4. Save the template and you are done.

The Advantages of using this lightbox script are:
  • It works automatically, you don't need to place "rel=lightbox" or other tag to your images.
  • It makes automatic galleries if there are multiple pictures in the post.
  • It auto adjusts on the image size.
  • It looks much cooler than the default lightbox,
What does "parsing" mean? Well in simple words some characters break your blogger template if they are used incorrectly. So if you want to insert Adsense ads in your blog, by editing the template, you will probably get an error when you try to save the template.

This happens because the HTML tags used in adsense code (<, >, \, ', &) are not allowed inside the template. Parsing the template means that those tag characters will be converted to plaint text, so that they are recognized by blogger.
This modification is Aproved by Adsense Rules, you don't actually modify any part of the code, you just convert the tags.
Also, this method works with other Java Scripts that will break your template giving the same error.

Paste your adsense code here to parse it






After you clicked on "Parse" button just copy the converted code in your template.

What actually happened is just that some characters (the HTML tags) were replaced:
  • "<" with "&lt;"
  • ">" with "&gt;"
  • "\"" with "&quot;"
  • " ' " with "&#039;"
  • "&" with "&amp;"