June 30, 2008

E-Mail Marketing Techniques

Whether you are selling a product or a service on your website or blog, e-mail marketing is a good method for reaching out to hundreds and even thousands of prospective customers. But, without a proper approach to this type of marketing, you may be wasting your time. A few little known secrets to be a successful e-mail marketer are revealed here!

June 25, 2008

CSS Hacks

Dealing with browser inconsistencies often makes up a majority of the work for a web designer. Sometimes there is no reasonable way to accomplish a desired layout in all major web browsers without the use of some special exception rules for certain layout engines. Hacks necessarily lead to potential complications and should be avoided whenever possible, but when the circumstances require hacks to be used, it's best to know what your options are and weigh the consequences appropriately. The purpose of this article is to describe some of the CSS hacks, also called CSS filters, with the least significant potential consequences.

Conditional comments

Due to its relatively poor level of standards support, Internet Explorer tends to be the subject of most CSS hacks. Luckily, as of version 5, it deliberately supports a rather safe-to-use hack called "conditional comments". Conditional comments are specially constructed HTML comments that Internet Explorer on Windows may treat differently from other browsers, optionally based on IE's version number. They can cause Internet Explorer to ignore the markup between comments or to include part of a comment as if it was regular markup. Conditional comments apply specifically to browsers using Internet Explorer's Trident layout engine, meaning IE-based browsers like Maxthon and Avant handle them like Internet Explorer does while browsers using other layout engines see them simply as regular comments. Internet Explorer on the Mac uses a different layout engine and doesn't support conditional comments.

The most beneficial aspect of conditional comments is that you are not relying on browser bugs when using them. When you use CSS hacks that rely on browser bugs, you run into the possibility of those bugs being fixed at anunwanted time or other browsers showing the same bugs. Conditional commentsonly work in browsers that specifically support them and claim to be based on Internet Explorer, which in this case all known browsers are honest about.

There are two forms of conditional comments: positive and negative. A positive conditional comment will expose the included markup only to web browsers that match the condition (meaning only the selected versions of Internet Explorer). A negative conditional comment will expose the markup only to web browsers that don't match the condition (meaning all non-IE web browsers and any versions of IE that the condition didn't match). Note that, since versions of IE older than IE 5 don't support conditional comments, you may get unexpected results in those browsers.

Syntax


The syntax for conditional comments is as follows:

Positive


<!--[if
condition]> HTML <![endif]-->



Negative

