Пользовательский (текстовой) поиск Google search API и JavaScript Developer's Guide

Блок кода0

Зашел в Систему пользовательского поиска и получил код для вставки в блог.

Содержание Google Custom Search Element JavaScript Developer's Guide
Introduction
Getting Started
The Basics
Defining Your Search Engine Specifications
Selecting Sites to Search
Changing the Ranking of Your Search Results
Helping Your Users Refine Their Searches Updated!
Improving User Queries For More Relevant Results
Creating Special Results
Designing the Look and Feel
Control Panel
Context File
Making Money
Admin Accounts

В блок ссылок1

В блок ссылок2

Руководство для разработчиков: Google Custom Search APIs and Tools
Руководство для разработчиков: JavaScript Developer's Guide
Главная ссылка Видеоролик

Виджет "Последниее сообщения" Blogger

Как показать анонсы последних постов (где-нибудь) на странице блога? Для этого в Blogger есть виджет, в котором используются возможности движка, а не ява-скрипты, или RSS-фиды. Причем, в настройках виджета можно задать количество показываемых знаков в анонсе. Описания команды data:renderingUrl пока не нашел, как впрочем и большинства команд "data: " Зато нашел изрядное количество кустарных ссылок (из блогов). Вот внизу пример (код скопирован внизу)
...в Blogspote этого можно добиться и без всяких плагинов. А вот пример объяснения похожего скрипта

Сайт стандартов W3C и статьи стилистов о CSS3

Официальный сайт разработчиков, правда нет на нем CSS3, но есть обучение, инструменты, сервисы (софт для разработчиков), новости и, конечно, справочники. Вот официальный валидатор CSS
Вот хорошая подборка на русском языке с действующим кодом. Можно поиграть с настойками в Firebug. Main View – блог о веб дизайне и веб разработке

Примеры из хороших блогов
Возможности броузеров
Кнопки раздвигаются
Create a 3D Cube in Pure CSS3
IE9 Is Here! 7 Cross-Browser CSS
CSS3 transform

Второй блок media Наш халтурщик, но с дизайном

Второй блок code Блог в клеточку Text shadow

......просто текст в самом нижнем текстовом блоке, он поднимается, или нет?

Школа CSS, js, jQuery, PHP, HTML, XML...

java scripts
CSS

Здесь не только учебники, справочники... но и "живые" примеры, которые можно использовать для отладки кода. Слов нет, как удобно. Клик по картинке - и попадешь на jQuery.

Плагины Hover Zoom и Bubble translate для броузера chrome

Идея Hover Zoom стара, как мир. Я его поставил на компьютер в институте, как говорится, между делом, и успешно про него забыл. И вот смотрю мой собственный блог, навожу на картинку курсор, и происходит чудо - картинка увеличивается сама..., а должна "всплывать" по клику...
А я как думал над тем, как размещать всплывающие ссылки-фреймы и картинки на одной странице. Словом, почувствовал себя "немного Ньютоном", с шишкой от яблока на голове.
Bubble translate - надеюсь, что будет показывать не русский (тарабарский) перевод, а оригинал со всплывающими русским переводом.
ссылка

code

code

Нашел описание нового шаблона Blogger в Google Groups

Наконец-то. At every level of the HTML template you will find a common construct of elements that, for lack of a snappy name, I will term the “outer / cap / fauxborder / inner” construct, or OCBI. This set of elements will allow you to consistently apply various styling techniques to particular pieces of the template.

Для чего нужны fauxcolumns

code

Справочник CSS и форумы Styling help for CMS

Помимо генератора (так себе), здесь интересен форум Styling help for CMS, blogs and social network sites such as Drupal, Wordpress, Joomla, Friendster, MySpace...
Кроме того, интересен дизайн кнопок меню и панель социальных сетей...
Есть и руководство для начинающих, причем внимание уделяется и описаниям философии построения CSS таблиц Basic steps to build a site from a design

#primary a {
-moz-border-radius: 0 0 7px 7px;
-webkit-border-radius: 0 0 7px 7px;
border-radius: 0 0 7px 7px;
text-shadow: 1px 1px 1px white;
}
#primary a {
color: #50A4AB;
font-weight: bold;
border: solid 1px #CCC;
background: url(/sites/all/themes/csscr_six/images/buttonslice.png) repeat-x;
margin: 0;
padding: .5em .5em .3em .5em;
line-height: 2em;
text-decoration: none;
}

