Creating a favicon in WordPress

6 08 2008

You’ve probably noticed some websites having an image in the address bar, like so:

image

These are called favicons (short for “favorites icon”) and in this post I’ll show you how to add one into your website.

  1. Create an image you want to represent your website (most likely you already have a logo for your blog).
  2. If the image is not square (i.e., the width and height are not the same), convert it into a square image, either by cropping or adding whitespace (or blackspace) to the sides or top and bottom.  You can use GIMP or PhotoShop.
  3. Resize the image to 16 x 16 pixels.
  4. Save the file as favicon.ico.
  5. Copy the favicon.ico into:
    1. Your current theme’s main folder (i.e., wp-content/theme/themename)
    2. In your website’s main directory (i.e., http://sitename.com/favicon.ico).
  6. You might as well add this line into your current theme’s header.php file for older browsers to see it:
  7. <link rel="shortcut icon" href="<?php bloginfo('template_directory'); ?>/favicon.ico" />

    Note: If a line already exists that ends with /favicon.ico,overwrite it with the line above.

  8. Save your changes.
  9. Reload your website and that’s it!

Enjoy!

P.S. The favicon on my website is a headshot of me.  =0)



WordPress plugin to create Google XML-Sitemaps

6 08 2008

Here’s a WordPress plugin that will create an XML-Sitemap that can greatly enhance your website’s presence, which is supported by Ask.com, Google, Yahoo! and MSN Search.

Here are also some links to help you with SEO (Search Engine Optimization) ranking:

http://www.google.com/support/webmasters
http://search.yahoo.com/info/submit.html
http://about.ask.com/en/docs/about/webma…
http://search.live.com/docs/submit.aspx

Hope you find this post helpful.



Free Microsoft Press e-book offer

27 12 2007

Just sign up with your Windows Live/Passport account and you can download all three e-books by Microsoft Press.  It includes the following:

image

Enjoy!



Web 2.0: Gray out the screen

18 12 2007

This snippet grays out the screen and allows you to create a modal environment. A gray out is useful for creating a DHTML dialog box, or showing off a picture or video. While a gray out is active, most interactive elements on the page (links, etc.) are inactive - you’ve probably seen this on the new My Yahoo! page.

function grayOut(vis, options) {
  // Pass true to gray out screen, false to ungray
  // options are optional.  This is a JSON object with the following (optional) properties
  // opacity:0-100         // Lower number = less grayout higher = more of a blackout
  // zindex: #             // HTML elements with a higher zindex appear on top of the gray out
  // bgcolor: (#xxxxxx)    // Standard RGB Hex color code
  // grayOut(true, {'zindex':'50', 'bgcolor':'#0000FF', 'opacity':'70'});
  // Because options is JSON opacity/zindex/bgcolor are all optional and can appear
  // in any order.  Pass only the properties you need to set.
  var options = options || {};
  var zindex = options.zindex || 50;
  var opacity = options.opacity || 70;
  var opaque = (opacity / 100);
  var bgcolor = options.bgcolor || '#000000';
  var dark=document.getElementById('darkenScreenObject');
  if (!dark) {
    // The dark layer doesn't exist, it's never been created.  So we'll
    // create it here and apply some basic styles.
    // If you are getting errors in IE see: http://support.microsoft.com/default.aspx/kb/927917
    var tbody = document.getElementsByTagName("body")[0];
    var tnode = document.createElement('div');           // Create the layer.
        tnode.style.position='absolute';                 // Position absolutely
        tnode.style.top='0px';                           // In the top
        tnode.style.left='0px';                          // Left corner of the page
        tnode.style.overflow='hidden';                   // Try to avoid making scroll bars
        tnode.style.display='none';                      // Start out Hidden
        tnode.id='darkenScreenObject';                   // Name it so we can find it later
    tbody.appendChild(tnode);                            // Add it to the web page
    dark=document.getElementById('darkenScreenObject');  // Get the object.
  }
  if (vis) {
    // Calculate the page width and height
    if( document.body && ( document.body.scrollWidth || document.body.scrollHeight ) ) {
        var pageWidth = document.body.scrollWidth+'px';
        var pageHeight = document.body.scrollHeight+'px';
    } else if( document.body.offsetWidth ) {
      var pageWidth = document.body.offsetWidth+'px';
      var pageHeight = document.body.offsetHeight+'px';
    } else {
       var pageWidth='100%';
       var pageHeight='100%';
    }
    //set the shader to cover the entire page and make it visible.
    dark.style.opacity=opaque;
    dark.style.MozOpacity=opaque;
    dark.style.filter='alpha(opacity='+opacity+')';
    dark.style.zIndex=zindex;
    dark.style.backgroundColor=bgcolor;
    dark.style.width= pageWidth;
    dark.style.height= pageHeight;
    dark.style.display='block';
  } else {
     dark.style.display='none';
  }
}

Thanks to Peter Hunlock for sharing this.



Easiest way to install IIS 7 on Vista

13 10 2007

By default, IIS 7.0 is not installed on Windows Vista Business or Windows Vista Ultimate, but installing is pretty simple. You can do it via Windows Features in Advanced Options under Programs in Control Panel. However, there is an easier way:

Step #1: Run the following command

  • Open up the command prompt and paste the following (it may take a while):
start /w pkgmgr /iu:IIS-WebServerRole;IIS-WebServer;IIS-CommonHttpFeatures;IIS-StaticContent;IIS-DefaultDocument;IIS-DirectoryBrowsing;IIS-HttpErrors;IIS-HttpRedirect;IIS-ApplicationDevelopment;
IIS-ASPNET;IIS-NetFxExtensibility;IIS-ASP;IIS-CGI;IIS-ISAPIExtensions;IIS-ISAPIFilter;IIS-ServerSideIncludes;IIS-HealthAndDiagnostics;IIS-HttpLogging;IIS-LoggingLibraries;IIS-RequestMonitor;IIS-HttpTracing;IIS-CustomLogging;IIS-Security;IIS-BasicAuthentication;IIS-URLAuthorization;IIS-RequestFiltering;IIS-IPSecurity;IIS-Performance;IIS-HttpCompressionStatic;IIS-HttpCompressionDynamic;IIS-WebServerManagementTools;IIS-ManagementConsole;IIS-ManagementScriptingTools;IIS-ManagementService;IIS-IIS6ManagementCompatibility;IIS-Metabase;IIS-WMICompatibility;IIS-LegacyScripts;IIS-LegacySnapIn;WAS-WindowsActivationService;WAS-ProcessModel;WAS-NetFxEnvironment;WAS-ConfigurationAPI

Step # 2: Check if the install was okay

  • Type the following (again in the command prompt:

echo %errorlevel%

Step # 3: Check if IIS is running

  • Open up your favorite browser and go to http://localhost.
  • If all went well, you should see the following page:

image