【Blogger】Draft:SearchBox - Blogger 測試中的搜尋框

在看了 Josh`s Note 最近的文章後，凍仁也到 Draft 加入 SearchBox(搜尋框) 這個測試中的新功能.. 就是現在在本 Blog 最右上方的搜尋框。由於它的 result(顯示結果) 是鑲在 Blog 裡，且還有 此網誌、從這裡連結、Linkbar、網頁 4個功能，也就是說它除了能搜尋 Blog 內部的文章，還能追蹤在這個 Blog 上所有的連結，凍仁就把之前的Google 提供的 AJAX 自訂搜尋引擎換掉囉..

1. 新增 SearchBox

從 http://draft.blogger.com/ 登入 → 版面配置 → Add Page Element，找到搜尋框 → 加入Blog

搜尋框 (新功能！)
搜尋您的網誌、blogroll 及任何您想連結的內容。已加入

2. 修改Color

新增完，搜尋結果會在 Post(Blog 文章) 上顯示結果，預設的 color 不是凍仁的風格，Font and Color(字型和顏色) 裡也沒得改，只好硬改 CSS 了，以下是凍仁的 SearchBox code，只要在紅字部分跟改為自己想要的代碼即可。

<div id='searchbar-wrapper'>
    <b:section class='searchbar' id='searchbar' preferred='yes'>
        <b:widget id='CustomSearch1' locked='false' title='' type='CustomSearch'>
            <b:includable id='main'>
                <!-- only display title if it's non-empty -->
                <b:if cond='data:title != ""'>
                    <h2 class='title'><data:title/></h2>
                </b:if>

                <div class='widget-content' style='width:90%'>
                    <div expr:id='data:widget.instanceId + "_form"'>
                        <span class='cse-status'><data:loadingMsg/></span>
                    </div>
                </div>

                <!-- override gsearch.css -->
                <style type='text/css'>


                    #uds-searchControl .gs-result .gs-title,
                    #uds-searchControl .gs-result .gs-title *,
                    #uds-searchControl .gsc-results .gsc-trailing-more-results,
                    #uds-searchControl .gsc-results .gsc-trailing-more-results * {
                        color:#ff0000;
                    }

                    /* 已拜訪的標題顏色 */
                    #uds-searchControl .gs-result .gs-title a:visited,
                    #uds-searchControl .gs-result .gs-title a:visited * {
                        color:#ffdb00;
                    }

                    /* 滑鼠移至標題的顏色，這段得自己補上 */
                    #uds-searchControl .gs-result .gs-title a:hover,
                    #uds-searchControl .gs-result .gs-title a:hover * {
                        color:#ffdb00;
                    }

                    /* Text color*/
                    #uds-searchControl .gs-relativePublishedDate,
                    #uds-searchControl .gs-publishedDate {
                        color:;
                    }

                    /* 網址 */
                    #uds-searchControl .gs-result a.gs-visibleUrl,
                    #uds-searchControl .gs-result .gs-visibleUrl {
                        color:#6EA2E5;
                    }

                    /* SearchBox 框線顏色 */
                    #uds-searchControl .gsc-results {
                        border-color: #cc0000;
                    }

                    /* 作用中的標籤 */
                    #uds-searchControl .gsc-tabhActive {
                    border-color:#cc0000;
                    border-top-color:<data:activeBorderColor/>;
                    background-color:#cc0000;
                        color:#ffdb00;
                    }

                    /* 無作用的標籤 */
                    #uds-searchControl .gsc-tabhInactive {
                    border-color:#cc0000;
                    background-color:transparent;
                        color:#ffdb00;
                    }
                </style>

                <b:include name='quickedit'/>
            </b:includable>
        </b:widget>
    </b:section>
</div>

ps: 真希望那天 Google 也能把它做的像 Firefox 那樣，把自己的搜尋引擎都加進來:P

相關連結：
★來試試新玩意之一，Blogger in Draft：訂閱連結