Compender: December 2007

Monday, December 31, 2007

Adding Dynamic StumbleUpon Links To The New Blogger Layouts Template

Posted by Raymond at 11:09 AM

I noticed in my analytics that I received a large influx of viewers last Friday from StumbleUpon. When I went to there to find their preferred link code, I found that they only had code for the old Blogger. Of course, I had to hack up a solution.

Here's the code for the "Stumble It!" link on Compender:

<style>
html .stumble_link { 
padding:2px 0 0 20px;
height:16px;
background:url(http://www.stumbleupon.com/images/icon_su.gif) no-repeat top left;
}
</style>

<script type='text/javascript'>
/*
StumlbeUpon Blogger Link Code
by Raymond May Jr.
http://www.compender.com
*/
 var postURL = '<data:post.url/>';
 var postTitle = '<data:post.title/>';
 
 document.write("<a class='stumble_link' href='http://www.stumbleupon.com/submit?url=" + postURL + "&amp;title=" + postTitle + "'>Stumble It!</a>");
</script>

Enjoy!

Replace Blogger Icon With Custom Favicon Using Google Web Pages As File Host

Posted by Raymond at 8:21 AM

To create a custom icon for your Blogger blog to replace the orange default Blogger icon, you will need to create an image with the following criteria:

32x32 (or 16x16) pixels in size
PNG file format

Upload the image to your Google Web Pages Account:

Then in your blog's template HTML, insert the following line of code into the <head> section:

<link href='http://URL/imagename.png' rel='shortcut icon'/>

If everything is setup correctly, you will see your icon appear in the URL bar in most browsers:

Notes: This code will only work in standards compliant browsers e.g. Firefox, Safari, Opera, etc. This code does not work in IE7. You cannot upload an .ico file to your Google Pages account and link to it in the head section and have it appear as an icon. It appears that Google Pages sends the incorrect mime-type. That is why this tutorial uses PNG.

Friday, December 28, 2007

Taming Google Apps And Blogger To Work In Perfect Harmony

Posted by Raymond at 3:46 PM

For the past few months I have been fiddling with Google Apps and Blogger to work in conjunction on a single "Custom Domain". When using both services, it is easy to run into bumps along the path to getting everything setup. Many of the bumps do not provide any debug info as to what is causing the problem. So, today I will outline some of my findings in regards to setting up Google Apps and Blogger (along with your DNS records) to work together and play nice. It is not a step by step guide, but merely an advisory of what I consider to be best practices (I know people will take issue with some of the solutions and tips contained within - feel free to add to the debate in the comments).

Taking The Plunge
Are you ready to disregard all the nay-sayers who will scoff at your naiveté in daring to rely on an in beta email service such as is GMail for your business or other critical needs? Are you ready to only incur the cost of domain registration (a paltry 10$ a year at most) and forgo the cost of web hosting and all of its ridiculous pricing schemes? Are you ready to abandon the web-host crashing Wordpress blogging service for a less feature rich and not so plug-in friendly Blogger blog? Are you ready to have all your services hosted on Google's mass army of servers?

If you are ready to take the plunge, do not just sign up for all the services in one fell swoop. Take it one step at a time, and in proper order, to navigate around all the hazards that crop up along the course.

One Foot In Front Of The Other
First, you will have to decide how you are going to use Google's array of services. We will assume you will want to take advantage of Google's GMail for domains, but what we really need to know is whether you will be using Blogger or Web Pages for your main content - what do you want visitors to see when they go to yourdomain.com or www.domain.com? Your blog (or your blog customized into a CMS) or your Google Web Pages?

For most content publishers or small site/business owners tired of editing HTML and PHP documents, using a blog as your main content management system is a million times more appealing than using Google's limited Web Pages application - but do not think Pages can't be put pages to use in conjunction with your blog.

If you are going to use Blogger as your main content manager, set up Blogger first. If you have already signed up for Google Apps (such as GMail for your domain) you will immediately run into a conflict with attempting to publish to a www subdomain (e.g. www.yourdomain.com) or even the primary domain. In addition, if you plan on using GMail for your domain (or are currently using the service) you need to be careful in how you publish your blog to avoid missing any email.

When initially setting up Blogger there will be two critical issues to be aware of:

Using a primary domain as a CNAME alias will override MX records on many DNS hosts' name servers including GoDaddy.

For example, if you setup Blogger to publish to yourdomain.com instead of www.yourdomain.com by creating a CNAME record for the alias yourdomain.com pointing to ghs.google.com, you will find that, even if you have all the correct MX records on file, an MX lookup will return the CNAME record for your primrary domain ... ghs.google.com.

This will cause all email sent to all users at yourdomain.com to bounce and not be delivered.

The solution is to publish to www.yourdomain.com and setup domain forwarding (301/302 redirects) for your primary domain to either www.yourdomain.com or yourblogname.blogspot.com.
If you setup Google Apps before beginning to setup Blogger, you will get the lovely nonsensical error "There is all ready a blog hosted at this address" when attempting to publish to www.yourdomain.com. The reason being, that Google Apps Web Pages and the Start Page assume the rights to publish to the www subdomain.

The solution is to change the subdomain to which Web Pages and Start publish to or to disable them entirely. Then you can publish to www.yourdomain.com without a hitch.

Take Two Steps Back
I have all ready addressed the most serious conflicts that can arise between Google Apps and Blogger, but can you even setup your domain name to work as a Custom Domain in Google's services? When you read CNAME and MX above, did you just think "huh?" and gloss over the terms?

The most important question you have to answer before migrating to Google Apps and Blogger (or even supplementing your current setup) is, "Do I have access to modify my DNS records?" If you do not know the answer to the question, start by contacting your hosting provider or your registrar to find out whether or not you have access to make DNS changes.

GoDaddy and Enom are two partners with Google that do allow access to DNS records for parked (meaning no web hosting - simply registered) domains.

DNS WTF?
Much confusion arises from first-time adventures into modifying DNS records. One of the first things to understand is that an A record is not a CNAME record is not a MX record. There are many types of information stored within your DNS record each with its own name and purpose:

A
A records store the IP address (IPv4) of a specific computer/server.
CNAME
CNAME, canonical name, records allow domain names to be mapped to other domain names rather than specific IP address.
MX
MX, mail exchange, records

Understanding that each DNS record type is its own animal will save you a big headache down the road. There are many more record types than what I listed, but these are the main records you may have to modify when setting Google services.

Conclusion
If you are going to migrate to Google's current array of services in lieu of costly web hosting plans, make sure you understand what is and is not possible. Make a plan before signing up for Google's applications to avoid potential conflicts.

Thursday, December 27, 2007

GoDaddy Primary Domain As CNAME Alias And MX Records Conflict

Posted by Raymond at 11:38 AM

I was helping someone setup his Google Apps mail exchange records when in the course of things, I realized I had not been receiving email to my compender addresses since about the twentieth. When I did some initial DNS investigations I found that doing a lookup for MX records on my domain returned the CNAME record for the primary domain (ghs.google.com). That is definately not what you want to happen. I had originally set up the CNAME as a way to redirect to the www subdomain where my Blogger blog is hosted. Once I deleted the primary domain name as a CNAME alias record, my MX records were propagated and my email began to come through.

So again, for GoDaddy users, if you setup a CNAME record with your primary domain as the alias, your MX records will be overridden and the host you set in the CNAME for your primary domain will be returned.

Ugh. DNS makes my head hurt.

Denim Stretch Three Column Layout Template Conversion And Source

Posted by Raymond at 8:28 AM

This tutorial will guide you through the steps necessary to convert the two column Blogger template Stretch Denim into a three column layout. At the end of the tutorial the complete source will be provided. The steps are few, but the tutorial is verbose in an effort to help newcomers to CSS and blogger code understand the steps and be able to apply them in their own template conversions.

Before we start, lets examine how our screen real estate is currently used by examining our template's CSS. If we look at #header and #content-wrapper, we find that our "outside border" (light blue areas surrounding header and light gray areas surrounding the content area) is created with 2% margins; if you want to increase the size of the outside border, just increase these margins:

#header {
  margin: 0 2%;
  [...]
}

