I’ve been experimenting with searching tumblr and up until now have found that the Technorati searchlet has performed better than a custom Google search – until I discovered Lijit that is!

The guys at Lijit have a working example of their search here – I believe it is on tumblr’s LiteWire Template – and from the code it seems a very simple installation in tumblr>Dashboard>Settings> Description which results in the full range that Lijit has to offer (and yes, at the time of writing, this is all that is pasted in the Description box to produce that info!):

Welcome to Grateful Web's Tumblr.  <script src="http://www.lijit.com/informers/wijits?type=pvs&amp;username=******&amp;js=1" type="text/javascript"><a href="http://www.lijit.com/">Lijit Search)

 

However, that didn’t work for me, possibly because I use a customised theme with extra sidebar content, so simply pasting the Lijit code in there or in the actual body html, after:

{block:Description}
                <div id="description">
                  </div>

 

resulted in the page becoming roughly twice the width!

I would try initially pasting your code into the Description box, but if it doesn’t work and/or you want extra stuff in the sidebar, have a look at the pertinent css (this from their theme):

div#content div#description {
    position: absolute;
    right: -170px;
    width: 160px;
    text-align: right;
}

 

and compare to what I use:

div#description {
    position: relative;
}
div#description div {
    position: absolute;
    left: 510px;
    top: 10px;
    font: Normal 14px Arial, Tahoma, Helvetica, sans-serif;
    text-shadow: #fff 0px 1px 1px;
    line-height: 20px;
     width: 150px;
    color: {color:Description};
    text-align: center;
}

 

Separate Search div

Now, you still can’t paste the code into the description div (I put that in for your reference) – to position the Lijit search I have put this extra code in the css section:

div#lijit {
    position: relative;
    left: 410px;
    width: 250px;
    text-align: right;
}

 

and the following (your Lijit code), between the content div and the {block:Description} (just after my page title actually – play with the title/h1 padding to get a nice separation of elements):

<div id="lijit">    <script type="text/javascript" src="http://www.lijit.com/informers/wijits?type=pvs&amp;username=********&amp;js=1"> <a style="color: #999" href="http://www.lijit.com" id="lijit_wijit_pvs_link">Lijit Search)
</div>

 

This pushes everything down by the height of the search, but that’s OK for a streamlined search.

3 column goodness

For the full array of Lijit goodness to show, I would create a new column that falls outside the others i.e. a 3 column layout. A bit of a squeeze I know, but it’s the best I can come up with at the moment. Use this extra code (altered for your own needs of course) in the css:

            div#lijit2 {
               position: absolute;
                left: 680px;
                top: 60px;
                font: Normal 14px Arial, Tahoma, Helvetica, sans-serif;
                text-shadow: #fff 0px 1px 1px;
                line-height: 20px;
                width: 150px;
                color: {color:Description};
                text-align: center;
            }

 

and add this immediately before {/block:Description}:

                <div id="lijit2">
                   <script type="text/javascript" src="http://www.lijit.com/informers/wijits?type=pvs&amp;username=**********&amp;js=1">
                </div>

 

Have fun and let me know how you get on…