Google+ Blogger WordPress Facebook Like Vkontakte Odnoklassniki LiveJournal vKruguDruzei Facebook Email Gmail
вторник, 5 июня 2018 г.

Гаджеты для Blogger.

 информация с сайта http://shpargalkablog.ru/2010/11/gadzhety-dlya-blogger.html#razmeshchenie

1. Сделать гаджет Blogger над/под заголовком.

2.Увеличить ширину всего блога.

3.Убрать гаджет Blogger с определённой страницы.

4.Не показывать боковую панель на определённой странице.

5.Разделить одно поле гаджета на два под заголовком.

Сделать гаджет Blogger над/под заголовком.

Изменения производим в "Дизайн"-"Изменить HTML", предварительно сохранив шаблон. Для поиска кода пользуемся комбинацией клавиш Ctrl+F. Изменяем строку
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
, где showaddelement='yes',
      maxwidgets='2' (или 3,4...)-количество гаджетов в заголовке.

Увеличить ширину всего блога.

  1. "Дизайн"-"Дизайнер шаблонов"-"Дизайн"-"Изменение ширины". Увы, более 1000px сделать здесь не удастся. Поэтому запоминаем установленную цифру всего блога.
  2. Переходим на вкладку "Изменить HTML", ищем заданную цифру (CTRL+F), меняем её на необходимый размер.
Код, отвечающего за размер блога выглядит следующим образом:
<b:template-skin> <b:variable default='1130px' name='content.width' type='length' value='1130px'/>
<b:variable default='0' name='main.column.left.width' type='length' value='180px'/>
<b:variable default='360px' name='main.column.right.width' type='length' value='360px'/>        

Убрать гаджет Blogger с определённой страницы.

Расположением гаджетов на определённых страницах можно управлять. То есть, скажем, разместить гаджет "Архив блога" на всех страницах, кроме Главной. Находим соответствующий код ("Дизайн"-"Изменить HTML"-"Ctrl+F"):
<b:widget id='BlogArchive1' locked='false' title='Архив блога' type='BlogArchive'>
<b:includable id='main'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
</b:includable>
добавляем условие
<b:widget id='BlogArchive1' locked='false' title='Архив блога' type='BlogArchive'>
<b:includable id='main'>
 <b:if cond='data:blog.url != data:blog.homepageUrl'>
  <b:if cond='data:title'>
    <h2><data:title/></h2>
  </b:if>
  <div class='widget-content'>
  <div id='ArchiveList'>
  <div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
    <b:if cond='data:style == &quot;HIERARCHY&quot;'>
     <b:include data='data' name='interval'/>
    </b:if>
    <b:if cond='data:style == &quot;FLAT&quot;'>
      <b:include data='data' name='flat'/>
    </b:if>
    <b:if cond='data:style == &quot;MENU&quot;'>
      <b:include data='data' name='menu'/>
    </b:if>
  </div>
  </div>
  <b:include name='quickedit'/>
  </div>
  </b:if>
</b:includable>
Здесь вы можете обратить внимание, что условие (если страница не является Главной, о чём говорит знак "!=") задаётся между следующими элементами:
<b:widget> <b:includable> <b:if cond='data:blog.url != data:blog.homepageUrl'>
код </b:if>
</b:includable>
<b:includable>
     код
</b:includable>
</b:widget>
Условие может варьироваться(http://shpargalkablog.ru/2011/02/uslovnye-tegi-v-blogger.html),
в зависимости от ваших потребностей.

Не показывать боковую панель на определённой странице.

Здесь уберём боковую панель (правую, левую или обе), а содержание растянем на всю страницу. Удобно применять для оглавления. Код добавляется перед </head>. На примере страницы(http://shpargalkablog.ru/2010/07/razrabotka-bloga-v-blogger.html), пряча правую боковую панель column-right-outer, для левой - column-left-outer:
<b:if cond='data:blog.url == &quot;http://shpargalkablog.ru/2010/07/razrabotka-bloga-v-blogger.html&quot;'>
<style type='text/css'>
      .main-inner .columns {
        padding-right: 0;
      }
      .main-inner .fauxcolumn-center-outer {
        right: 0;
        _width: expression(this.parentNode.offsetWidth -
             parseInt(&quot;$(main.column.left.width)&quot;) + &#39;px&#39;);
      }
      .main-inner .fauxcolumn-right-outer {
        width: 0px;
      }
      .main-inner .column-right-outer {
        width: 0px;
        margin-right: 0;
      }
</style>
</b:if>
Выделенное жирным (строка сверху и снизу) добавляем в код
<b:if cond='data:blog.url != &quot;АДРЕС&quot;'>
<div class='column-right-outer'>
        <div class='column-right-inner'>
          <aside>
          <macro:include id='main-column-right-sections' name='sections'>
            <macro:param default='2' name='num' value='1'/>
            <macro:param default='sidebar-right' name='idPrefix'/>
            <macro:param default='sidebar' name='class'/>
            <macro:param default='true' name='includeBottom'/>
          </macro:include>
          </aside>
        </div>
        </div>
</b:if>
Дизайн основной части Blogger
Если нужно скрыть одну из частей правой колонки (в этом случае её размер равен 220px), то применяем код:
<b:if cond='data:blog.url == &quot;http://shpargalkablog.ru/2010/07/razrabotka-bloga-v-blogger.html&quot;'>
<style type='text/css'>
.main-inner .columns {padding-right: 220px;}
.main-inner .fauxcolumn-center-outer {right: 220px;}
.main-inner .fauxcolumn-right-outer {width: 220px;}
.main-inner .column-right-outer {margin-right: -220px; width: 220px;}
.main-inner .column-right-inner table.section-columns td 
  {display: none;}
.main-inner .column-right-inner table.section-columns td.first 
  {display: inline; width: 100%;}
#sidebar-right-2-2 {display: none;}    
</style>
</b:if>

Разделить одно поле гаджета на два под заголовком.

Чтобы вместо одного гаджета добавить пару по горизонтали между заголовком и сообщением, выполним ряд несложных действий.
Заменим
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'/>
на
<b:section class='tabs' id='crosscol-left' maxwidgets='' showaddelement='yes'/>
<b:section id='crosscol-right' showaddelement='yes'/>
<div style='clear: both;'/>
Перед
]]></b:skin>
внесём
#crosscol-left {width: 45%; display: inline-block; float: left;}
#crosscol-right {width: 45%; display: inline-block; float: right;}
#crosscol-right .widget {margin: 0;}
Процентное соотношение пишите на своё усмотрение. В данном случае это 40/40.
До
]]>
    </b:template-skin>
укажем
#layout #crosscol-left {width: 50%; float: left;}
#layout #crosscol-right {width: 50%; float: right;}



0 коммент.:

Отправить комментарий