(If you want this on your blog, please read this post for instructions.)
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script>
<script src="http://lilbtn.yjl.im/js/jquery/jquery.autocomplete.pack.js"></script>
<script>
function load_labels(callback) {
$('#search-labels-box-loader').hide();
$.getJSON("http://www.blogger.com/feeds/" + PROFILE_ID + "/blogs/" + BLOG_ID + "?alt=json-in-script&callback=?", function(data){
if (!data || !data.entry || !data.entry.category)
return;
window.LABELS = [];
var LABELS = window.LABELS;
for (var idx in data.entry.category) {
LABELS.push(data.entry.category[idx].term);
}
LABELS.sort();
var $ddl = $('#labels-ddl');
for (var idx in LABELS) {
$('').text(LABELS[idx]).val(LABELS[idx]).appendTo($ddl);
}
$('#search-labels-box').slideDown('fast');
// set up autocomplete
$('#labels-search-box').autocomplete(LABELS, {multiple: true});
if (callback)
callback();
});
}
function list_labels() {
var $labels = $('
- ').appendTo(
- ')
.append(
$('')
.text(label)
.attr('href', '#')
.attr('label', label)
.click(function(){list_posts($(this).attr('label'))})
)
.appendTo($labels);
}
}
function list_posts(slabels, query, show_all) {
var
$container = $ ('#blogger-labels-result'); if (query) { var query_url = query + '&alt=json-in-script&callback=?'; } else { var _labels = slabels.split(','); var labels = []; for (var idx in _labels) { if (_labels[idx].trim()) labels.push(encodeURIComponent(_labels[idx].trim())); } var MAX_RESULTS = parseInt($('#max_results').val()); // If it's 0, then set to 500 if (!MAX_RESULTS) { MAX_RESULTS = 500; show_all = true; $container.empty(); } var labels_part = labels.join('/'); if (labels_part) labels_part = '/-/' + labels_part; var query_url = "http://www.blogger.com/feeds/" + BLOG_ID + "/posts/summary" + labels_part + "?alt=json-in-script&callback=?&orderby=" + $('#orderby').val() + '&max-results=' + MAX_RESULTS; } if (!show_all) $container.empty(); var $posts = $container.children('ul'); if ($posts.length == 0) {$posts = $ ('- ');
$container.append(
- ')
.append(
$('')
.text(entry.title.$t)
.attr('href', link)
)
.append(
$('')
.addClass(summary_class)
.text(' - ' + entry.summary.$t)
)
.append(
$('')
.addClass(timestamp_class)
.text(' - ' + new Date(entry.published.$t))
)
.appendTo($posts);
}
// Check if there are next or prev links
var prev = '';
var next = '';
for (var idx in data.feed.link) {
var l = data.feed.link[idx];
if (l.rel == 'previous')
// Blogger API repeat labels, that causes problem
prev = l.href.replace(/-\/[^-]+/, '');
if (l.rel == 'next')
next = l.href.replace(/-\/[^-]+/, '');
}
if (show_all) {
if (next) {
list_posts(undefined, next, true)
}
else {
// Finish showing all posts
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
$container.append(total_results + ' post' + (total_results==1?'':'s'));
}
}
else {
if (prev)
$container.append($('').html('« Previous').attr('href', '#').click(function(){list_posts(undefined, prev)}));
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
var start_index = parseInt(data.feed.openSearch$startIndex.$t);
var items_per_page = parseInt(data.feed.openSearch$itemsPerPage.$t);
var end_index = start_index + items_per_page - 1;
if (end_index > total_results)
end_index = total_results;
$container.append(' ' + start_index + '-' + end_index + ' of ' + total_results + ' post' + (total_results==1?'':'s') + ' ');
if (next)
$container.append($('').html('Next »').attr('href', '#').click(function(){list_posts(undefined, next)}));
}
});
}
function show_summary_change() {
if (
$('#show_summary').attr('checked')) $ ('#blogger-labels-result .summary').removeClass('hidden'); else $('#blogger-labels-result .summary').addClass('hidden'); } function show_timestamp_change() { if ($('#show_timestamp').attr('checked'))$('#blogger-labels-result .timestamp').removeClass('hidden'); else $ ('#blogger-labels-result .timestamp').addClass('hidden'); } function append_to_search_box(label) { if (!window.LABELS) { load_labels(function(){append_to_search_box(label)}); return; } var$input = $ ('#labels-search-box'); if ($input.val()) { if (/.*, *$ /.test($input.val())) $input.val($input.val() + ' ' + label); else $input.val($input.val() + ', ' + label); } else $input.val(label); } function sort_alphabet() { var$ul = $ ('- ');
- ')
.append(
$('')
.text(label)
.attr('href', '#')
.attr('label', label)
.click(function(){list_posts($(this).attr('label'))})
)
.append(' ')
.append(
$('')
.html('↓')
.attr('href', '#')
.attr('label', label)
.click(function(){append_to_search_box($(this).attr('label'));return false;})
)
.appendTo(
$cat_ul); } $ (' - ')
.text(cat)
.append($cat_ul)
.appendTo($predefined_labels_ul);
}
});
</script>
<style>
@import url("http://lilbtn.yjl.im/css/jquery.autocomplete.css");
#blogger-labels-container {
color: #222;
}
#predefined-labels {
background-color: #eef;
border-radius: 1ex;
padding: 1ex;
}
#search-options {
background-color: #efe;
border-radius: 1ex;
padding: 1ex;
}
#search-box {
background-color: #fee;
border-radius: 1ex;
padding: 1ex;
}
#blogger-labels-result {
background-color: #ffe;
border-radius: 1ex;
padding: 1ex;
}
#blogger-labels-result .hidden {
display: none;
}
</style>
<script> /* You should be able to get the following IDs from Blogger Dashboard PROFILE_ID can be found in View Profile url BLOG_ID can be found in links of a blog, e.g. NEW POST, Edit Posts, Comments, etc. */ var PROFILE_ID = '02968836669016971463'; var BLOG_ID = '3803541356848955053'; // Be careful when adding commas if you don't know about JavaScript. var PREDEFINED_LABELS = [ ['Programming', ['JavaScript', 'jQuery', 'Python', 'Google App Engine']], // ^ This one is a label // ^ they are labels ^^ no commas ['Shell Scripting', ['Bash', 'awk']], ['Linux', ['Gentoo']], // ^ need comma ['Blogging', ['Blogger']] // ^ no comma ]; </script>Click on the following label to list posts labeled with the label or click on down arrow to bring them into search box:
Show summary • Show timestamp • Show posts per pageSort by Published timeLast updated time or after posts listed below.
(Separate by commas)
$('#blogger-labels-result ul li').sort(function(a,b){a=$ (a).text();b=$(b).text();return a > b ? 1 : (a == b ? 0 : -1)}).appendTo($ul); $ ('#blogger-labels-result ul').replaceWith($ul); } $ (function() { $('#search-labels-box').hide(); var$container = $ ('#blogger-labels-container'); var$predefined_labels = $ ('#predefined-labels'); var$predefined_labels_ul = $ ('- ').appendTo($predefined_labels);
// List predefined labels
for (var idx_cat in PREDEFINED_LABELS) {
var cat = PREDEFINED_LABELS[idx_cat][0];
var cat_lbls = PREDEFINED_LABELS[idx_cat][1];
var
$cat_ul = $ ('- ');
for (var idx_lbl in cat_lbls) {
var label = cat_lbls[idx_lbl];
$('
- ')
.append(
$('')
.text(label)
.attr('href', '#')
.attr('label', label)
.click(function(){list_posts($(this).attr('label'))})
)
.append(' ')
.append(
$('')
.html('↓')
.attr('href', '#')
.attr('label', label)
.click(function(){append_to_search_box($(this).attr('label'));return false;})
)
.appendTo(
$posts); } $ .getJSON(query_url, function(data) { if (!data.feed.entry) { $posts.replaceWith($('').text('No posts found.')); return; } var summary_class =$('#show_summary').attr('checked') ? 'summary' : 'summary hidden'; var timestamp_class = $ ('#show_timestamp').attr('checked') ? 'timestamp' : 'timestamp hidden'; for (var entry_idx in data.feed.entry) { var entry = data.feed.entry[entry_idx]; var link = ""; // Find the url of this post for (var idx in entry.link) { var l = entry.link[idx]; if (l.rel == 'alternate') { link = l.href; break; } } var$li = $ (' - ')
.append(
$('')
.text(entry.title.$t)
.attr('href', link)
)
.append(
$('')
.addClass(summary_class)
.text(' - ' + entry.summary.$t)
)
.append(
$('')
.addClass(timestamp_class)
.text(' - ' + new Date(entry.published.$t))
)
.appendTo($posts);
}
// Check if there are next or prev links
var prev = '';
var next = '';
for (var idx in data.feed.link) {
var l = data.feed.link[idx];
if (l.rel == 'previous')
// Blogger API repeat labels, that causes problem
prev = l.href.replace(/-\/[^-]+/, '');
if (l.rel == 'next')
next = l.href.replace(/-\/[^-]+/, '');
}
if (show_all) {
if (next) {
list_posts(undefined, next, true)
}
else {
// Finish showing all posts
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
$container.append(total_results + ' post' + (total_results==1?'':'s'));
}
}
else {
if (prev)
$container.append($('').html('« Previous').attr('href', '#').click(function(){list_posts(undefined, prev)}));
var total_results = parseInt(data.feed.openSearch$totalResults.$t);
var start_index = parseInt(data.feed.openSearch$startIndex.$t);
var items_per_page = parseInt(data.feed.openSearch$itemsPerPage.$t);
var end_index = start_index + items_per_page - 1;
if (end_index > total_results)
end_index = total_results;
$container.append(' ' + start_index + '-' + end_index + ' of ' + total_results + ' post' + (total_results==1?'':'s') + ' ');
if (next)
$container.append($('').html('Next »').attr('href', '#').click(function(){list_posts(undefined, next)}));
}
});
}
function show_summary_change() {
if (