Lên đầu trang
Xuống cuối trang


Đây là tiện ích tìm kiếm nội tuyến trong phạm vi blog của bạn.Khi muốn tìm 1 nội dung nào đó ta chỉ cần gõ các từ khóa có nội dung liên quan tới vấn đề cần tìm và nhấn enter ta sẽ được một list các bài viết dưới dạng tóm tắt với tiêu đề có link,ảnh thumbnail và đoạn trích dẫn.

Đưa tiện ích vào blogspot

Để tạo tiện ích này cần thêm css vào trong mẫu nhưng để đơn giản ta gộp tất cả thành thêm 1 tiện ích
Vào Bố cục chọn thêm tiện ích HTML/javascript và dán đoạn code sau vào rồi lưu lạ

<center>
<style>#search-form-feed {
width:250px; /*Chiều dài ô tìm kiếm */
position:relative;
margin:0 0 10px;
padding:0 0;
font:normal normal 11px Arial,Sans-Serif;
color:#333;
}

#feed-q-input {
display:block;
width:100%;
border:2px solid #bbb;
background-color:white;
padding:5px 5px;
font:normal bold 13px Tahoma,Arial,Sans-Serif;
color:#ccc;
margin:0 0;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
-webkit-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
-moz-box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
box-shadow:inset 0 1px 5px rgba(0,0,0,.2);
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}

#feed-q-input:focus {
border-color:#0D6786;
color:#333;
outline:none;
-webkit-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
-moz-box-shadow:0 0 5px #153E95,0 0 7px #153E95;
box-shadow:0 0 5px #153E95,0 0 7px #153E95;
}

#search-result-container {
width:400px;
height:300px;
overflow:auto;
position:absolute;
top:100%;
right:0;
z-index:999;
background-color:#E5EDF7;
border:2px solid white;
padding:10px 10px 0;
margin:10px 0 0;

-webkit-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-moz-box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
box-shadow:0 1px 2px rgba(0,0,0,.4),0 7px 7px -4px rgba(0,0,0,.4);
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
display:none;
}

#search-result-container mark {
background-color:yellow;
color:black;
}

#search-result-container a {
text-decoration:none;
color:#0D3E71;
font-weight:bold;
font-size:12px;
display:block;
}

#search-result-container a:hover {
color:#052748;
}

#search-result-container h4 {
margin:0 0 10px;
font:normal bold 12px 'Trebuchet MS',Arial,Sans-Serif;
color:#B50001;
}

#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding:0 0;
}

#search-result-container li {
margin:0 0 1px;
padding:7px 8px;
list-style:none;
border:1px solid #B7C1CE;
background-color:white;
overflow:hidden;
word-wrap:break-word;
}

#search-result-container li img {
display:block;
float:left;
margin:0 10px 4px 0;
border:1px solid #B7C1CE;
background-color:#F5F5F5;
padding:2px 2px;
}

#search-result-loader {
position:absolute;
top:100%;
left:5px;
z-index:999;
background-color:#0D6786;
color:white;
padding:3px 5px;
margin:-2px 0 0;
font:normal bold 10px Arial,Sans-Serif;
-webkit-border-radius:0 0 3px 3px;
-moz-border-radius:0 0 3px 3px;
border-radius:0 0 3px 3px;
display:none;
}</style>

<div id="search-form-feed">
<form action="/search" onsubmit="return updateScript();">
<input name="q" type="text" value="Gõ từ liên quan rồi nhấn Enter..." id="feed-q-input" onkeyup="resetField();" onfocus="this.value='';"/>
</form>
<div id="search-result-container">
</div>
<div id="search-result-loader">
Loading...</div>
</div>
<script type="text/javascript">
//<![CDATA[

var searchFormConfig = {
url: "http://kartriderdautocrazy01.blogspot.com", // Thay URL Blog của bạn vào
numPost: 9999,
summaryPost: true, // 'true' Tùy chọn để hiển thị hoặc ẩn các bài viết tóm tắt trong kết quả tìm kiếm
summaryLength: 400, // Xác định số lượng ký tự một bản tóm tắt kết quả tìm kiếm
resultTitle: "Kết quả tìm kiếm với Từ khóa", // Kết quả tìm kiếm tiêu đề hoặc từ khóa
noResult: "Xin lỗi không tìm thấy @", // Cảnh báo chỉ ra rằng các bài không được tìm thấy
resultThumbnail: true, // 'true' Tùy chọn để hiển thị hoặc ẩn các hình thu nhỏ bài trong kết quả tìm kiếm
thumbSize: 40, // Được sử dụng để xác định kích thước và kết quả trước độ phân giải
fallbackThumb: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgnbh2o9foNoJW8SmFrzw6S5UyP0ZeFyVKvDlafevBvZc3oyEQeDIvuBAW1T65ALG6wlhO3F5R7dVHXAjpEK3skL9FjYary-ppzloMaVEUtSa345XS7mpPKC-VdYdEjBtHvgo-nTRqbcnTB/s45/choiblog.tk.jpg" // Khi bài ko có ảnh
};
//]]>
</script>
<script type="text/javascript" src="http://blogdautocrazy.googlecode.com/files/Timkiem1.js"></script></center>

Để hộp tìm kiếm này vào chỗ phù hợp trên blog

LƯU FILE JS
https://goo.gl/YpjIZk
or
https://drive.google.com/open?id=0B00rsXqNFHZ9TFBxTHlTbVJjaWs
or
http://blogdautocrazy.googlecode.com/files/Timkiem1.js
or
http://www.4shared.com/document/ZfmhKImCce/Timkiem1.html
NGUỒN:
http://kartriderdautocrazy01.blogspot.com/2013/04/search-form-feed-width200px-lebar-kotak.html

Posted by Nặc Danh VIP Chủ Nhật, 24 tháng 8, 2014

0 comments

Đăng nhận xét

_ Khi nhận xét không phải xác minh từ.
_ Bạn nhận xét xong sẽ được quản lý duyệt.
_ Spam link vào nhận xét xem như bạn đã chưa nhận xét !
_ Ghé thăm tôi vào những lúc bạn vui hoặc buồn và khi cần hổ trợ gì đó !
_ Khi bài viết nào có lỗi: xin vui lòng góp ý chân thành! cảm ơn!!!

Nhãn Đám Mây

Software (754) Video (582) Video-Fun (227) Thủ Thuật Blog (211) System tools (184) Hài Kịch (182) Video-Pro (179) Pictures-Fun (161) Tin gì (156) Tin gì ? (154) THỦ THUẬT INTETNET (136) Wallpaper (123) Pictures-Girl Xinh (117) Gift of life (110) Internet Tools (105) Games (75) Template PTS (67) Skin-Gaw2 (66) Giải Trí (65) Others (60) Video-Shock (58) Thủ Thuật Máy Tính (48) Design Tools (46) Music (43) Download Tools (42) CSS ChoiBlogs (41) Anti-Virus (39) Sức Khoẻ (32) Kỹ Năng Sống (30) MultiMedia (28) Video-Tools (28) Cosplay (25) USB Tools (24) Browsers (22) Desktop (22) PDF Tools (22) Phim (22) Rar-Zip-Tool (22) Video-Animals (21) Burning- Convert (19) Thơ và Nhạc (19) Drivers (18) Hoài Linh (18) Media Player (18) Pictures-Pro (18) Rao Bán (18) Registry Tool (18) Thủ Thuật Yahoo (18) Khóa Thư Mục-WebĐen-EXE (15) Virus (15) Add or Remove Programs (14) Thơ (14) Video-SHOW (14) Phong Lee (13) Game-Web (12) Video-Tài Liệu (12) Hide-IP Tools (11) List Xem Nhanh ChoiBlogs (11) Photos -pictures tools (11) Video-Thể Thao (11) Free Licence (10) Office Tools (10) Task Manager Tool (10) Thủ Thuật Facebook (10) Thủ Thuật Photoshop (10) Thủ Thuật Youtube (10) Vietnam's Got Talent (10) WiFi Tools (10) -Cổ tích Việt Nam- (9) DVD-Tools (9) HDD Tool (9) Thủ Thuật Android (Thiết Bị Di Động) (9) Video- Sao Nối Ngôi (9) Video-Bình Tinh (9) Video-Music (9) Video-VÕ HẠ TRÂM (9) Video-Thời Sự (8) Video-Thủ Thuật Đời Sống (8) Defrag tools (7) Flash Tools (7) HTML Tool (7) Hacker Tool (7) MP3 Tools (7) Thuý Nga (7) Từ Khóa Google (7) Icon Tools (6) Kiếm Tiền Online (6) Music-Girl Xinh (6) Tình Yêu (6) Video-Gương Mặt Thân Quen 2016 (6) Chí Tài (5) Game Flash (5) Game Tools (5) Góc nhìn (5) Mobile Tools (5) Nguyen Thi Anh Vien (5) Translate Tools (5) Webcam Tool (5) skin-blog (5) Firewalls (4) Game-mini (4) Screensaver Tools (4) Video-Cờ Cá Ngựa (4) Video-Kim Tử Long (4) Video-Thể Hình (4) Font View (3) Templates (3) Windows 7 (3) Windows Tools (3) Actions PTS (2) Audio tools (2) Editing tools (2) Event-Online (2) Font (2) Game-DOWNLOAD (2) Game-MU Đại Thiên Sứ (2) Ghost WINDOWN (2) Host Free (2) Infographic (2) Keylogger Tools (2) Nghệ Sĩ Minh Béo (2) Nhật Cường (2) PTS Brush (2) PTS Style (2) Sống Đẹp (2) Video-Game (2) Video-Quân Sự (2) Đạo Đời (2) CPU-Tools (1) Camera (1) Camera giao thông (1) Chính Sách Mới - Pháp Luật (1) Coppy Tools (1) Công Nghệ (1) Cảnh Giác (1) Dương Thúy Vi-Wuhsu (1) File Hệ Thống (1) Files Manager (1) Game-Gaw2 (1) Ghost XP (1) Hack Blog (1) Hệ Điều Hành (1) Icon Cảm Xúc (1) Iphone-Tools (1) Khám Phá (1) Music- Pic-Pro (1) PDS PhoToShop (1) Phần Cứng (1) Portable (1) Soft-Test (1) Soft-Việt Hóa (1) Sách Nói (1) TIVI Online (1) Thủ Thuật - Proshow Producer (1) Thủ Thuật Mobile (1) Thủ Thuật-Cốc Cốc (1) Thủ Thuật Di Động (1) Thủ Thuật FireFox (1) Thủ Thuật Phần Cứng (1) Thủ Thuật office (1) Thủ Thuật Điện (1) Thủ Thuật Đời Sống (1) Tin-Bảo Mật (1) Tình Yêu và Cuộc Sống (1) Tiện Ích FireFox (1) Tiện Ích Mouse (1) Tuyển THành Viên (1) Tài Liệu - Biểu Mẫu (1) Tình Yêu Giới Tính (1) Tự Kỷ (1) Video Tools (1) Video-Công Nghệ (1) Video-Cảnh Giác (1) Video-Giao Thông (1) Video-Hướng Dẫn Làm (1) Video-Movie (1) Video-NSƯT Bạch Long (1) Video-Sáng Tạo (1) Video-Thủ Thuật - Proshow Producer (1) Video-Vietnam's Got Talent 2014 (1) Video-Đời Sống (1) Video-Ơn Trời Cậu Đây Rồi (1) Yahoo Chat (1) [Danh Sách] Karaoke MrChoiBlog (Karaoke-Beat-Chuẩn) (1)

Đăng ký nhận bài viết mới

Bài đăng phổ biến

New Commets