#content-wrapper {
  margin: 0 2%;
  [...]
}

We also find that our posting area, #main-wrapper, uses 64% of the #content-wrapper with a left side margin of 1% for a total of 65%. The sidebar uses 29% with a right side margin of 1% for a total of 30%. With our border margins included, this leaves 5% (undeclared) as padding between the posting area and the sidebar:

#main-wrapper {
  margin-$startSide: 1%;
  width: 64%;
  [...]
}

#sidebar-wrapper {
  margin-$endSide: 1%;
  width: 29%;
  [...]
}

Now that we have an idea of how space is currently used, lets plan out how we will make use of it for our three column design. Because adding another sidebar equal in size to the existing sidebar would push our screen real estate usage over 100%, we will have to adjust the widths of all the divs. That means, mathematically our usage needs to be less than or equal to 100%. For stretch templates, I find that 20% is usually enough space for most side bar widgets. With two sidebars, that is 40% used up right away and with their 1% margins (left for the left sidebar and right for the right) we have used up a total 42% with the sidebars. That leaves 58% for the posting area. Divided up with margins for "padding", our #main-wrapper will have a width of 56% with a left margin defined at 1% and an undeclared right margin of 1%.

In code our changes will look like this (modifications are in blold):

#main-wrapper {
  margin-$startSide: 1%;
  width: 56%;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
  margin-$endSide: 1%;
  width: 20%;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebarLeft-wrapper {
  margin-$startSide: 1%;
  width: 20%;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finally, we simply need to add our new #sidebarLeft-wrapper div (by copy and pasting of the sidebar-wrapper section) to the HTML to activate it:

<div id='sidebarLeft-wrapper'>
 <b:section class='sidebar' id='sidebarLeft' preferred='yes'>
 </b:section>
</div>

<div id='main-wrapper'>
 <b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
 </b:section>
</div>

<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
  <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
 </b:section>
</div>

You can view a demo of this template at http://sd3c.compender.com. Download the source.

Wednesday, December 26, 2007

Renaming A Label Across All Blogger Posts

Posted by Raymond at 8:54 AM

If you ever have the need to change an applied label name across all of your posts, you may think you need to do it manually post by post. Fortunately this is not the case. To "rename" a label, we simply need to select all posts with the original label, add our new label name (to replace the original) and finally remove the original label.

Navigate to Posting -> Edit Posts:

In the far left click on the name of label want to edit and select all posts:

Then in the Label Actions... drop down, under Apply Label select New
Label...

And enter the new label name:

Then while you have the same posts still showing select Label Actions... -> Remove Label and click on the label you wish to remove:

Monday, December 24, 2007

How To Sort The Labels Widget Reverse Alphabetically

Posted by Raymond at 8:42 AM

Someone on the Blogger Help Group asked if it was possible to sort the Labels widget z to a rather than a to z, someone replied, "no". Of course, with JavaScript the answer is actually "yes".

You can see an example of this widget in the Compender Sandbox. Here's the code:

<b:widget id='ReverseLabels' locked='false' title='Reverse Alphabetical Labels' type='Label'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <ul>
 <script type="text/javascript">
 /*
 Reverse Alphabetical Tag Sort
 by Raymond May Jr.
 http://www.compender.com
 Released to the Public Domain
 */
 var root = "<data:blog.homepageUrl/>";
 var tagUrl = "search/label/";
 var labels = new Array();
 
 <b:loop values='data:labels' var='label'>
  labels.push("<data:label.name/>");
 </b:loop>
 
 i=labels.length;
 while(i > 0)
 {
  i=i-1;
  document.write("<li><a href='"+root+tagUrl+labels[i]+"'>"+labels[i]+"</a></li>");
 }
 </script>
    </ul>
    <b:include name='quickedit'/>
  </div>
</b:includable>
</b:widget>

Friday, December 21, 2007

Finding GoDaddy's Total DNS Control Panel

Posted by Raymond at 9:16 AM

It takes a surprising number of steps to get to your domain's dns settings on GoDaddy's website, so here is a visual guide to get you there faster:

First login and then navigate to your domains by clicking on the Domains tab in the header and selecting My Domains:

Then click on the name of the domain you want to edit:

Then click "Total DNS Control and MX Records" near the top middle of the Domain Control Center:

Now you are in the Total DNS Control Panel where you can add your CNAME records and MX records:

Thursday, December 20, 2007

Denim Three Column Layout Template Conversion And Source

Posted by Raymond at 8:50 AM

This tutorial will guide you through the steps necessary to convert the two column Blogger template Denim into a three column layout. At the end of the tutorial the complete source will be provided.

To start, we need to examine how our screen real estate is currently used. To find out, we look at the #header and #content-wrapper sections of the CSS where we find both have a default width of 760 pixels. Now, for me, that 760 pixels is not enough space for two columns and a decent sized post area - especially since almost all computer screens today are viewed at resolutions of 1024x768 or greater. Meaning at the minimum you can expect users to have 1024 pixels of screen width.

So, lets bump up our content area to 800 pixels by modifying the #header and #content-wrapper widths:

#header {
  width: 800px;
  margin: 0 auto;
  background-color: $headerBgColor;
  border: 1px solid $headerBgColor;
  color: $headerTextColor;
  padding: 0;
  font: $headerFont;
}

