Kirk Evans Blog

.NET From a Markup Perspective

Made My Blog Go Live

Made My Blog Go Live

  • Comments 1

I was surfing around awhile today, and came across David Chou's blog.  He has some widgets on his blog that I thought were interesting, including a Live Messenger window that lets you ping him if he's online.  That caught my attention, but what I thought was even cooler was a drop-down list that allows the reader to instantly translate the page.  How cool is that?  I had to figure out how to do that.  Took all of 10 minutes to pimp my blog out.

Adding the Windows Live Messenger IM Control

This is about as straightforward as it gets.  Just follow the easy directions here:

  1. Open your Web browser, and navigate to: http://settings.messenger.live.com/applications/WebSettings.aspx.

  2. Select the Allow websites to see your Messenger status and send you messages check box and click Save. This will let other users see your Messenger status and send you messages.

  3. Under Web Settings, click Create HTML.

  4. Select the format for the control (IM window, Button, or Status icon), the size for the control, and the color scheme to use.

  5. At the bottom of the page, HTML code is generated. Copy the HTML and paste it into your Web page.

[via http://msdn.microsoft.com/en-us/library/bb936683.aspx]

When you click on the Messenger window to try to send me a message, you will be prompted to log onto Live to send me a message.  So, if you are reading my blog on the web and have a question, just go to the right side of the blog and start typing in the Messenger window.  If I'm logged on, I'll get the message!

Adding Windows Live Search

You can find more information about this API at http://search.live.com/siteowner.  To get started, I simply copied the HTML from David's page :)

 

<!-- Live Search -->
<div id="blogsearch">
    <h3>
        Live Search</h3>
    <br>
    <meta name="Search.WLSearchBox" content="1.1, en-US" />
    <div id="WLSearchBoxDiv">
        <table cellpadding="0" cellspacing="0" style="width: 200px">
            <tr id="WLSearchBoxPlaceholder">
                <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.msn.com/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.msn.com/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.msn.com",
         "market":"en-US"
      },
      "appearance":{
         "autoHideTopControl":false,
         "width":600,
         "height":400,
         "theme":"Blue"
      },
      "scopes":[
         {
            "type":"web",
            "caption":"&#x4d;&#x69;&#x63;&#x72;&#x6f;&#x73;&#x6f;&#x66;&#x74;&#x20;&#x42;&#x6c;&#x6f;&#x67;&#x73;",
            "searchParam":"site:blogs.msdn.com"
         }
         ,
         {
            "type":"web",
            "caption":"&#x57;&#x65;&#x62;",
            "searchParam":""
         }
      ]
   }
        </script>

        <script 
            type="text/javascript" 
            charset="utf-8" 
            src="http://search.msn.com/bootstrap.js?
                market=en-US&ServId=SearchBox
                &ServId=SearchBoxWeb&Callback=WLSearchBoxScriptReady"></script>

        <br>
    </div>
</div>

Adding the Windows Live Translator

This is the other one that I just copied from David's blog.  Very simple, really.  However, I think this is the coolest thing to add to a blog.  Well, being able to instant message the author of a blog to ask a question could be pretty useful, I guess, but the idea of instant translation with the click of a button the page is so self-evident that it screams cool.

<!-- Translator -->
<div id="translator">
<h3>Live Translator</h3>
<div id="trans">
<br>
<script type="text/javascript" 
src="http://translator.live.com/TranslatePageLink.aspx?pl=en"></script>
<br>
</div></div>
Page 1 of 1 (1 items)
Leave a Comment
  • Please add 3 and 3 and type the answer here:
  • Post
Translate This Page
Search
Archive
Archives