• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Search Box dạng tab cho blogspot

13
29/12/2010

Có vài cách đưa công cụ tìm kiếm (Search Box) vào blogspot nhưng cách cơ bản nhất mà trước đây các blogger hay sử dụng là sử dụng đoạn code sau đây:

<p align="left">
<form id="searchthis" action="http://huynh-nhat-ha.blogspot.com/search" style="display:inline;" method="get">
<input id="b-query" maxlength="250" name="q" size="20" type="text"/>
<input id="b-searchbtn" value="Search" type="submit"/>
</form></p>

Tuy nhiên điểm yếu của code này là kết quả tìm kiếm rất hạn chế, không liệt được đầy đủ và chính xác những bài viết liên quan đến từ khóa tìm kiếm.



Để khắc phục điều này, gần đây Blogger cho cho ra đời tiện ích (Tab) Search Box với kết quả tìm kiếm khá tốt. Từ tiện ích này, tôi đã có một số điều chỉnh về code để ẩn đi một số phần không cần thiết trên tiện ích, kết quả là một tiện ich Search Box với phần nhập từ khóa và nút Search như kiểu Search Box cũ trước đây.


Để cài đặt tiện ích này, bạn hãy thực hiện như sau.

Đăng nhập Blogger, vào Edit HTML chọn Expand Widget Templates. (Nếu bạn đã cài đặt tiện ích sẳn có của Blogger thì vào Page Elements rồi xóa nó đi)

Thông thường người ta đặt Search Box ở phần sidebar. Trong Template, tìm đến vị trí cần đặt tiện ích. Đặt đoạn code dưới đây vào sau dòng </b:widget> ở quanh khu vực code mà bạn muốn đặt Search Box.

<b:widget id='CustomSearch101' locked='false' title='Search This Blog' type='CustomSearch'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title == &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>

<div class='widget-content' style='width:100%'>
<div expr:id='data:widget.instanceId + &quot;_form&quot;'>
<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:<data:linkColor/>;
}

#uds-searchControl .gs-result .gs-title a:visited,
#uds-searchControl .gs-result .gs-title a:visited * {
color:<data:visitedLinkColor/>;
}

#uds-searchControl .gs-relativePublishedDate,
#uds-searchControl .gs-publishedDate {
color: <data:dateColor/>;
}

#uds-searchControl .gs-result a.gs-visibleUrl,
#uds-searchControl .gs-result .gs-visibleUrl {
color: <data:urlColor/>;
}

#uds-searchControl .gsc-results {
border-color: <data:borderColor/>;
background-color: <data:backgroundColor/>;
}

#uds-searchControl .gsc-tabhActive {
border-color: <data:borderColor/>;
border-top-color: <data:activeBorderColor/>;
background-color: <data:backgroundColor/>;
color: <data:textColor/>;
}

#uds-searchControl .gsc-tabhInactive {
border-color: <data:borderColor/>;
background-color: transparent;
color: <data:linkColor/>;
}

#uds-searchClearResults {
border-color: <data:borderColor/>;
}

#uds-searchClearResults:hover {
border-color: <data:activeBorderColor/>;
}

#uds-searchControl .gsc-cursor-page {
color: <data:linkColor/>;
}

#uds-searchControl .gsc-cursor-current-page {
color: <data:textColor/>;
}
.gsc-branding-img-noclear, .gsc-branding-text {
display:none!important; visibility: hidden!important;
}
</style>
</b:includable>
</b:widget>

Lưu Template.

Cập nhật ngày 04-01-2011: Nếu bạn không hài lòng với cách trên thì sử dụng đoạn code như bên dưới để đặt tại vị trí muốn hiển thị công cụ tìm kiếm.

<form action="http://www.google.com/custom">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<div>
<input type="radio" name="sitesearch" value="" /> Web
<input type="radio" name="sitesearch"
value="huynh-nhat-ha.blogspot.com" checked="checked" /> Huynh Nhat Ha!
</div>
</form>


Web Huynh Nhat Ha!

Nếu muốn chỉ tìm kiếm trong blog thì sử dụng đoạn code sau đây.

<form action="http://www.google.com/custom">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
</form>


Bạn cần thay tên blogspot ở những dòng được đánh dấu màu đỏ.

Cập nhật ngày 05/01/2011: Nếu bạn muốn công cụ tìm kiếm tùy chỉnh của Google vẫn nằm trong blog của bạn thì thực hiện theo các bước sau đây.

1. Tạo một trang tĩnh để hiển thị kết quả tìm kiếm.