#content-wrapper {
  width: 800px;
  margin: 0 auto;
  padding: 0 0 15px;
  text-align: $startSide;
  background-color: $mainBgColor;
  border: 1px solid $borderColor;
  border-top: 0;
}

Next, we need to decide how to divvy up those 800 pixels into margins, columns and a content area. I find it helps to think in percentages. If we leave the margins as is at 14 pixels (on #sidebar-wrapper and #main-wrapper), once we add our new column will end up with a margin usage of 56 pixels at 7% of our total content area. The explanation being that each sidebar div will have one margin defined at 14, and the posting area (#main-wrapper) will have a left-margin at 14 pixels but be defined with a width having 14 pixels subtracted for an "artificial" right-margin. That leaves us with 93% for our sidebars and posting area.

To divide up our 93%, we will go with a safe 20% each for our sidebars leaving 53% for our posting area. In pixels that is 160px for each sidebar and 424px for our posting area.

Let's check our math: (4 x 14px margins) + (2 x 160px sidebars) + 424 px posting area = 800px of total content. Hooray!

Lets codify those numbers:

#main-wrapper {
  margin-$startSide: 14px;
  width: 424px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
  margin-$endSide: 14px;
  width: 160px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

To create the CSS for our new sidebar, copy and paste #sidebar-wrapper and modify it to float to the left and have the correct margin:

#sidebarLeft-wrapper {
  margin-$startSide: 14px;
  width: 160px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finally we need to add the HTML div to activate our new sidebar:

<div id='sidebarLeft-wrapper'>
  <b:section class='sidebar' id='sidebarLeft' preferred='yes'>
  </b:section>
</div>

<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section>
</div>

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
  </b:section>
</div>

Save your changes and if you navigate to your Template's Page Elements settings, you will see that you are now able to add to your new column:

You can view the demo of this three column layout at http://d3c.compender.com.

Download the complete source for the Denim three column template.

Monday, December 17, 2007

Minima Three Column Layout Template Conversion And Source

Posted by Raymond at 8:22 AM

This guide will take you through the steps of converting the Blogger template Minima into a three column layout as demoed at http://m3c.compender.com. At the end of the tutorial, the source will be provided.

To begin, we will first examine the #header-wrapper (or #main-wrapper) section of the style sheet to figure out our current overall width:

#header-wrapper {
  width:660px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}

