Selain melalui halaman pencarian biasa, Blogger juga mengizinkan kita untuk mengakses posting-posting acak di dalam feed yang sanggup disortir menurut kata kunci. Ini sanggup dilakukan melalui parameter q.
Format dasar URL feed untuk memanggil data posting dengan sortir menurut kata kunci ialah ibarat ini:
http://nama_blog.blogspot.com/feeds/posts/summary?q=Kata KunciYang jikalau diakses akan menghasilkan halaman berisi daftar posting tersortir menurut kata kunci dari parameter q ibarat 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 membuat aplikasi quick search. Yaitu sebuah aplikasi yang sanggup dipakai untuk mencari artikel/posting dalam sebuah blog tanpa harus berpindah dari halaman asal. Seluruh hasil penelusuran akan tampil pada daerah yang sama!
Pada prinsipnya, hal pertama yang Saya buat ialah sebuah fungsi yang akan menyisipkan elemen <script> secara tidak eksklusif ke dalam area <head> dikala fungsi tersebut dieksekusi. JavaScript yang Saya berdiri ialah callback widget Blogger biasa dengan teladan 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=functionNameNilai parameter sumber diambil dari sebuah elemen <input> yang Saya letakkan di dalam formulir. Logikanya ibarat ini:
function insertScript() { // Membangun elemen <script> untuk disisipkan ke dalam area <head> ... // ... dengan parameter kueri yang ditentukan oleh nilai elemen 'feed-q-input' var query = document.getElementById('feed-q-input').value, s = document.createElement('script'); s.type = "text/javascript"; s.src = "//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 pada dasarnya inilah dasar yang Saya gunakan untuk membangun aplikasi pencarian cepat. Anda sanggup mengunduh JavaScript dan melihat demonya melalui tombol-tombol ini:
Integrasi Widget ke Blogger
Pertama-tama masuk ke halaman editor HTML template Anda, kemudian salin arahan CSS ini dan letakkan di atas arahan ]]></b:skin> atau </style>:
#search-form-feed { width:200px; /* lebar kotak penelusuran */ 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 arahan 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> //<![CDATA[ var searchFormConfig = { url: "http://nama_blog.blogspot.com", // URL Blog numPost: 9999, // Jumlah maksimal temuan summaryPost: true, // `true` jikalau ingin menampilkan deskripsi posting summaryLength: 400, // Jumlah huruf ringkasan posting resultTitle: "Hasil penelusuran untuk kata kunci", // Judul hasil pencarian noResult: "No result", // Deskripsi `tak ditemukan` resultThumbnail: true, // `true` untuk menampilkan thumbnail posting thumbSize: 40, // Ukuran & resolusi thumbnail fallbackThumb: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAA3NCSVQICAjb4U/gAAAADElEQVQImWOor68HAAL+AX7vOF2TAAAAAElFTkSuQmCC" // Fallback thumbnail untuk posting tak bergambar }; //]]> </script> <script src="//cdn.rawgit.com/tovic/dte-project/2fd2d2971c3398029ea5e149696447243e7f4d94/blogger-quick-search.js"></script>Klik Simpan Widget.
Konfigurasi Widget
Semua opsi sangat umum. Saya yakin Anda sanggup dengan cepat mempelajarinya:
| Opsi | Keterangan |
|---|---|
| url | URL blog Anda |
| numPost | Jumlah posting yang akan ditampilkan dalam hasil pencarian. Nilai 9999 maksudnya ialah Anda mencoba untuk menampilkan semua posting yang ditemukan |
| summaryPost | Pilihan untuk menampilkan atau menyembunyikan ringkasan posting dalam hasil pencarian |
| summaryLength | Digunakan untuk memilih jumlah huruf ringkasan hasil pencarian |
| resultTitle | Judul hasil pencarian |
| noResult | Peringatan yang menawarkan bahwa posting tidak ditemukan |
| resultThumbnail | Pilihan untuk menampilkan atau menyembunyikan thumbnail posting dalam hasil pencarian |
| thumbSize | Digunakan untuk memilih ukuran dan resolusi thumbnail hasil pencarian |
| fallbackThumb | Gambar cadangan untuk posting tak bergambar. |
CSS untuk Tema Minimalis (Layout Dasar)
Digunakan sebagai pengganti arahan CSS di atas demi akomodasi dalam hal pembiasaan tema:
#search-form-feed { width:200px; /* lebar kotak penelusuran */ 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; /* ganti menjadi `right:0` untuk mendorong kontainer ke kanan */ 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; }