Quite Random » Blogger Tutorials

Solutions for JavaScript Hosting in Blogger

Fernando Coello — Fri, 10 Apr 2009 00:20:25 +0000

There are lots of things that can’t easily be achieved in Blogger without the usage of special ‘scripts.’ As they are a growing solution for most of the features we’d like our Blogger blogs to have, we deal with a huge setback: ‘where to host them.’ We know Blogger only allows users to upload images and videos, but not other type of files.

As Blogger users, we like two things about it: it’s easy, and it’s free. But hosting isn’t, and the famous ‘free hosting services’ always have their own tricky terms related to the bandwidth consume and/or available space. Many of them are even just for ‘sharing’, and we’re not able to get from them valid, direct URLs to our hosted files.

I’ve listed some of the solutions we can apply until Google decides to give us the option of uploading other types of files.

1. Changing .js for .txt

What we call ’scripts’ are only files with plain text. They have a .js extension, which is not exactly obligatory, and it’s the reason why many hosting services won’t let us upload them.

What we can do, then, is simply changing the .js extension for a .txt extension and upload these files to Fileden, for example; then, using the provided URLs like always.

Here’s a complete list of the available libraries, and their installation.

3. Adding scripts directly to our templates

These kinds of code:

Would be replaced by:

We must take in consideration that adding long scripts directly to our templates can make it a little messy and confusing; this doesn’t mean that long scripts won’t work.

4. Using Blogger’s “HTML/JavaScript” gadget

Adding long scripts to our templates might result impractical. Also, changing its .js extension for a .txt one, because of its volume, would make it consume a lot of bandwidth. Here’s a good solution for that.

In our templates, we create a new Blogger gadget section adding the following code after :

Once this is done, from our Dashboards, in the ‘Elements Page,’ we will see a new section above our template layout. We add a “HTML/JavaScript” gadget from there, with something like this:

We must avoid adding titles to these gadgets; however, if we’re going to add several scripts in different gadgets, we might… after adding this line before :

.scripts-container .widget h2 {display: none; visibility: hidden;}

Also, it seems Blogger interprets all “<” and “>” appearing in the scripts not as expected. To solve this, look for these symbols and add a space before and after each of them. Here’s an example:

Before: for(var i=0;i After: for(var i=0;i < a_rc;i++) {


 *** 
Google Pages was kind of the perfect solution for all of this; however, this beta service is soon coming to an end. Google says they will merge both Google Pages and Google Sites so we can create sites in one second; but just imagine a good and trendy site with NO JavaScript at all… I wonder why Google never merged Blogger with Google Pages, as it did with Google Adsense and Google Friends.
I could have listed some of the free services we could use, but considering what has happened with HostFile (dead already), Google Pages (dying), and lately Skydrive (not recommended), we can easily conclude that unless it is isn’t our own host, we will always have limitations.
Reference
Vagabundia [1, 2, 3]



Automatic Post Summaries
Fernando Coello — Tue, 31 Mar 2009 07:19:09 +0000
This tutorial was recently updated.

There are plenty of ‘Read More’ hacks for Blogger on the web; however, not all of them create automatic post summaries with thumbnails for each post. This is the type of hacks I used in my latest template, Whiteness. Since it has had quite a good reception for its simplicity, its usability and its automatic ‘Read More’ hack, I thought it would be a good idea to explain the script I used.
Important: I am not, by any means, the original creator of the hack here presented. I first saw it in a post from BloggerSphera and have since worked on/with it.
Installation
There are two main HTML codes we need to add to our templates. These should be added from ‘Edit HTML,’ in our Blogger Dashboards, with the widget templates expanded.
The Script
We first need to install the script. To do this, we must add the following code, before :


I’ve uploaded the script to my server, but we can always download it and upload it to our own host or free hosting service, or check other useful solutions.
The Summaries
We must now replace the default post bodies for the actual post summaries and thumbnails (in all the pages different from the individual posts.)
Look for the following line:

and change it for this:
    
      
      

      Read more »
    
    

The highlighted text in red is the one appearing in the link next to the summaries. ‘Read More’ is the most common phrase, but we can always change it for ‘View full post,’ ‘More,’ or any other text. We can even use images.
Customization
The Summaries
To determine the number of character to be shown in the post summaries, we must change the number next to the variables we added first (right below the script):
summary_noimg = 250; — Defines how many characters will be displayed in posts without thumbnails.
summary_img = 250; — Defines how many characters will be displayed in posts with thumbnails.
The Thumbnails
In order to style the thumbnails, we need to copy and customize the following code, right before ]]:
.post .post-body img.post-thumbnail {
float: left;     /*Defines whether the thumbnail will float to the left, to the right, or not at all.*/
height: 120px;     /*Defines the height of the thumbnail.*/
margin: 0 5px 10px 0;     /*Defines the margin.*/
width: 120px;     /*Defines the width of the thumbnail.*/
}
The ‘Read More’ links
To style the ‘Read More’ links, we need to copy and customize the following code, right before ]]:
a.readmore {
/* CSS properties go here */
}
Demo
You can take a look at the result right here.



