воскресенье, 15 марта 2009 г.

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

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

Таблицы.

Чтобы таблица отображалась правильно, в html коде нужно убрать все элементы форматирования (переводы строк и пробелы)
HDDWD Caviar 3.1Gb85$
Quantum FB ST 6.4Gb110$
Текст кода приведенной выше таблицы:
<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>
r1c1r1c2
r2c1r2c2
<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>
TitleFormat
r1c1r1c2
r2c1r2c2
r3c1r3c2
r4c1r4c2
Итого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>

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

<table border="0">
  <tbody>
    <tr>
      <td valign="top"><img border="0" src="http://4.bp.blogspot.com/_I2i9kIFocsE/SkTkU_GSjoI/AAAAAAAAChc/S60KRvNKf_c/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="http://4.bp.blogspot.com/_I2i9kIFocsE/SkTgp0riytI/AAAAAAAACg0/zcSXgOyzLx0/s320/stock_contact.png" border="0" />
<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="http://4.bp.blogspot.com/_I2i9kIFocsE/SkTiOjYvKzI/AAAAAAAAChU/4wfb13v_3G8/s320/mail-attachment.png" border="0" />
<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="http://3.bp.blogspot.com/_I2i9kIFocsE/SkTiEEmE2yI/AAAAAAAAChM/ANB1PEM4DEw/s320/error.png" border="0"  />
<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="http://2.bp.blogspot.com/_I2i9kIFocsE/SkTh-vKxuTI/AAAAAAAAChE/XJWdghLYBdY/s320/dialog-warning.png" border="0" />
<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="http://4.bp.blogspot.com/_I2i9kIFocsE/SkThvFdRpRI/AAAAAAAACg8/t6MXn27GAi8/s320/dialog-question.png" border="0" />
<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="http://4.bp.blogspot.com/_I2i9kIFocsE/SkTkU_GSjoI/AAAAAAAAChc/S60KRvNKf_c/s320/notification-network-wireless.png" border="0" />
<img style="float:left; margin:0 10px 10px 0;width: 32px; height: 32px;" src="http://lh3.ggpht.com/_I2i9kIFocsE/SlGwIq7viAI/AAAAAAAACmg/6MspHSqf7Vc/bug.png" 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="http://lh6.ggpht.com/_I2i9kIFocsE/S6dPz9avdNI/AAAAAAAAE-8/LsJOZZ32wg0/board-acount1.jpg" /></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

1 комментарий:

  1. Анонимный1 мая 2009 г., 9:30

    Blogumus - Flash облако тегов для Blogger
    http://blogohelp.blogspot.com/2008/12/blogumus-flash-blogger.html

    ОтветитьУдалить