Đăng nhập Blogger vào NEW POST (BÀI ĐĂNG MỚI) >> Edit Pages (Chỉnh sửa trang) >> NEW PAGE (Trang mới). Tạo một trang tĩnh có tên là Search Page và đặt đoạn code sau đây vào phần nội dung của trang.

<style type=text/css>
#sidebar, #comments, .post-footer {display:none !important}
</style>

Mục đích của đoạn code này là ẩn đi một số id và class không cần thiết trên trang hiển thị kết quả tìm kiếm.

2. Tiếp theo đặt đoạn code dưới đây tại vị trí hiển thị công cụ tìm kiếm trong Template.

<form action="http://huynh-nhat-ha.blogspot.com/p/search-page.html">
<input type="text" name="q" size="20" />
<input type="submit" value="Search" />
<input type="hidden" name="sitesearch" value="huynh-nhat-ha.blogspot.com" />
<input type="hidden" name="cof" value="FORID:10" />
</form>


Thay phần được đánh dấu màu đỏ bằng tên blogspot của bạn.

{13 bình luậnAdd yours ?}

22:27:00, 29 thg 12, 2010

làm sao xác định cái gọi là vị trí cần đặt được vậy Hà ??? già dụ như blog mình , mình muốc đặt vị trí như cái search box mình đang có , thì mình tìm đến dòng nào ...

Reply
23:16:00, 29 thg 12, 2010

Bạn làm ơn mày mò một tí sẽ tiến bộ nhanh hơn. Tất nhiên phải thay code cũ bằng code mới rồi. Code cũ của bạn nằm trong 1 tiện ích HTML/JavaScript với id là HTML5. Thay đoạn code đại khái như sau:

<b:widget id='HTML5' locked='false' title='Search by movies name :' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

</b:includable>
</b:widget>

bằng đoạn code mới trong bài viết.

Reply
00:08:00, 4 thg 1, 2011

@Huỳnh Nhật Hà

Thanks Hà, nhưng tình hình là search vẫn không chuẩn , Hà thử search tên phim ju-on va tomie xem , không có kết quả hiện ra hix hix... sorry là mình không rành mấy về html nên cũng khó lòng chỉnh sửa...

Reply
14:13:00, 4 thg 1, 2011

mình sửa lại roài , nhưng vẫn không search chính xác ... ví dụ phim ju-on và tomie , seach không ra ... mình không rành HTML nên không biết làm sao fix đây huhuhu...

Reply
16:48:00, 4 thg 1, 2011

Ha ha, :)) chỉ còn cách là xài Công cụ tìm kiếm tùy chỉnh Google thôi à, cứ từ từ nhé bạn.

Reply
21:51:00, 4 thg 1, 2011

huhuhu... Hà thật dã man , đương nhiên mình thík cách trên hơn chứ, vì cách trên giữ người xem còn trong blog mình , cách dưới khiến người xem rời khỏi blog rồi ... ngoài ra không còn cách nào nữa huh Hà ???

Reply
08:30:00, 5 thg 1, 2011

Dã man là seo 8-} Kira là quá được ưu tiên rồi đấy. Được đằng chân lân cả mình rùi, hì hì. Đã cập nhật tiếp, đọc đi nhé.

Reply
14:33:00, 5 thg 1, 2011

cách update ngày 5/1/2011 của Hà lại không search được, có cách 4/1/2011 hoạt động tốt và chuẩn nhất , nhưng bị một khuyết nhỏ là văng ra khỏi blog chính...

Reply
15:26:00, 5 thg 1, 2011

Upate ngày 5/1 chỉ làm cho kết quả tìm kiếm nằm trong blog của bạn thôi mà, đâu có thay đổi code chính của Search Box đâu mà k được, đọc kỹ lại nhé Kira, lỗi chỗ nào cứ show nhé

Reply
10:50:00, 6 thg 1, 2011

Mình hiểu là chỉ làm cho kết quả search nằm trong trang mới khởi tạo vì mình có so sánh khác biệt giữa cập nhật ngày 4 và 5, nhầm cho kết quả search không "bay khỏi" blog nhờ vào lệnh action chỉ dường dẫn qua trang search page, nhưng khi bấm search thì không ra kết quả, tuy nhiên vẫn nhảy qua trang search page mới khởi tạo , nhưng không có một kết quả nào hiện ra, chữ no result cũng hok có... lỗi gì nhỉ, có khi nào là lỗi trình duyệt firefox ???

Reply
10:25:00, 12 thg 2, 2011

Kinh =))

Reply
15:59:00, 17 thg 7, 2012

mình ko biết làm sao để trang web mình vẫn giữ nguyên, còn kết quả tìm kiếm bật sang tab mới nữa, chẳng biết thêm target="_blank" như trong html thế nào!

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn