Live search for your blog with GWB, MSDN and Web integrated search

Tags: Personal

Check out my new live search component to the right here ->

I came across this on Heather Solomon's blog, thought it was cool so had a play and set one up for my blog.

To start with get yourself over to http://search.live.com/siteowner, select the advanced option.  I think it only works if you have your blog on a custom domain like blog.steveclements.net as www.geekswithblogs.net/steveclements doesn't work.  I also created a live search macro for geekwithblogs.net and used and existing one for msdn sites and blogs.  Creating your own macro is very straight forward, well the basic one is, I didn't actually look at what the advanced offered.

Here you can see the four tabs for different search results.

image

The live.com tool generates the code for you, but I had to make a couple of changes to get it to look right (background-color: White, add a search title) and fit (reduced the width).

I am pretty excited about this, I have used google and live search before just to find content on my own blog so this is definitely going to get lots of use, with geekswithblogs on there makes it even more useful, I often remember a post from the geekswithblogs feed, but cant remember who posted it.  With MSDN and web makes it pretty complete I reckon!

Heres the code.

To get it to show in the blog paste it into admin settings -> options -> configure -> static news/announcement.

<!-- Live Search -->
<meta name="Search.WLSearchBox" content="1.1, en-GB" />
<div id="WLSearchBoxDiv">
<table cellpadding="0" cellspacing="0" style="width: 185px">
<tr>
    <td style="font-weight: bold;padding-right:5px;text-align:left;">Search</td>
</tr>
<tr id="WLSearchBoxPlaceholder" style="background-color:White;">
  <td style="width: 100%; border:solid 2px #4B7B9F;border-right-style: none;">
  
  <input id="WLSearchBoxInput" type="text"     value="&#x4c;&#x6f;&#x61;&#x64;&#x69;&#x6e;&#x67;&#x2e;&#x2e;&#x2e;"     disabled="disabled"     style="padding:0;background-image: url(http://search.live.com//siteowner/s/siteowner/searchbox_background.png);background-position: right;background-repeat: no-repeat;height: 16px; width: 100%; border:none 0 Transparent" />
  </td>
  <td style="border:solid 2px #4B7B9F;">
  <input id="WLSearchBoxButton" type="image"     src=http://search.live.com//siteowner/s/siteowner/searchbutton_normal.png     align="absBottom" style="padding:0;border-style: none" />
  </td>
</tr>
</table>
    <script type="text/javascript" charset="utf-8">
    var WLSearchBoxConfiguration=
    {
        "global":{
            "serverDNS":"search.live.com",
            "market":"en-GB"
        },
        "appearance":{
            "autoHideTopControl":false,
            "width":800,
            "height":550,
            "theme":"Green"
        },
        "scopes":[
            {
                "type":"web",
                "caption":"&#x53;&#x74;&#x65;&#x76;&#x65;&#x20;&#x43;&#x6c;&#x65;&#x6d;&#x65;&#x6e;&#x74;&#x73;",
                "searchParam":"site:blog.steveclements.net"
            }
            ,
            {
                "type":"web",
                "caption":"&#x47;&#x65;&#x65;&#x6b;&#x73;&#x77;&#x69;&#x74;&#x68;&#x42;&#x6c;&#x6f;&#x67;&#x73;",
                "searchParam":"macro:steveclements.geekswithblogs"
            }
            ,
            {
                "type":"web",
                "caption":"&#x4d;&#x53;&#x44;&#x4e;",
                "searchParam":"macro:livelabs.msdn"
            }
            ,
            {
                "type":"web",
                "caption":"&#x57;&#x65;&#x62;",
                "searchParam":""
            }
        ]
    }
    </script>
    <script type="text/javascript" charset="utf-8"      src="http://search.live.com/bootstrap.js?market=en-GB&ServId=SearchBox&ServId=SearchBoxWeb&Callback=WLSearchBoxScriptReady">    </script>
</div>
<!-- Live Search -->




comments powered by Disqus