<!--[if !condition]><![IGNORE[--><![IGNORE[]]>
HTML <!--<![endif]-->



condition is one of the following:

IE

Any version of IE

lt IE version


Versions less than version

lte IE version

Versions less than or equal to version

IE version


Only version version

gte IE version

Versions greater than or equal to version

gt IE version


Versions greater than version

version is the version of Internet Explorer, typically

5, 5.5,
6, or 7

HTML is the HTML to be included if the condition does or doesn't match, depending on the type of conditional comment. When included, the HTML is placed right where the conditional comment is in the source.

For negative conditions,
<![IGNORE[--><![IGNORE[]]>

can be replaced with
-->
if the

condition
is simply IE. The longer version is only needed when Internet Explorer might parse the contents.

The <![IGNORE[... ]]> directive is not available in XML, so it is illegal to use it in XHTML. A solution would be to split it up into twospecial conditional comments:

<!--[if !condition]> XHTML
<![endif]-->
<!--[if !IE]>-->

XHTML <!--<![endif]-->

where XHTML is the same both places. Note that Internet Explorer 7 and below don't yet recognize XHTML as a form of XML, so this is merely forward-looking.


Fixing stand-alone versions of Internet Explorer

Internet Explorer was not designed to allow multiple versions to be installed at once, and Microsoft doesn't officially support any such configurations. If you use one of the
hacked third party packages
that attempts to do this, you will experience problems with version-specific conditional comments, among other things. This is because the different stand-alone copies still rely on a common centralized registry for certain data, including version information.

Although there is no simple way to cut through all of the issues withstand-alone versions of Internet Explorer, it is possible to force them to look elsewhere for their version information, thus fixing this issue with conditional comments. The trick is to remove the normal centralized version indicator. To do this, first open up regedit.exe from the "Run..." dialog. Navigate to HKEY_LOCAL_MACHINE/Software/Microsoft/Internet Explorer/Version Vector/
(If HKEY_LOCAL_MACHINE doesn't exist, try HKLM instead). In the right pane, you should see a row with a Name value of IE. Rename this by clicking on it and changing it to zIE (or anything unique and different). Restart Internet Explorer to see the effects. Now when it looks for the IE key for its version information, the key will be missing and it will be forced to determine the
correct version number from its own module.

Stand-alone versions of Internet Explorer have a number of other issues, and it therefore may be better to instead use a separate virtual machine for each version of Internet Explorer to ensure that what you see is what your users will see. I recommend VMware Server, which is completely free of charge and fairly easy to set up.


Conditional comments as a CSS hack

Conditional comments can be used as a CSS hack by including links to stylesheets based on the layout engine. Here is an example of how stylesheets can be separated in this way:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
<title>Test</title>
<link href="all_browsers.css" rel="stylesheet" type="text/css">

<!--[if IE]> <link href="ie_only.css" rel="stylesheet" type="text/css"> <![endif]-->
<!--[if lt IE 7]> <link href="ie_6_and_below.css" rel="stylesheet" type="text/css"> <![endif]-->

<!--[if !lt IE 7]><![IGNORE[--><![IGNORE[]]> <link href="recent.css" rel="stylesheet" type="text/css"> <!--<![endif]-->

<!--[if !IE]>--> <link href="not_ie.css" rel="stylesheet" type="text/css"> <!--<![endif]-->
</head>

<body>
<p>Test</p>
</body>
</html>
In the above example, all_browsers.css applies to all browsers, ie_only.css only applies to all versions of Internet Explorer, ie_6_and_below.css applies to all versions of Internet Explorer below IE 7, recent.css applies to all browsers except IE versions below 7, and not_ie.css applies to all non-IE browsers.


June 20, 2008

Color Palette Creation is a Breeze With ColorPic

Ever tried using a color picker on a high resolution monitor? It's impossible. That's why this color picker has a magnifier attached. Grab palettes of up to 16 colors at once and use four advanced color mixers to select a spectrum of possibilities.

Version 4 is now available, with the following features:
  • Easily pick any color from the screen
  • Totally 100% Free!
  • No popup adverts or spyware, it really is free
  • Colors shown in hex and decimal
  • Adjust Hue, Saturation, Value, Red, Green and Blue values
  • Cyan, Magenta, Yellow and Black percentages shown
  • Easy to use with any other program
  • Resizable magnification area
  • Overlay a grid for quick colorpicker alignment
  • Use arrow keys to nudge mouse pointer
  • Save multiple palettes of colors automatically
  • WebSafe Colors and names displayed
  • Snap to nearest WebSafe color
  • Point sample, 3x3 or 5x5 pixel color sampling
  • Adjust color with four advanced color mixers
  • Edit colorpicker values after selection easily
  • Easy to use collapsible sections
  • Works with Firefox, Internet Explorer, Photoshop and any other application

June 12, 2008

Expandable Post Summaries for Professional Blog Design

With little bit of modifications to your Blogger Beta template you can easily implement expandable post summaries in your blog main page. Expandable posts gives very professional and elegant look to your blog. You can hide most of the detailed content from main page and display them when the page of the post is opened. If you observer my blog, voting widgets are displayed on my post links and not in my main page. Also, most of the images in my posts are shown only in the actual post links only. Moving bandwidth intensive content to posts’ pages loads your main page very fast.
Let us see the steps to be followed for modifying the template to implement this.
Log in to your blogger account select Layout of the blog which you want to modify.

  1. Navigate through Template –> Edit HTML

  2. Take backup of your template by clicking Download Full Template. This backup will help you if you want to revert to old template.

  3. Search for ]]></b:skin> in your template HTML and paste the below code in between ]]></b:skin> and </head>

  4. Click Here To Get The Code:D



  5. Save your template and click on select Expand Widget Templates.

  6. Search for <data:post.body/> in the template HTML and paste the below code after <data:post.body/>

  7. <!-- Code to show "Read the rest of this entry >> " Link (Begin) -->

    <b:if cond='data:blog.pageType != "item"'>

    <span>

    <a expr:href='data:post.url' style='color:#0000FF; text-align:right; font-weight:bold; text-decoration:none'>Read the rest of this entry &gt;&gt; </a>


    </span>

    </b:if>

    <!-- Code to show "Read the rest of this entry >> " Link (End) -->





  8. That’s all. Your template is modified to show expandable posts.

  9. Now in every post, the content which you want to show only in post’s page should be included between <span class=”fullpost”>This will be shown only in post’s page</span>.remenmbering code every time is not easy for every one ,so for this also there is one trick .

  10. Go to Setting>> Formatting Scroll down yours cursor and put below code in Post Template.

    <span class="fullpost">
    
    </span>



  11. Another thing you must have to care about that is the part of post you want to show in home page is writen above <span class="fullpost"> and the part you do not want to show in homepage is written below<span class="fullpost"> as shown in below image.;)


  12. Post a test article using that HTML to see your blog working as expected!


June 10, 2008

Displaying RSS Feeds Easily Using Google Ajax Feed API

Displaying RSS feeds from other sites (ie: CNN or Digg) on your own is a nice way to show constantly updated content automatically. However, for the novice web developer, setting this up can be daunting, requiring both knowledge from you and your server's ability to host remote files. Google's Ajax Feed API changes all that, by basically enabling any webmaster to display RSS feeds on their sites using some JavaScript code. It hosts the desired RSS feeds on their servers for you, caches them, and returns the data in either JSON or XML format for you to utilize. All that's left is for you to use some JavaScript to parse this data and output it on your page.

In this tutorial, we show you how to harness Google Ajax Feed API to fetch a RSS feed and display it on your site.

The 3 Minute Setup:

Because Google's Ajax Feed API takes care of the most gruelling work for you- fetching and hosting the desired RSS feeds to show, your job is merely to learn how to use JavaScript to access and display that information. Regardless of what you're trying to do with the resulting data, the core process is the same. Let me explain it in 3 simple steps:

Step 1: Get your own (free) Google API key instantly, by going to their signup page, and entering your site's domain. A key that is super-duper-long is generated that will work only for that domain.

Step 2: Insert the following script in the HEAD section of your page, which first references Google Code API (required), then loads version 1 (currently the latest version) of Ajax Feed API:

<head>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR-API-KEY">
</script>

<script type="text/javascript">
google.load("feeds", "1") //Load Google Ajax Feed API (version 1)
</script>
</head>

Step 3: Now that you have access to Google Ajax Feed API on your page, all that's left is to use JavaScript to load the desired RSS feed, then retrieve and display the results in the desired manner. For example:

<div id="feeddiv"></div>

<script type="text/javascript">

var feedcontainer=document.getElementById("feeddiv")
var feedurl="http://rss.slashdot.org/Slashdot/slashdot"
var feedlimit=5
var rssoutput="<b>Latest Slashdot News:</b><br /><ul>"

function rssfeedsetup(){
var feedpointer=new google.feeds.Feed(feedurl) //Google Feed API method
feedpointer.setNumEntries(feedlimit) //Google Feed API method
feedpointer.load(displayfeed) //Google Feed API method
}

function displayfeed(result){
if (!result.error){
var thefeeds=result.feed.entries
for (var i=0; i<thefeeds.length; i++)
rssoutput+="<li><a href='" + thefeeds[i].link + "'>" + thefeeds[i].title + "</a></li>"
rssoutput+="</ul>"
feedcontainer.innerHTML=rssoutput
}
else
alert("Error fetching feeds!")
}

window.onload=function(){
rssfeedsetup()
}

</script>

June 7, 2008

Change Title Tags For Your Blog

Until recently, the title tags generated for each page of your Blogger blog would display the blog title first, then the name of your post.

This wasn't so good for SEO (search engine optimization) as this made keywords from your post titles appear after your blog title.

Luckily, Blogger have come up with a simple fix for this problem for those who use Layouts templates: the <data:blog.pageName/> tag!

This new tag is already installed for new blogs (or if you change your existing template to one of Blogger's default ones).

However, if you have customized your template or uploaded a third party template, you will need to change the original <data:blog.pageTitle/> to the new <data:blog.pageName/> tag for this change to take effect.


But don't worry: this is REALLY easy! Here's what you have to do:

1. Go to Layout>edit HTML in your Blogger dashboard.
2. Search for this tag: <title><data:blog.pageTitle/></title>
3. Replace that tag with the following:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/></title>
</b:if>

Save your template! (See, this is an easy hack!)

Once you've changed this tag, you'll see that on post pages, the default [blog name] page title format for your post titles in the browser window will be replaced solely by your post title instead.

This will increase the chances of your posts being picked up in search engine results for keywords which appear in your post titles (and can ultimately help draw more targeted traffic to your blog.

June 2, 2008

How to Customize Your Favicon in Blogger

A Favicon is a custom icon for your blog displayed next to the URL’s of your sites and next to the page title in open tabs.

By default in blogger blogs, all the icons are set to Blogger’s favicon:

By performing the following steps you can replace the Favicon with your own.

  1. Select an icon of your own, you can get quite a bit of professional free favicons at Favicons R Us or you can create your own Favicon at favicon.cc.
  1. Next you’ll need to host the icon on a website. If your blog is on a custom domain you can upload your icon there or you can upload it on a free service, preferably on Google’s free web hosting service. Once you’ve uploaded the icon you can move to step 3. [Lets call the URL of the icon you have uploaded ‘FaviconURL’]
  1. Now log in to your Blogger control panel, go to the layout panel of the blog you want to customize. Select ‘Edit HTML’.
  1. Look for the “<head>” code (it’s somewhere on the top, if you can’t find it select ‘Ctrl + F’ and search for it.)
  1. Once you’ve found the location right after the “<head>” code paste the following code:

<link href=FaviconURL rel=shortcut icon>
<link href=FaviconURL rel=icon>

Icon Details

The icon should be preferably square – 16×16, 32×32, or 64×64, bigger sizes are supported but you wouldn’t want most of your webpage’s file size to be because of your Favicon. It would be best if you limit the file size of the Favicon to less than 15k.