Создание спрайтов в Blogger

Спрайт - это изображение (файл изображения), в которое объединили несколько других, в целях сокращения запросов к веб-серверу и уменьшения общего веса изображений и спозиционировали при помощи сss. То есть клиент (пользователь), при заходе на сайт, браузером выкачивает одно фоновое изображение вместо того, чтобы скачивать каждое по отдельности. Такая уловка используется там, где нужно собрать очень много мелких файлов.
В настройках стилей указываются координаты каждой картинки, составляющей такой спрайт.

Пример:

Это одна картинка, в которой объединены все из коллекции "офис".

Пример css кода.

Правила для каждого из изображений (по названию файлов):

.sprite-Marker{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: 0 0; width: 90px; height: 90px; } 
.sprite-Notebook{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -140px 0; width: 90px; height: 90px; } 
.sprite-ParcelTape{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -280px 0; width: 90px; height: 90px; } 
.sprite-PencilSharpener{ background-position: -420px 0; width: 90px; height: 90px; } 
.sprite-Scissors{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -560px 0; width: 90px; height: 90px; } 
.sprite-TapeMeasure{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhOgLKttNL2Bmh5C_UwRKlfttqVQXxSkBvpDTRbhW71uPoHl7o-pMQlHknvkKWsd1GN6F19Xq9MwQnYLgR8HkVGtlYlfDgTVBvMqSXzHLEN8bQaQhrmacrgQnIY7_RVzHYNxRcxiteQ6Y/s1600/csg-4e95e673302ed.png) no-repeat top left; background-position: -700px 0; width: 90px; height: 90px; }

Их можете прописать в часть шаблона, отвечающую за css или между тегами <style></style> на страницу или в html виджет/гаджет блоггера.

После создания этих стилей, любую иконку из полоски можно вставить в пост, например, блочным элементом ↓

<div class="sprite-TapeMeasure"></div>

Или ссылкой через тег а:

<a href="http://blogger.omg-linux.ru"><div class="sprite-TapeMeasure">
</div></a>

... в любое место ↓

+

= ?

Как сделать такие ссылки, можете подсмотреть в редакторе блоггера, в html режиме, не забудьте добавить нужный класс.

А в создании спрайта вам поможет замечательный сервис ru.spritegen.website-performance.org, генерирующий спрайты.
Просто закачиваете архив с изображениями, крутите настройки, на выходе получается довольно точный результат.

Верхняя рулетка является ссылкой.
зы: Кстати, летающая птичка твиттера сделана при помощи спрайта.