As you can see, the Minima template's content area uses a total 660 pixels. If we look at the #main and #sidebar styles we find:

#main-wrapper {
  width: 410px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

The total area used by content is only 630 pixels wide (main 410 + sidebar 220) leaving a 30 pixel spacer (outer/header 660 - content 630) between the posts area and the sidebar.

Now that we have the current layout figured out by the numbers, we can begin converting our template by making room for the new sidebar. Since we know the current design of Minima is pleasing on the eyes, we are going to preserve the current ratios of sidebar to content and simply add room for another sidebar (220 pixels). We will also include a spacer (30 pixels) between our new sidebar and our post area.

Change the #header, #outer, and #footer wrappers from 660 to 910 pixels (sidebar 220 + spacer 30):

#header-wrapper {
  width:910px;
  margin:0 auto 10px;
  border:1px solid $bordercolor;
}

#outer-wrapper {
  width: 910px;
  margin:0 auto;
  padding:10px;
  text-align:$startSide;
  font: $bodyfont;
}

#footer {
  width:910px;
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

Now that we have room for it, we will add our new sidebar wrapper by copying and pasting #sidebar-wrapper and giving a new name as well as setting the float to the appropriate side:

#sidebar-wrapper {
  width: 220px;
  float: $endSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebarLeft-wrapper {
  width: 220px;
  margin-right: 30px;
  float: $startSide;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finally, we need to add the HTML/Blogger Code to activate/show our new sidebar. In the HTML you are going to want to find the main and sidebar divs:

<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section>
</div>

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
  </b:section>
</div>

Copy the entire sidebar-wrapper section and paste it before main-wrapper, rename it sidebarLeft and remove the duplicate widgets:

<div id='sidebarLeft-wrapper'>
  <b:section class='sidebar' id='sidebarLeft' preferred='yes'>
  </b:section>
</div>

<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section>
</div>

<div id='sidebar-wrapper'>
  <b:section class='sidebar' id='sidebar' preferred='yes'>
    <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
    <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
  </b:section>
</div>

The template conversion is now complete. If you navigate to the page elements settings, you will now be able to add to your newly created sidebar:

Download/view the source for the Minima three column template.

Friday, December 14, 2007

Adding Dynamic Facebook Bookmarklets To Blogger Posts

Posted by Raymond at 2:09 PM

If you are not satisfied with having just a Digg link on your blog posts, why not add a Facebook bookmarlet?

Here is the code you need (don not let the HTML entities scare you - copy this exactly):

<script>
function fbs_click()
{
u=<data:post.url/>;
t=<data:post.title/>;
window.open(&#39;http://www.facebook.com/sharer.php?u=&#39;+encodeURIComponent(u)+&#39;&amp;t=&#39;+encodeURIComponent(t),&#39;sharer&#39;,&#39;toolbar=0,status=0,width=626,height=436&#39;);
return false;
}
</script>
<style>
html .fb_share_link {
padding:2px 0 0 20px;
height:16px;
background:url(http://static.ak.facebook.com/images/share/facebook_share_icon.gif?43:26981) no-repeat top left;
}
</style>
<a class='fb_share_link' expr:href='"http://www.facebook.com/sharer.php?u=" + data:post.url' onclick='return fbs_click()' target='_blank'>Share on Facebook</a>

You will want to add this to or below the footer section of your template's posts includible e.g. after the third footer line.

Thursday, December 13, 2007

Automatic Find Posts By Author Links

Posted by Raymond at 8:56 AM

If you operate a team blog and wondering how to have blogger automatically create search links to bring up all of one authors posts, this quick guide will give you all the code needed. It doesn't take a lot of code to do it, and if you know what you are doing you can easily trim my code down to one line, but for readability I am posting it as is.

What we will do is modify the the "Posted by Author Name" line to link Author Name to a label search for Author Name.

First, navigate to your template's HTML and expand the widget code. In your post includible section, you are going to want to find the author code below (note: it may be slightly different):

<div class='post-header-line-1'><span class='post-author vcard'>
  <b:if cond='data:top.showAuthor'>
    <data:top.authorLabel/>
    <span class='fn'><data:post.author/></span>
  </b:if>
</span>

What we need to do is replace the above author line (in bold) with the following script:

<script type="text/javascript">
/*
Author Label Links
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
var author = '<data:post.author/>';
var linkURL = '<data:blog.homepageUrl/>' + "search/label/";

document.write("<a href='" + linkURL + author + "'><span class='fn'>" + author + "</span></a>");
</script>

Now, for the links to return any results you need to tell your authors to label their posts with their author name exactly as it shows in their profiles.

That's it!

Wednesday, December 12, 2007

Filtering Out Everything Except Pre-Approved Senders in GMail

Posted by Raymond at 7:31 PM

Someone asked how to filter out all messages except pre-approved domains, I tried to respond with the answer but forgot that groups auto filters out anything in an email syntax.

So here's the code:
-(*@approveddomain1.com | *@approveddomain2.com)

When setting up your filter, in the From: field put -(*@approveddomain1.com | *@approveddomain2.com). The | is equivalent to OR. This will return all messages except the pre-approved domains. Now you can send everything to the trash that you do not pre-approve.

Leave a comment if this works for you!

Minima Stretch To Three Column Template Layout

Posted by Raymond at 10:13 AM

This quick guide will show you how to easily convert Minima Stretch to a three column layout template.

First, make sure your template is Minima Stretch:

Then navigate to Template->Edit HTML and get hacking:

Make room for the additional column by reducing size of #main-wrapper by the size of our new column (67% - 25% = 42%). Also, to get all our floats in a row, change the float and margin spacer from right to left:

#main-wrapper {
margin-left: 2%;
width: 42%;
float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Create a new #sidebarLeft-wrapper by copy-and-pasting and then editing #sidebar-wrapper:

#sidebar-wrapper {
margin-right: 2%;
width: 25%;
float: right;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebarLeft-wrapper {
margin-left: 2%;
width: 25%;
float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finally, we need to add the sidebar left div to activate our third column place the section code in bold just before the main-wrapper:

<div id='sidebarLeft-wrapper'>
  <b:section class='sidebar' id='sidebarLeft' preferred='yes'>
  </b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
</b:section>
</div>

Save your edits and then navigate to Template->Page Elements where you will now be able to add page elements to your newly created right column:

You can view a demo of this three column template at http://ms3c.compender.com/

Tuesday, December 11, 2007

How To Post HTML Code In Your Blog Posts

Posted by Raymond at 10:58 AM

We all hope that Blogger will soon evolve out of the stone age and provide bloggers with the ability to wrap blocks of html, c, java, et. al. in <code> tags for automatic entity conversion and formatting. Unfortunately, that has yet to happen and you will have to escape your HTML code by hand.

Or not...

There are several free HTML escapers floating around the net and I have even tried my hand at putting together one for my own use. What has to happen to display HTML code in a Blogger post is that all "<" and ">" characters need to be replaced with their HTML entity equivalents "<" and ">".

My JavaScript HTML Escape utility is located at http://pages.compender.com/htmlescape.htm. Feel free to try it out, examine the source and bookmark it for future use. I also added it to my new Link List element titled Tools here on the Compender blog.

-R

Monday, December 10, 2007

Minima Lefty Stretch To Three Column Template Conversion

Posted by Raymond at 8:10 AM

This guide will show you how to easily convert Minima Lefty Stretch to a three column layout template.

First, make sure your template is Minima Lefty Stretch:

Then navigate to Template->Edit HTML and get hacking:

Make room for the additional column by reducing size of #main-wrapper by the size of our new comumn (67% - 25% = 42%). Also, to get all our floats in a row, change the float and margin spacer from right to left:

#main-wrapper {
margin-left: 2%;
width: 42%;
float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Create the new sidebarRight wrapper by copy-and-pasting and then editing #sidebar-wrapper:

#sidebar-wrapper {
margin-left: 2%;
width: 25%;
float: left;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

#sidebarRight-wrapper {
margin-right: 2%;
width: 25%;
float: right;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

Finally, we need to edit the HTML divs so that sidebar-wrapper comes before main-wrapper and our new right hand column follows main-wrapper:

<div id='sidebar-wrapper'>
 <b:section class='sidebar' id='sidebar' preferred='yes'>
   <b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'/>
   <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
 </b:section>
</div>

<div id='main-wrapper'>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
  </b:section>
</div>

<div id='sidebarRight-wrapper'>
  <b:section class='sidebar' id='sidebarRight' preferred='yes'>
  </b:section>
</div>

Save your edits and then navigate to Template->Page Elements where you will now be able to add page elements to your newly created right column:

You can view a demo of this three column template at http://mls3c.compender.com

Saturday, December 8, 2007

Setting Up Google Apps Web Pages For GoDaddy Domains

Posted by Raymond at 10:21 PM

For Blogger users, custom domain redirects are handled on Google's end. Unfortunately, Google Apps does not currently have that handy redirect www.yourdmain.com to yourdomain.com feature. So that means if you want your web site create with Google Apps Web Pages accessible from both the primary domain and the www subdomain, you have to setup a 301/302 redirect - otherwise known as domain forwarding.

For GoDaddy domains this is rather quick and painless to set up. We will start with the DNS settings first and then it is just a matter of making one settings change in Google Apps.

Before we start, if you purchased your domain via Google Apps or Blogger, you may have some extra Google IPs (64.233.179.121, 66.249.81.121, 72.14.207.121 ofr example) floating around in your A records that will give you headaches. Delete them before you start the DNS configuration process.

First create or edit the www CNAME record to point at ghs.google.com by logging into GoDaddy and pulling up the Total DNS settings for the domain you are editing:

Then edit the Forwarding settings for your primary domain to point at your www subdomain:

Now, you may have to wait fifteen to twenty minutes for domain forwarding to activate, but once it has, typing in yourdomain.com in your web browser will automatically redirect to www.yourdomain.com.

To set up Web Pages to show up at your custom domain, log in to Google Apps and browse to your Web Pages settings:

Click on Change URL:

And make sure that your Web Pages URL is set to your custom www subdomain:

If you have followed all these steps, yourdomain.com will redirect to www.yourdomain.com and show your Google Apps Web Pages.

Friday, December 7, 2007

Modify CSS To Expand Template Width

Posted by Raymond at 10:50 AM

Modifying your blog's width is not all that complicated - you just need to know what to look for and how it works.

To get started, we need to first navigate to our template's source:

Next we are going to find our most common content wrappers #header, #content-wrapper, #main-wrapper and #sidebar-wrapper by scrolling through the section of our template source:

#header {
width: 800px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

[...]

#content-wrapper {
width: 800px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 14px;
width: 504px;
float: left;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
margin-right: 14px;
width: 240px;
float: right;
background-color: $mainBgColor;
display: inline;       /* fix for doubling margin in IE */
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden;      /* fix for long non-text content breaking IE sidebar float */
}

The parts we want to edit are the widths.

Start with the #content-wrapper and #header, and pick your desired overall width. For example, most of the default templates have a width of 660. As you can see here I changed my template to a width with 800. Then divide that width of 800 pixels (taking in account of margins) between your #main-wrapper and the #sidebar-wrapper.

That's it!

Thursday, December 6, 2007

Enabling Profile Photo In Your Profile (About Me) Page Element

Posted by Raymond at 2:45 PM

If you are wondering where the option to upload to upload your photo to your Profile page element is and why you have not been able to find it, that is because the Profile (About Me) page element uses your Blogger profile image rather than a blog specific image.

If you want a photo to show up in your blog's Profile page element, you will have to upload or specify a location to your desired image via your dashboard settings.

From your Blogger dashboard (before selecting a blog) click on "Edit Profile" in the upper right hand side:

Then scroll down to the "Photograph" section and choose and image:

Once uploaded the image will also who on your Profile page element.

Wednesday, December 5, 2007

Setting Up Blogger For Custom Domains On GoDaddy Revisited

Posted by Raymond at 12:23 PM

Some of us have been suffering to figure out how to set up a CNAME record for the primary domain. Today, I found the answer from another user on the Blogger help group. No longer will you have to use domain forwarding to bounce off of Blogger's servers to get both www.domainname.com and domainname.com working.

The following guide will show you how to get Blogger working properly with a GoDaddy hosted domain.

WARNING: Using a primary domain CNAME alias will effectively override your MX records at GoDaddy. This is a known issue as of 12/27/07. If you wish to use MX records (for example for GMail for domains), use the forwarding method instead of the solution outlined in this post.

Step 1: Have a Blogger hosted blog. E.g. "yourblogname.blogspot.com"

Step 2: Have a GoDaddy parked domain. E.g. "yourdomainname.com"

Step 3:

Set up a CNAME referral for the alias www under GoDaddy's Total DNS control panel to the host ghs.google.com

Set up a CNAME referral for the alias yourdomainname.com pointing to the host ghs.google.com

Step 4: Setup custom domain on Blogger by going to Settings->Publishing and entering your www.yourdomainname.com (or yourdomainname.com) address.

IMPORTANT: If you have Google Apps running for your domain, such as Gmail for Domains, you MUST login to http://google.com/a/ and disable Web Pages before blogger will allow you to publish to a www subdomain.

Conculusion:
If all is setup correctly, www.yourdomainname.com is now hosting your blog. Yourdomainname.com bounces to www.yourdomainname.com (or visa versa depending on how you set it up). All of this is completely transparent to your users and whether they remebmer www or not no longer matters.

A Simple Blogger Tag Cloud Widget

Posted by Raymond at 10:48 AM

This morning I did some hacking and built my first custom Blogger widget. This is the code for the simple tag cloud you see here on Compender. Feel free to copy and modify the source as you see fit. I tried to comment it best I could so others could fool around with it. It's a mix of JavaScript and Blogger Code, so it is only functional as a Blogger Widget.

Updated 1/2/08 to restrict by a minimum Tag count to reduce clutter for blogs with a zillion tags.

Code:

<b:widget id='TagCloud' locked='false' title='Tags' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
  <h2><data:title/></h2>
</b:if>
<div class='widget-content' style='text-align: justify;'>
 <script type="text/javascript">
/*
Simple Blogger Tag Cloud Widget
by Raymond May Jr.
http://www.compender.com
Released to the Public Domain
*/
//Variables:
var max = 150; //max css size (in percent)
var min = 50; //min css size (...)
var showCount = 1;  // show counts? 1 for yes
var minCount = 1;  // what is the minimum count for a Tag to be shown? 1 for all.

//Begin code:
var range = max - min;

//Build label Array
var labels = new Array();
 <b:loop values='data:labels' var='label'>
   labels.push("<data:label.name/>");
 </b:loop>

//URLs
var urls = new Array();
 <b:loop values='data:labels' var='label'>
   urls.push("<data:label.url/>");
 </b:loop>

//Counts
var counts = new Array();
 <b:loop values='data:labels' var='label'>
   counts.push("<data:label.count/>");
 </b:loop>

//Number sort funtion (high to low)
function sortNumber(a, b)
{
 return b - a;
}

//Make an independant copy of counts for sorting
var sorted = counts.slice();

//Find the largest tag count
var most = sorted.sort(sortNumber)[0];

//Begin HTML output
for (x in labels)
{
 if(x != "peek" &amp;&amp; x != "forEach" &amp;&amp; counts[x] >= minCount)
 {
  //Calculate textSize
  var textSize = min + Math.floor((counts[x]/most) * range);
  //Show counts?
  if(showCount == 1)
  {
   var count = "(" + counts[x] + ")";
  }else{
   var count = "";
  }
  //Output
  document.write("<span style='font-size:" + textSize + "%'><a href='" + urls[x] + "'>" + labels[x] + count + "</a></span> " );
 }
}
</script>
</div>
</b:includable>
</b:widget>

Installation:

If you already have a Labels page element installed, skip to step 2.

Step 1: Install the Labels page element by browsing to your template settings:

Click "Add a Page Element" in the column you wish:

Then find the Labels page element and click "Add to Blog":

Step 2: Replace the Labels page element widget code with the custom tag cloud code above.

First navigate to your templates source under your template settings:

Then check off "Expand Widget Templates":

Search for the Label page element you are replacing by searching for widget code. It will look something like this

<b:widget id='Label1' locked='false' title='Tags' type='Label'>

but id and title maybe different, so use your browser's search tool and look for type='Label'.

Delete the Label widget code from the start to the end marked by

</b:widget>

and replace with the custom Tag Cloud code from above.

Tuesday, December 4, 2007

Change The Date Of A Post (Force To Top)

Posted by Raymond at 2:51 PM

Sometimes we want to force a post to the top of our main page. To do that, we need to change the date of our post.

First open the post you want to edit. At the bottom left of the editor there is a "Post Options" link:

Click "Post Options" and the post date and time fields will appear in the bottom right corner of the editor:

Change the date to how you see fit and click "Publish Post". For example, if it's a special Christmas message, set the post date to 12/25/07 at 11:59 PM and your message will stay on the main page at the top of the posts until midnight Christmas day.

Using Yahoo Pipes To Remove Images From Blooger RSS Feeds

Posted by Raymond at 8:44 AM

I use Yahoo Pipes to filter content from feeds for my personal use, as I often am only interested in certain topics provided in a feed and don't want to sift through fifty posts to find the topic I am interested in.

You can also use Yahoo Pipes to remove images from feeds.

You only need two pipes modules "Fetch Feed" and "Regex" and a little Regex code to do it: