Selain melalui halaman pencarian biasa,
Blogger juga mengizinkan kita untuk mengakses posting-posting acak di dalam feed yang dapat disortir berdasarkan kata kunci. Ini bisa dilakukan melalui parameter
q
.
Format dasar URL feed untuk memanggil data posting dengan sortir berdasarkan kata kunci adalah seperti ini:
http://nama_blog.blogspot.com/feeds/posts/summary?q=Kata Kunci
Yang jika diakses akan menghasilkan halaman berisi daftar posting tersortir berdasarkan kata kunci dari parameter
q
seperti ini ⇒
Daftar posting dengan kata kunci ‘css’Dengan memanfaatkan kerangka dasar widget
Blogger, event
onsubmit
pada formulir dan juga penargetan elemen kontainer yang tepat, maka parameter ini memungkinkan kita untuk menciptakan aplikasi
quick search. Yaitu sebuah aplikasi yang bisa digunakan untuk mencari artikel/posting dalam sebuah blog tanpa harus berpindah dari halaman asal. Seluruh hasil penelusuran akan tampil pada tempat yang sama!
Pada prinsipnya, hal pertama yang Saya buat adalah sebuah fungsi yang akan menyisipkan elemen
<script>
secara tidak langsung ke dalam area
<head>
saat fungsi tersebut dieksekusi. JavaScript yang Saya bangun adalah
callback widget
Blogger biasa dengan pola sumber yang umum. Saya hanya menambahkan parameter kata kunci pencarian sebagai penyortir posting yang akan dikirim nantinya:
http://nama_blog.blogspot.com/feeds/posts/summary?alt=json-in-script&q=Kata Kunci&callback=functionName
Nilai parameter sumber diambil dari sebuah elemen
<input>
yang Saya letakkan di dalam formulir. Logikanya seperti ini:
function insertScript() {
var query = document.getElementById('feed-q-input').value,
s = document.createElement('script');
s.type = "text/javascript";
s.src = "http://nama_blog.blogspot.com/feeds/posts/summary?q="+query+"&alt=json-in-script&callback=functionName";
document.getElementsByTagName('head')[0].appendChild(s);
}
<form onsubmit="insertScript();return false;"> ... </form>
Kode aslinya lebih panjang, tapi pada intinya inilah dasar yang Saya gunakan untuk membangun aplikasi pencarian cepat. Anda bisa mengunduh JavaScript dan melihat demonya melalui tombol-tombol ini:
Integrasi Widget ke Blogger
Pertama-tama masuk ke halaman
editor HTML template Anda, kemudian salin kode CSS ini dan letakkan di atas kode
]]></b:skin>
atau
</style>
:
#search-form-feed {
width:200px;
position:relative;
margin:0 0 10px;
padding:0;
font:normal normal 11px/normal Arial,Sans-Serif;
color:#333;
}
#feed-q-input {
display:block;
width:100%;
border:2px solid #bbb;
background-color:white;
padding:5px;
font:normal bold 13px/normal Tahoma,Arial,Sans-Serif;
color:#ccc;
margin: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/normal "Trebuchet MS",Trebuchet,Tahoma,Arial,Sans-Serif;
color:#B50001;
}
#search-result-container ol {
background:transparent;
border:none;
margin:0 0 10px;
padding: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;
}
#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/normal 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;
}
Setelah itu masuk ke halaman
Tata Letak, kemudian tambahkan sebuah elemen halaman
HTML/JavaScript. Salin kode ini dan letakkan di dalam formulirnya:
<div id="search-form-feed">
<form action="/search" onsubmit="return updateScript();">
<input name="q" type="text" placeholder="Telusuri..." id="feed-q-input" onkeyup="resetField();"/>
</form>
<div id="search-result-container"></div>
<div id="search-result-loader">Loading...</div>
</div>
<script>
var searchFormConfig = {
url: "http://nama_blog.blogspot.com",
numPost: 9999,
summaryPost: true,
summaryLength: 400,
resultTitle: "Hasil penelusuran untuk kata kunci",
noResult: "No result",
resultThumbnail: true,
thumbSize: 40,
fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC"
};
</script>
<script src="http://dte-project.googlecode.com/svn/trunk/blogger-quick-search.js"></script>
Klik
Simpan Widget.
Konfigurasi Widget
Semua opsi sangat umum. Saya yakin Anda bisa dengan cepat mempelajarinya:
Opsi | Keterangan |
---|
url | URL blog Anda |
numPost | Jumlah posting yang akan ditampilkan dalam hasil pencarian. Nilai 9999 maksudnya adalah Anda mencoba untuk menampilkan semua posting yang ditemukan |
summaryPost | Pilihan untuk menampilkan atau menyembunyikan ringkasan posting dalam hasil pencarian |
summaryLength | Digunakan untuk menentukan jumlah karakter ringkasan hasil pencarian |
resultTitle | Judul hasil pencarian |
noResult | Peringatan yang menunjukkan bahwa posting tidak ditemukan |
resultThumbnail | Pilihan untuk menampilkan atau menyembunyikan thumbnail posting dalam hasil pencarian |
thumbSize | Digunakan untuk menentukan ukuran dan resolusi thumbnail hasil pencarian |
fallbackThumb | Gambar cadangan untuk posting tak bergambar. |
CSS untuk Tema Minimalis (Layout Dasar)
Digunakan sebagai pengganti kode CSS di atas demi kemudahan dalam hal penyesuaian tema:
#search-form-feed {
width:200px;
position:relative;
margin:0 0 10px;
padding:0;
font:normal normal 11px/normal Arial,Sans-Serif;
color:#333;
}
#feed-q-input {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
display:block;
width:100%;
border:1px solid #bbb;
background-color:white;
padding:5px 5px;
font:inherit;
font-size:13px;
margin:0;
}
#search-result-container {
width:400px;
height:300px;
overflow:auto;
position:absolute;
top:100%;
left:0;
z-index:9999;
border:1px solid #ccc;
padding:10px 10px 0;
margin:10px 0 0;
-webkit-box-shadow:0 3px 5px rgba(0,0,0,.2);
-moz-box-shadow:0 3px 5px rgba(0,0,0,.2);
box-shadow:0 3px 5px rgba(0,0,0,.2);
display:none;
}
#search-result-container mark {
font:inherit;
display:inline;
background-color:#ff0;
color:black;
}
#search-result-container a {
text-decoration:none;
font-weight:bold;
font-size:110%;
display:block;
}
#search-result-container h4 {
margin:0 0 10px;
font:inherit;
font-weight:bold;
color:#B50001;
}
#search-result-container ol {
background:none;
border:none;
margin:0 0 10px;
padding:0;
}
#search-result-container li {
margin:0 0 15px;
list-style:none;
overflow:hidden;
word-wrap:break-word;
padding-left:65px;
}
#search-result-container li img {
display:block;
float:left;
margin:0 0 2px -55px;
border:1px solid #ccc;
padding:2px;
}
#search-result-loader {
position:absolute;
top:100%;
left:5px;
z-index:9999;
margin-top:4px;
font-size:10px;
display:none;
}