Blog Hacks

I have several blogs and online "properties" that I maintain and I wanted to share styles and content among them. I also wanted to minimize redundancy. To that end I am collecting most of the customizations here, with pointers to more detail in some cases.
First off, I needed to share content among my sites so I needed a file host. GooglePages fit that bill very nicely and can be found over at http://googlepages.google.com.

Shared Lib Includes:

These go at the top of every page / template I use

<link href='http://jking.net.googlepages.com/sharedBlogStyleSheet.css' rel='stylesheet' type="'text/css'/">

<script src='http://jking.net.googlepages.com/sharedBlogJS.js' type='text/javascript'>

These two files hold the shared styles that I can then customize further in individual site files.

Google Pages

I recently gave up my paid hosting account to give a go at using all free web services to create a new virtual site that offered even more functionality. One of the needs for this project was a place to store simple things like shared files, js libs and what not. I spent some time banging around the net until I remembered that google page creator offered just such a thing. Huzzah, problem solved and even better, staying on the base google platform.

Check out google page creator at http://pages.google.com/

Attach an icon to anything

Through the magic of CSS, we can do so much more then ever before with web pages. One of my favorite recent tips is the ability to attach icons to links (or really anything) based on custom attributes. Rather then re-write the whole article, I am linking it here: http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS.

Try it out and be amazed. The tip works on all new (2007) browsers but will degrade gracefully for older systems. They will simply not see the icons.

Firefox Extensions for Web Developers (and blog hackers)

The days of looking at an area on a web page and guessing the pixel dimensions or color are over! Well, at least if you have a few tools and use Firefox. I like IE, but Firefox has largely replaced it for my day to day usage primarily due to the customization and tools available for Firefox.

Here are a few add-ins that I find to be very helpful for web development and hacking my blogs or other web properties I use.

1. The eye dropper utility.
   
   • This is a great little widget that gives you an eye dropper in the bottom of your status bar. If you click the eye dropper, you can identify the color of any area on your page in RGB or Hex.
   
   
   • Get it at https://addons.mozilla.org/firefox/271
   
   
   
   



2. The measure it utility.
   
   • This add-in gives you a little ruler in the status bar that you can click to get a measurement overlay giving you precise pixel dimensions of any screen area. Great for measuring that new page element location or footer area and so on.
   
   
   • Get it at https://https://addons.mozilla.org/firefox/539/
   
   
   
   



3. Web Developer
   
   • As described by CW: "Web Developer is another virtual Swiss Army Knife for coding. There's some overlap with Firebug, but where Firebug concerns itself almost exclusively with the content of a Web page, Web Developer offers tools to tweak how you're interacting with the page." I like this integration with the tool bar and the ability to work with CSS in particular.
   
   
   • Get it at https://addons.mozilla.org/firefox/60/
   
   
   
   

Random Quotes / Messages

Random quotes are a nice addition to a site to add a little fun content so I am including directions here to put them on your own blog.

1. Select a list of quotes to put on your blog.


2. Go to the templates tab on your blog customization and select add a new page element.


3. Select the HTML / JavaScript element


4. Paste the following code into the block




<i><center><script language="JavaScript">
//store the quotations in arrays
//change this number to reflect the number of quotes
quotes = new Array(2);
//just follow this pattern to add more quotes
quotes[0] = "Shave your head, get a wet sponge, and flip the switch, 'cause you're about to get a Truthocution!<br/>Stephen Colbert";
quotes[1] = "I believe all God's creatures have a soul... except bears, bears are Godless killing machines!<br/>Stephen Colbert";
//calculate a random index
index = Math.floor(Math.random() * quotes.length);
//display the quotation
document.write("\n");
document.write(quotes[index]);
</script></center></i>
</pre></li>



5. You can give the element a title if you want, but it is not needed


6. Save the element and drop in in your page where you want it.


7. Viola, you have random quotes...

Ok.... thanks for the applause, no really, thank you... Ok. So there are variations of this script all over the net. You can find a version you like better or hack this one up. Follow the links to check out sites with great little scripts and widgets for your blog, or watch here for more.

Hack your blog

While working on one of my other blogs, I have been playing around with blog hacks and tools. Basically what I've found is that blogspot is very similar to my favorite photo host (smugmug) in that is it highly customizable and uses standard naming conventions, styles and variables for templates.

Taking this into account, there is a growing community of "blog hackers" that have ready made widgets to drop into the blogs and it is fairly straight forward to make your own. I'm going to build a list of these hacks and make a link list as a starting point. Look for more content over time on this subject.