Шпаргалки для блоггера на русском

В "Шпаргалке для блоггера" есть хорошие посты про форматирование, js скрипты, AJAX загрузка страниц, даже оптимизация. Здесь ссылка на код для скругления углов (клик по картинке)

Закругленные углы CSS 
Kак написать текст на изображении 
Как сделать градиенты на CSS
Как задать CSS тень текста
Как показать виджет на выбранных страницах

Вот еще один хороший блог с переводами
"Data tags for layouts", "Widget Tags for Layouts",
 "Page Elements Tags for Layouts" от izhurnal

А вот генератор кода углов, теней,
градиентов, прозрачности CSS3

Разные шаблоны для разных страниц Blogger (1)

Менять шаблон конечно нельзя. Но можно не показывать отдельные блоки на разных типах страниц. Согласно справочному руководству Blogger (клик по картинке) есть три типа страниц: index, item, arhive. Потом появились еще static_page статичные страницы (на сегодня их можно добавлять до 10 штук). И, наконец, вот оно - счастье, можно использовать условие по URL, оно подойдет и для конкретных статичных страниц, и для страниц по меткам... (надо, кстати, попробовать,  как работают страницы с URL, содержащими "? ")
Не следует забывать, что помимо условия "==" есть еще "=!"..., посмотреть примеры использования условий "b:if" можно в любом (собственном) штатном шаблоне Blogger. 

Вот пример c CSS...,  боковая панель загружается
 в броузер и не отображается. Не лучший вариант...
<b:if cond='data:blog.pageType == quot;static_page quot;'>
<style type="text/css">
#sidebar-wrapper{display:none;}
.post {width:680px;}
</style>
</b:if >

<b:if cond='data:blog.pageType ==quot;static_pagequot;>
Static Pages
</ b: if>

<b:if cond='data:blog.url == 'Specific_Post_Url>
This will appear on the page specific posts
</ b: if>

Осталось только выяснить, перед какими тегами "div" нужно всатвлять условия "b:if", но этот вопрос не кажется сложным..., потому пвернемся к нему позже. А вот вопрос о том, как задавать условие для страниц с ярлыками остается открытым, здесь не него пытались ответить, но не получилось. А вот здесь автор подал идею, как использовать URL адрес метки, вот фрагменты кода с не очень понятными тегами...

Условное форматирование изображений в Blogger

......
.h40 {
height: 40px;
} 
]]></b:skin>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
.h40 {
height: 150px;
} </style>
</b:if>

На главной странице картинка поста не должна быть большой, а вот на отдельной странице ее можно развернуть во всю ширь, вернее "высь". Для этого можно задать несколько новых классов, допустим h0 h40 h200 h400 и переприсвоить их в шаблоне Blogger в зависимости от вида страницы. Если присваивать изображению сразу два класса (клик по картинке), то можно менять не только размер, но и выравнивание, например... вот вставка в шаблон ("мой" одна колонка) дополнительного класса .h40 и условия b:if  
Поскольку оболочка b:skin может быть только одна, то приходится после нее вставлять тег таблицы стилей и переопределять класс. Название класса, кстати, должно начинаться с буквы..., и все надо бы включать в CDATA...

А вот (не очень удачный) пример использования условий в шаблоне блоггер.
Они интересуют нас только как шаблоны кода, поскольку
Blogger с тех пор внедрил сплиттер "Read more".
Как создавать расширяемые краткие описания сообщений?Условные CSS

SDKs & Tools › Tools from Facebook

Building an app on Facebook gives you the opportunity to deeply integrate into the core Facebook experience. Your app can integrate with many aspects of Facebook.com, including the News Feed and Notifications. All of the core Facebook Platform technologies, such as Social Plugins, the Graph API and Platform Dialogs are available to Apps on Facebook.com
Getting Started › Apps on Facebook

Getting stock information with YQL and open data tables

One question that the YQL and Pipes teams get asked is “how can I get stock quotes? There isn’t an API for it on developer.yahoo.com”. Interestingly, while there isn’t a more traditional web service API, Yahoo finance does provide a very nice way to get a lot of well structured information on a given company. For example, here’s Yahoo finance page on Yahoo

Here's a neat way to download stock data from Yahoo
Yahoo finance page on Yahoo
Console

Yahoo! Query Language (YQL) platform

Console
Screencasts
YPipes > Create RSS
YQL Tutorials and Code Examples

The Yahoo! Query Language (YQL) platform enables developers to query, filter, and combine data across the web.
The YQL Web Service enables applications to query, filter, and combine data from different sources across the Internet. Overview

Делаем подкасты - формат iTunes

Это не пошаговая инструкция "на какие кнопки нажимать". Это подробное описание тегов XML- файла от ITunes. В руководстве написано, что для создания подкастов можно использовать большое количество программ. Однако, на полях стоят ссылки на описание программы
GarageBand — это полноценная виртуальная музыкальная студия, позволяющая создавать собственную музыку и делиться своими творениями со всем миром. В GarageBand можно создавать песни, рингтоны, подкасты и другие типы проектов. Справка GarageBand

Как добавить регулировку цветов (фона, границы, шрифта) в дизайнер шаблонов Blogger

При вставке js меню Sooperfish в "родной" шаблон Блоггера ("Простой", если не путаю) захотелось настроит автоматический подбор цветов (такой же, как и для виджетов). Заодно дошли, наконец, руки до того, чтобы разобраться с тем, как использовать   переменные Blogger для CSS-стилей. Внизу результаты работы. В видео ролике подробности.

<Group description="SfTitle" selector="ul#nav li a ">
<Variable name="SF.text.font" description="Font" type="font"
default="normal bold 16px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 16px Georgia, Utopia, 'Palatino Linotype', Palatino, serif"/>
<Variable name="SF.text.color" description="Text Color" type="color" default="$(body.text.color)" value="$(link.color)"/>
</Group>
<Group description="SFishMain" selector="ul#nav li">
<Variable name="SFishM.background.color" description="Background Color" type="color" default="$(widget.background.color)" value="$(widget.background.color)"/>
<Variable name="SFishM.border.color" description="Border Color" type="color" default="$(widget.border.color)" value="$(widget.border.color)"/>
<Variable name="SFishM.border.bevel.color" description="Bevel Color" type="color" default="$(widget.border.bevel.color)" value="$(widget.border.bevel.color)"/>
</Group>

Меню и слайдер от designchemical.com

Горизонтальное, вертикальное меню с раскрывающимися областями ссылок. Предполагаю использзовать на отдельных страницах навигации ("карта сайта"). Кроме того, есть еще "слайсеры" - выезжающие сбоку и снизу окна. Весит все немного...
Папка на сервисе"Народ Яндекс"

Как убрать "Read more" из шаблона SE1 (одна колонка)

Попытался найти "Read more" при помощи обычного поиска на странице в Сomodo Dragon (клона Google Chrome). Не тут то было, даже при поиске в расширенном шаблоне броузер ничего не "увидел". Чудеса! Пришлось искать по "showlink" (воспользовавшись FireBug).
Сначала просто закомментировал весь тег "span", опять промашка... на странице исчезли иконки "Share this". Надо было "Read more" вычистить, а тег  оставить...

<span id='showlink'><a expr:href='data:post.url'/>Read more</span>
<span id='showlink'><a expr:href='data:post.url'/></span>

Особенности загрузки внешних скриптов

Внешние скрипты запоминаются в кэше броузера пользователя. Повторная загрузка ускоряется. Но если скрипты грузятся с одного хостинга, то это лишние HTTP заголовки, дополнительная нагрузка Apache (RU-Center), ограничения или блокировка загрузки остальных элементов страницы... Словом, не все так просто.
Неблокирующая загрузка JavaScript
Google Libraries API - Developer's Guide
Google Code Playground

JQuery библиотеку можно забирать из сети Microsoft, jQuery.com  подробности здесь:  Особенности Google CDN и Yandex обсуждаются на Хабрахаре

 Ссылки на Google CDN Microsoft CDN
Блог Yandex о хостинге js библиотек

API gadgets Hello, world!

Пост на русском, Объяснение основных тегов xml модулей для гаджетов. Module, CDATA,Content. Оглавление руководства разработчика gadgets слева в меню.

Настройка стилей для меню Sooperfich

Все хаки в шаблон "Корпорация чудеса"
Файл шаблона Blogger со скриптами Sooperfish

Google API

Надоело искать примеры Google API. Вот ссылка на список ссылок для API сервисов.

А вот объектная модель, справочник GData JavaScript Client 2.2
Главная страничка API Google finance Google Finance APIs and Tools
Интерактивные примеры API Google finance Google Finance Developer's Guide: JavaScript

Как показать ярлыки поста на главной странице