Tabbed Navigation System
Fernando Coello — Tue, 03 Mar 2009 06:09:48 +0000
A tabbed navigation system is always good for organization, especially when the space is very reduced. In this post, we will learn how to implement the easiest script I’ve found for this (via Blogger Buster), anywhere in our blogs and even use it with Blogger’s Feed, Labels and Blog Archive widgets in our sidebars, as explained in Amanda’s original post.
I had tried three different scripts before this one: Control.Tabs, Fabtabulous, and idTabs. The first two needed the Prototype library, and idTabs worked with jQuery. I was satisfied with the results; however, they were either too heavy or they worked with other external JavaScript libraries. Differently, this script is relatively fast and does not require any external JavaScript library.
Note: I strongly recommend you to backup your template, before adding anything.
Installation
We first need to install the script. To do this, we must add the following code, before :

I’ve uploaded the script to my server, but we can always download it and upload it to our own host or free hosting service.
Customization
General
In order to style the tabs, we need to copy and customize the following code, right before ]].
Note that the following styling includes, basically: background, border and text colors; margin and padding measures; as well as floating and aligning properties. All other styling will match with the one already set in your current template, so you do not have to worry about how your headings, links, images, text, etc. will look inside the containers.
/*main container*/
div.domtab {margin: 0; padding: 0;}

/*tabs*/
ul.domtabs {float: left; margin: 0; padding: 0;}

ul.domtabs li {
background: #999;
float: left;
list-style: none;
margin: 0 2px 0 0;
padding: 2px 3px;
text-align: center;
}

