If you want you product embedded Google search, you can try to use Google AJAX Search API to do it and customize the look and feel. However, you still need to do a lot work to make it prettier.
Let’s say you want to add “previous page” and “next page” link to the pagination. The weird thing is Google AJAX Search API doesn’t render all the page links as “link”, they just stylize those div and use Javascript to send request. I thought it is almost impossible until later I found the Searcher has method gotoPage(page). This make your life much easier. So the code is like this:
var previousLink = new Element('div', { 'id': 'prev-link', 'class': 'gsc-cursor-page' }).update('« Previous Page');
previousLink.observe('click', function(event) {
this.searcher.gotoPage(this.searcher.cursor.currentPageIndex - 1);
}.bind(this));
This piece of code creates a div using javascript (prototype style) as previous page link, and observe the click event. Call searcher’s gotoPage() method after click previous link and set page cursor minus one. After create this previous page link element, you just need to insert it in the correct position. Then that’s it, it works :D