Открываем в броузере страницу редактирования шаблога с опцией full HTML.
Задаем поиск по словосочетанию "post-labels".
Комментируем элементы кода:

<!--Show on main page ////////////////////////////////-->
<!--b:if cond='data:blog.pageType == &quot;item&quot;'-->
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span><!--/b:if-->
<!--Show on main page ////////////////////////////////-->

Скрипты jscript в Blogger

Когда-то в Googl был сервис старый сервис сайтов, где можно было хранить файлы. Теперь это сервис сайтов, с редактором скриптов, но скрипты надо писать самим. Либо ваять гаджеты и вставлять их на страницы...
Года два я ипользовал службу "народные сайты Яндекса". Но вчера обнаружил, что скрипты оттуда уже не грузятся на внешние сайты.
Что делать? Пока пробую бесплатный хостинг www.ripway.com Нашел я его по ссылке сBlogger Templates
В комментариях к этому посту в Blogger Templatesесть еще с десяток ссылок

А вот как правильно вставлять скрипты в код заголовка страницы:
<script type='text/javascript'>
//<![CDATA[
PASTE THE JAVASCRIPT CODE HERE
//]]>
</script>

Получасовое видео о сниппетах SpiderMonkey

During this session, we'll show you how they work from 10,000 feet and give you the tricks to compile all the popular engines out there including JavaScriptCore, V8, and SpiderMonkey). We'll inspect the internals of the engine, and debug+profile your favorite code snippets. Armed with just a little extra knowledge about this black box, you will be ready to take a new look at JavaScript apps.

code

code

Подбор теней и ракраска блока с CSS3 PIE

Поэкспериментировать и настроить границы блока, тень от блока, градиент двух цветов с ColorPicker

WebBrain Services let you put your Brain in the cloud

ссылка

code

code

jQuery для меню моих блогов

Надеюсь, что нашел решение для меню моих блогов. Когда их десятки, то есть смысл сделать страничку с универсальным меню для этого надо попробовать вот этот jQuery плагин
iHwy jQuery ListMenu Plugin Demos

Если кликнуть по картинке, то откроется блог с прекрасной подборкой jQuery плагинов, где есть почти все. Навигация значительно проще, чем по сайту jQuery

Блок "Вам может быть интересео" в футере поста

В Блоггере я в очередной раз увидел ссылки на "похожие посты" да еще с картинками. Оказывается, есть готовый сервис с возможностью настройки гаджета под несколько "движков", в т.ч. и Blogger

Скрипты JS для графов

Поиски вариантов MindManager завели меня сначала на страницу Википедии, а потом к разработчикам jscript... (клик по картинке), а здесь "демо"перетаскиваемые элементы jsplumb.org/jquery/demo Там есть ссылка на оригинальный поиск по Твиттеру TweetPlumb

Два способа показа плейлистов YouTube c TopUp

<a class="tu_iframe_658x514" href="http://www.youtube.com/p/8E2C31534A35768A&amp;hl=nl&amp;fs=1&amp;rel=0&amp;hd=1&amp;autoplay=0" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" toptions="x=10"><img height="160" src="http://soft-portable.ru/wp-content/uploads/2010/08/youtube_2-300x241.jpg" width="200" /></a>

Настройки показа плейлистов YouTube для TopUp можно делать двумя способами. И через фреймы и через topoptions в теге ссылки. Все работает! Вот только с подбором размеров... окна, вроде бы, лучше использовать tu_iframe_658x514..., хотя..., не факт. Надо еще поэкспериментировать.

Вот, как это работает для варианта с toptions (код внизу)

<a href="http://www.youtube.com/p/8E2C31534A35768A&amp;hl=nl&amp;fs=1&amp;rel=0&amp;hd=1&amp;autoplay=1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;" toptions="width = 670, height = 510,x=10,layout=flatlook, resizable=1, type = flash, title = Blogger - Настройки"><img alt="Youtube" height="160" src="http://soft-portable.ru/wp-content/uploads/2010/08/youtube_2-300x241.jpg" width="200" /></a>

Как редактировать PDF без акробата.

Подробный обзор с рекомендациями и видеороликом.
Like Inkscape, the OpenOffice toolbox also includes support for annotations, shapes, images, tables, charts, etc. but here you have more choices and the software also looks less complex....OpenOffice is the best tool for manipulating PDF documents when you don’t have the budget for Adobe Acrobat

Скачать расширение с OpenOffice