Форматирование в blogger

Здесь попытаюсь собрать понравившиеся мне элементы форматирования.

Таблицы.

Чтобы таблица отображалась правильно, в html коде нужно убрать все элементы форматирования (переводы строк и пробелы)

HDD	WD Caviar 3.1Gb	85$
	Quantum FB ST 6.4Gb	110$

Текст кода приведенной выше таблицы:

<table border="1">
  <tbody>
  <tr>
    <th rowspan="2">HDD</th>
    <td>WD Caviar 3.1Gb</td>
    <td align="right">85$</td>
  </tr>
  <tr>
    <td bgcolor="#ccffff">Quantum FB ST 6.4Gb</td>
    <td align="right">110$</td>
  </tr></tbody>
</table>

r1c1	r1c2
r2c1	r2c2

<table border="1">
<tbody>
  <tr>
    <td valign="top">r1c1</td>
    <td valign="top">r1c2</td>
  </tr>
    <tr><td valign="top">r2c1</td>
    <td valign="top">r2c2</td>
  </tr>
</tbody></table>

Title	Format
r1c1	r1c2
r2c1	r2c2
r3c1	r3c2
r4c1	r4c2
Итого	50 000.00

<table class="table">
  <thead><tr><th>Title</th><th>Format</th></tr></thead> 
  <tbody>
    <tr class="odd"><td valign="top">r1c1</td><td valign="top">r1c2</td></tr>
    <tr class="even"><td valign="top">r2c1</td><td valign="top">r2c2</td></tr>
    <tr class="odd"><td valign="top">r3c1</td><td valign="top">r3c2</td></tr>
    <tr class="even"><td valign="top">r4c1</td><td valign="top">r4c2</td></tr>
  </tbody> 
  <tfoot><tr><td>Итого</td><td>50 000.00</td></tr></tfoot> 
</table>

Выделение блока кода

<pre class="brush: cpp; toolbar: true;" >
#include <stdio.h>
int main()
{
  printf ("Hello Popcorn!\nThis cool!\n");
  return 0;
}
</pre>

Оформление ссылок:

Подзаголовок ссылка1 ссылка2

<table border="0">
  <tbody>
    <tr>
      <td valign="top"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vWbwZ84iH5fS9nfWMqtNqk4_FAVsiG4wb2yJPOt2K0G5ahg1yFxVC1uxaffJxJyaPSjxNhw1imlDz5jXYzED_UcTwNyZat0x1GgRYjGWMmkugBGcyY4SGygtp7ULEAv_Uescf7Bfaoaw/s320/notification-network-wireless.png" style="float: left; height: 32px; margin: 0pt 10px 10px 0pt; width: 32px;" /></td>
      <td valign="top">
        <ul><h4>Подзаголовок</h4>
          <li><a href="http://www.ru">ссылка1</a></li>
          <li><a href="http://www.ru">ссылка2</a></li>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

Разделитель в виде тонкой горизонтально черты:

---

<hr size="1" width="90%" align="center" color="gray">

Иконки

<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEheJltH1YdV0DN7317oK46GUFwb6v7l2fV5KbjTgk2sytiwhu2kHiaEfZhQNtxLG2V7X3YK9fmao04en5exbeUAds02yWo4z8Lz9hp8Ca5PK7JhVEy_Syhw1zBDX3bLgadbQfD28VLXoZeh/s320/stock_contact.png" border="0" />

<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiVO6PRjSQyMolZNNIsFRnZgcUQxNElgCx-sfMLBqLphBRPmMCKb9JVowXSPQInAbfWbOnEV4QhjkoH5mZm9YDXcgnxkEToKnl7ZI8_McvU2bLMQbu9W_SQIg8RXJK-Wbxj9VhGYs73dyRq/s320/mail-attachment.png" border="0" />

<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSSIsGVapOakKfONkPhjp32r8gXQlE_o-PIzWh7kjIrZ_7cqXq9OXQ39pLM86GzH7zVT9zrYuoek4aBqU561K6VuUr0aUTrMzXJSae83n4owNWMaBanRrN0ai0TadLCTpoGCV24eRDQnuc/s320/error.png" border="0"  />

<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuu7Uqr37Lw2YJgA24qOxn80N8zrBrw9K833Gz9cCpcUZoseyZZilTXmj-xPxmYZGvNcOYR_Ngt-iA8JXOEiY8NK8eQNq0ODR5YkRcVCekP_AX3F67ybvrSDTuKpdVn12qwWI5zTB1Gayj/s320/dialog-warning.png" border="0" />

<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0MavLHAbupNHrvuTQgX7wbonPU-U7BM2yv7VYgIl_12V54DAQuztYNjs2e5dOJ0jlkc3KVX2F0ZYdDJUQ3xuCOKUZ7a4ZQpdO4aQPsFN5dlEnhZKQLo3PIKfSHCOsa4aYNLoJ_mL8fQ67/s320/dialog-question.png" border="0" />

<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1vWbwZ84iH5fS9nfWMqtNqk4_FAVsiG4wb2yJPOt2K0G5ahg1yFxVC1uxaffJxJyaPSjxNhw1imlDz5jXYzED_UcTwNyZat0x1GgRYjGWMmkugBGcyY4SGygtp7ULEAv_Uescf7Bfaoaw/s320/notification-network-wireless.png" border="0" />

<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3UdGPAAg-HouJGZneq41hHhuo5tLNj-P6fxO7OPm0gKG6QUfpfdaa_kdFs_OdiLBcMtSjum608QfgTNC3T1lZ6swg07_rrbv57TP58TUQkUl2pd-pIZf7HFGL_420CnBzmPIXm7uWl3Oq/" border="0" />

Изображение

<img style="float:center; width: 210px; height: 210px;" src="http://www.via.com.tw/en/images/products/mainboards/mini_itx/epia_m2/epia_m2.jpg" />

Облако тегов

http://www.bloggerbuster.com/2008/08/blogumus-flash-animated-label-cloud-for.html

Автоперевод

http://blogger-toolkit.blogspot.com/2007/11/add-translate-buttons-to-your-blog.html

Изображение клавиши в тексте: Fn

Изменить шаблон. После описания

body {.........}

добавить

kbd {color: #940f04;background:#EEEEEE none repeat scroll 0 0;border-color:#CCCCCC #AAAAAA #888888 #BBBBBB;border-style:solid;border-width:1px 2px 3px 2px;color:#000000;padding: 1px 2px;white-space:nowrap;margin: -7px 2px;}

В заметке для изображения клавиши вставить теги

<kbd>Fn</kbd>

Ссылка на форум

<div class="separator" style="clear: both; text-align: center;"><a href="http://antisclerosis.forumup.com/" imageanchor="1" target="_blank" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizarhlu9d4D1UIX6Hya1wRd8PeZyVDtxoaMlmo4BBtaw79nIfnMXBFdJD2FQcYc5qsFNYwUX-OjEucdP4k2AvXj7wjQPrzUo5MZTnXnXBpa0d4Iy2743scdD6_ZAXQQUfsizMj4eNK5Dv5/" /></a></div><div class="separator" style="clear: both; text-align: left;"></div>

Всплывающие картинки

Перед <b:skin><![CDATA[/* вставить следующий код:

<script src='http://oryctolagus89.fileave.com/highslide-full.js' type='text/javascript'/><link href='http://oryctolagus89.fileave.com/highslide.css' rel='stylesheet' type='text/css'/><!--[if lt IE 7]> <link rel="stylesheet" type="text/css" href="http://ezany99.fileave.com/highslide-ie6.css" /> <![endif]--><script type='text/javascript'>//<![CDATA[hs.graphicsDir = 'http://oryctolagus89.fileave.com/graphics/';hs.wrapperClassName = 'borderless';hs.allowSizeReduction = false;hs.showCredits = false;hs.registerOverlay({ html: '<div class="closebutton" onclick="return hs.close(this)" title="Close"></div>', position: 'top right', fade: 2 });hs.isUnobtrusiveAnchor = function(el) { if (el.href && /\.jpg$/.test(el.href)) {  el.className = 'highslide';  return 'image'; }}//]]></script><script type='text/javascript'>//<![CDATA[function fixBloggerImages(searchFor, replaceWith) {       var href;       var anchors = document.getElementsByTagName("a");       for(var i = 0; i < anchors.length; i++) {          href = anchors[i].href;          if(href.indexOf(searchFor) != -1) {             anchors[i].href = href.replace(searchFor, replaceWith);             anchors[i].setAttribute("onclick", "return hs.expand(this)");             anchors[i].setAttribute("class", "highslide");             anchors[i].setAttribute("title", "Click to enlarge");          }       }    }//]]></script>

В посте картинка отображается так:

<a href="http://img.jpg" class="highslide" onclick="return hs.expand(this)"><img src="http://img.jpg" title="Кликни на картинку и она увеличится" width="75" border="0" height="100" /></a>

Вот что получается:

---

Плеер музыки:

<div class="powerpress_player" id="powerpress_player_6111"><object type="application/x-shockwave-flash" data="http://www.howdyland.com/wp-content/plugins/powerpress/audio-player.swf" id="6111" height="24" width="290"> <param name="movie" value="http://www.howdyland.com/wp-content/plugins/powerpress/audio-player.swf" /><param name="FlashVars" value="playerID=6111&soundFile=http://www.humyo.com/10042037/03-Porcelain.mp3?dl=1&bg=E5E5E5&width=290&rtl=no&loader=009900&text=333333&titles=Moby&animation=yes&track=FFFFFF&tracker=DDDDDD&border=CCCCCC&initialvolume=60&leftbg=CCCCCC&lefticon=333333&voltrack=F2F2F2&volslider=666666&rightbg=B4B4B4&rightbghover=999999&righticon=333333&righticonhover=FFFFFF&transparentpagebg=yes" /><param name="quality" value="high" /><param name="menu" value="false" /><param name="wmode" value="transparent" /></object></div>

Wide Editor (широкий редактор)

Достал, прямо скажу, редактор blogger в виде замочной скважины. Вот нашел: http://userstyles.org/styles/3797 Для использования нужно установить в firefox plugin stylish