【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:訂閱連結

留言

Popular Articles

MySQL 語法匯整