ul.domtabs li:hover, ul.domtabs li.active {background: #CCC;}
  ul.domtabs li a {color: #333; font-weight: bold; text-decoration: none;}

/*tabs containers*/
div.domtab div.tab-container {
border: 3px solid #ccc;
clear: both;
display: block;
padding: 10px;
}
Colors
We can, of course, change the following colors, based on our needs.
 #CCC — Used as background when the tabs are hovered and/or active, and as the border color for the containers.
 #999 — Used as the default tab background color.
 #333 — Used as the default tab text color.
Widths
DO keep in mind that if the tabs appear on top of each other, it’s probably due to the width of the sidebar, or container, since the individual tabs do NOT have a fixed width. In this example, three tabs fit perfectly in a 220px-wide sidebar, but we can’t, for example, expect six tabs to appear in the same line.
Usage
General explanation
This script requires the following to work properly. A main container which will contain (a) a list with the tabs, and (b) a container for each tab, where the content will obviously be displayed.



  TAB 1
  TAB 2

  TAB 3



  

Content for TAB 1.



  
Content for TAB 2.



  
Content for TAB 3.



1. The main container (
) should have the class domtab.
2. The list (
) with the tabs should have the class domtabs, and each link () in the list should point to the ID of each tab container.
3. Each container should have the class tab-container and an identifier (anchor) inside of it, with a unique name and ID.
Recent Posts, Labels and Archives Widget
Based on the explanation above, the things we must change to make this widget work are basically the unique IDs and the content for each tab (which, in this case, will be replaced by Blogger sections and widgets).
1. Look for the following line:

2. Right before it, paste the code below:



  Recent
  Categories

  Archives



  

  
    
  



  

  
    
  



  

  
    
  



3. Save your template.
4. Go to the Elements Page. Once there, you should see something like this:

Edit the Feed widget with your Feed URL, and you’re done.

Note: If you can’t edit this widget, feel free to delete it and add it again from there.
Demo
You can take a look at the result right here.
Reported Bug
Unfortunately, this script makes the post area disappear when a post’s comment link is accessed (i.e. http://blog.blogspot.com/2001/01/post.html#comments). The only solution I can come up with is changing the comment link for the post link. That way, the post and the comments will be displayed normally.
To do this, from your HTML Editor, after expanding the widget templates, look for the following code:
data:post.addCommentUrl
You will get two results. Change them for:
data:post.url
And you’ll be done.



Nice Link Titles
Fernando Coello — Sat, 04 Oct 2008 17:01:00 +0000
NiceTitle.js is a relatively simple script that creates a div-container which pops up when a link, with the title attribute, is hovered. This container shows what is written in the title attribute, plus the URL the link directs to.
Installation
We first need to install the script, which can be found here. To do this, we must add the following code, before :

Customization
In order to style the container displayed when the links are hovered, we need to copy and customize the following code, right before ]:
div.nicetitle {
background-color: #A38531;
color: #fff;
font: bold 13px "Trebuchet MS", Verdana, Arial, sans-serif;
padding: 4px;
position: absolute; top: 0; left: 0;
text-align: left;
width: 25em;
z-index: 20;
}

div.nicetitle p {
margin: 0;
padding: 0 3px;
}

div.nicetitle p.destination {
font-size: 9px;
padding-top: 3px;
text-align: left;
}
a) div.nicetitle{} is the main container that pops up when the link is hovered. You can change its background (color or image), its font, border properties and width.
b) div.nicetitle p{} is the paragraph inside the main container. There aren’t really too many things to customize, but you can apply some padding and margins.
c) div.nicetitle p.destination{} is the URL displayed below each link title. You can either opt to reduce its font-size, or simply not to display it (by adding display: none;).
Usage
Do not forget that for the script to display this container, you must add the title attribute to the links you want. Here’s an example:
Text to be displayed">Link Text



Different images for each post author
Fernando Coello — Fri, 26 Sep 2008 19:15:00 +0000

In blogs where there is more than one author, some distinction often becomes necessary. A good way of achieving this is by displaying each author’s personal image right next to his or her post title. 
This is what I will explain in this post. Though this effect can be done with JavaScript (as explained -in Spanish- in El Escaparate), it can also be done just by adding Blogger conditional tags.
 
Installation
From our Template Editor (Layout, Edit HTML) in our Blogger Dashboards, we must look for the following code:


 

And immediately after the line in red, add the following lines:


Image1_URL"/>



Image2_URL"/>


(You can repeat this code and keep modifying it, in case your blog has more than two blog authors.)
This code is case sensitive. So, Fernando is not the same as fernando or FERNANDO. The username we have to insert in the code above must match exactly the one displayed in our Blogger Profile. Also, the ideal image size is around the 30×30 – 50×50 pixels.
Customization
In order to style the image, we need to copy and customize the following code, right before ]]:
.author img {
padding: 0;
float: left;
border: none;     /*We may add some border to the images.*/
margin: 0 10px 10px 0;
}

The float property, as well as the margin, might change according to where we want the images to be displayed.
Demo
You can take a look at the result right here.