Гаджет HTML/JavaScript веб-сервиса Blogger.

HTML/JavaScript
HTML/JavaScript.
Мой любимый инструмент - гаджет HTML/JavaScript. С его помощью веб-сервис Blogger предоставляет свободу действий, в том числе, возможность размещения рекламы на блоге и получения на ней заработка.

Содержание.

  1. Способы использования.
  2. Увеличить способы размещения гаджета Blogger.
Пару слов для неопытных пользователей: гаджет Blogger (небольшое приложение, предоставляющее дополнительную информацию, например, "Постоянные читатели" или "Окно поиска") добавляется в шаблон блога (см. рис. "Шаблон Blogger") на вкладке "Дизайн"-"Элементы страницы". Путем перетаскивания мышки на обозначенные точками поля, можно поменять их расположение. В "Дизайн"-"Дизайнер шаблонов"-вкладка "Дизайн" позволяет выбрать наиболее подходящий вариант для определения размещения данных пунктирных участков.
Расположение гаджетов. Одно-, двух- и трехколоночные макеты.
Расположение гаджетов. Одно-, двух- и трехколоночные макеты.

Способы использования.


Установить счетчики, баннеры в блог.

Для этого достаточно полученный код добавить в гаджет HTML/JavaScript.

Включить индификатора Google Analytics.

О том,как разместить индификатор Google Analytics можно прочитать в статье, посвященной инструментам веб-мастера.

Добавить иконки, например, RSS (фид Feedburner), email, твитер.

Мой способ:

1. Сохранить изображение на компьютер. Оптимизировать его, воспользовавшись программой Фотошоп. Файл, размером 25139 байт, "похудел" до 4715 байт без видимого человеческим глазом ухудшения картинки.

2. В новом сообщении (его не нужно публиковать) вставляем полученное изображение, присвоив ему читаемое имя. В моём примере, "podpiska-feed". Теперь рисунок находится в вашем альбоме Picasa с соответствующим адресом и ссылкой.
Разработать код для добавления иконок в блог. Выделенные участки удалить.
Разработать код для добавления иконок в блог. Выделенные участки удалить.

3. Полученный код пишем в гаджете HTML/JavaScript.
Добавить код иконки в гаджет HTML/JavaScript.
Добавить код иконки в гаджет HTML/JavaScript.

4. На своё усмотрение, можете убрать заголовок гаджета.

Поиск по блогу AdSense.

На мой взгляд, более адекватный, чем через гаджет Blogger и позволяет заработать. Для получения кода, нужно перейти в программу AdSense на вкладку "Настройка AdSense".
Поиск по блогу от AdSense.
Поиск по блогу от AdSense.
При разработке данного кода у меня вызвало затруднение: "Показать доп.параметры"-"Кодировка вашего сайта" нужно указать "Юникод (UTF-8)".

Гаджет "Постоянные читатели".

Поскольку тег h2 в гаджете "Постоянные читатели" никак не хочет корректироваться, я воспользовалась гаджетом HTML/JavaScript, добавив код из "Мастера сообществ Google".

Добавить несколько элементов между заголовком и сообщением в одну строку.

"Дизайнер шаблонов" предоставляет удобные способы размещения гаджетов. Пожалуй, единственное, что не было предусмотрено, так это возможность выбора нескольких колонок под заголовком блога. Изменив шаблон, можно разделить строку на нужное количество блоков, а можно и использовать тег <table>. Второй вариант более прост в реализации, его я и применила на данном блоге.

Код:
<table border="0" cellspacing="10"><tr>
<td>код_элемента</td>
<td>код_элемента</td>
<td>код_элемента</td>
</tr></table>
, где код_элемента - тот код, который вы бы добавили в гаджет HTML/JavaScript, например, код поиска по блогу AbSense;
      cellspacing - расстояние между границами ячеек;
      border - толщина рамки в px.
Количество элементов определяете на своё усмотрение.

Создать полосу прокрутки.

Код полосы прокрутки можно добавить как в текст сообщения, воспользовавшись вкладкой "Изменить HTML", так и в гаджет HTML/JavaScript:
<div class="widget-content">
<ul style="height:50px;width:150px; overflow:auto; ">
<li><a href="http://вашассылка"><b>отображаемыйтекст</b></a></li>
<li><a href="http://вашассылка"><b>отображаемыйтекст</b></a></li>
</ul></div>
где, height - вертикальная длина полосы прокрутки,
     width - горизонтальная длина,
     внутри <li>...</li> располагаем наши ссылки.

Результат:

Вертикальное меню с аннотацией.

Построение вертикального меню с аннотацией описано в более раннем посте.

Вертикальное выпадающее меню без использования JavaScript.

Вертикальное выпадающее меню без использования JavaScript.
Вертикальное выпадающее меню
без использования JavaScript.
Код вертикального меню:
<style type="text/css">  <!--
/* CSS Document */
ul#menu-v,
ul#menu-v li,
ul#menu-v ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px; 
  list-style: none;
}

ul#menu-v:after {
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#menu-v li {
  float: left; 
  display: block !important; 
  display: inline; 
  position: relative;
  border:#ddcca2 1px solid;
}
ul#menu-v li ul li {
border:none;
border-bottom:#991500 2px solid;
}

/* Root Menu */
ul#menu-v a {
  padding: 0 6px;
  display: block;
  background: #ebe0c7;
  color: #991500;
  font: bold 12px/28px Verdana, Arial;
  text-decoration: none;
  height: auto !important;
  height: 1%; 
}

ul#menu-v a:hover,
ul#menu-v li:hover a,
ul#menu-v li.iehover a {
  background: #991500;
  color: #ebe0c7;
}

/* 2nd Menu */
ul#menu-v li:hover li a,
ul#menu-v li.iehover li a {
  background: #ebe0c7;
  color: #991500;
  border:#ddcca2 1px solid;
}

ul#menu-v li:hover li a:hover,
ul#menu-v li:hover li:hover a,
ul#menu-v li.iehover li a:hover,
ul#menu-v li.iehover li.iehover a {
  background: #991500;
  color: #ebe0c7;
  border:#ebe0c7 1px solid;
}

ul#menu-v ul,
ul#menu-v ul ul,
ul#menu-v ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 161px;
}

ul#menu-v li:hover ul ul,
ul#menu-v li:hover ul ul ul,
ul#menu-v li.iehover ul ul,
ul#menu-v li.iehover ul ul ul {
  display: none;
}

ul#menu-v li:hover ul,
ul#menu-v ul li:hover ul,
ul#menu-v ul ul li:hover ul,
ul#menu-v li.iehover ul,
ul#menu-v ul li.iehover ul,
ul#menu-v ul ul li.iehover ul {
  display: block;
}
-->  </style>
<ul id="menu-v"> 
    <li><a href="#">Вертикальное</a>
        <ul> 
          <li><a href="#">Ссылка 1</a></li>
          <li><a href="#">Ссылка 2</a></li>
        </ul>
    </li> 
    <li><a href="#">CSS</a> 
        <ul> 
          <li><a href="#">Ссылка 1</a></li>
          <li><a href="#">Ссылка 2</a></li>
          <li><a href="#">Ссылка 3</a></li>
          <li><a href="#">Ссылка 4</a></li>
          <li><a href="#">Ссылка 5</a></li>
        </ul>
    </li> 
    <li><a href="#">Меню</a>
        <ul> 
          <li><a href="#">Ссылка 1</a></li>
          <li><a href="#">Ссылка 2</a></li>
        </ul>
    </li>
</ul>
, где значения цветов #991500, #ebe0c7 и #ddcca2 можно заменить под свой дизайн, чтобы не запутаться, меняйте все упоминания комбинации цифр, скажем, 991500 (общее количество 5),
      количество ячеек задаётся списком <ul>...</ul> и его элементами <li>...</li>, 
      внутри конструкции:
<style type="text/css">  <!--
...
-->  </style>
определяем CSS код - стиль нашего меню. Его заносим в гаджет для наглядности результата и удобства разработки. В дальнейшем нужно содержимое этой конструкции перенести в шаблон блога ("Дизайн"-"Изменить HTML") после строки: 
/* Widgets
----------------------------------------------- */

Жаль, но горизонтальное меню данным способом мне так и не удалось сделать функционирующем.

Горизонтальное меню CSS.

Результат:

Гаджет с кодом горизонтального меню нужно расположить прямо под заголовком (см. далее) или в окошко сразу после сообщения, иначе оно будет выглядеть некорректно.
Шаблон Blogger.
Шаблон Blogger.
Код:
<style type="text/css">  <!--
ul#menu-g {
  width:700px;
  margin: 0;
  border: 0 none;
  padding: 0;
  list-style: none;
  background: #ebe0c7;
  height: 30px;
  font: bold 12px/28px Verdana, Arial;
  border-left:#ebe0c7 1px solid;
}

ul#menu-g li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left;
  display: inline;
  list-style: none;
  position: relative;
  height: 30px;
}

ul#menu-g a {
  border: 0px;
  padding: 0 10px;
  float: none !important;
  float: left;
  display: block;
  background: #ebe0c7;
  color: #991500;
  text-decoration: none;
  height: auto !important;
  height: 1%;
  width: 150px;
  text-align: center;
}

ul#menu-g a:hover {
  background: #991500;
  color:#ebe0c7;
  border-top:#ebe0c7 1px solid;
}

--> </style>
<ul id="menu-g">
    <li><a href="#">Горизонтальное</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">Меню</a></li>
</ul>
, где width:700px; - общая длина меню,
    width: 150px; - длина ячейки,
    #ebe0c7 и #991500 - значения цвета меню,
    внутри <li>...</li> расположены ссылки меню,
    CSS стиль находится внутри:
<style type="text/css"> <!--
...
--> </style>
После подбора нужных параметров, код CSS следует перенести в шаблон блога (см. рис.).
Добавить стиль CSS меню Blogger.
Добавить стиль CSS меню Blogger.

Увеличить способы размещения гаджета Blogger.


Сделать гаджет 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'/>



Из моего списка бесплатных ссылок:http://amateurblogger.ru/2010/05/action-promotion-articles.html. Участвуем в акции "Продвижение статьями бесплатно".



"С нуля" до знатока→Ссылки Blogger→Гаджет HTML/JavaScript веб-сервиса Blogger

4 комментария


Геннадий
1
Здравствуйте!Видел где-то гаджет аннотации-это когда заголовки страниц показываются справа или слева.Где его найти и как установить?
NMitra NMitra
2
Доброго времени суток! 1) Вы можете воспользоваться гаджетом Recent Posts (Последние статьи) - "Дизайн"-"Элементы страницы"-выбираем интересующую клетку "Добавить гаджет"-слева сверху вкладка "Избранные". Там два гаджета с аналогичным названием. Выберете нужные параметры. 2) В draft.blogger.com (Черновик Blogger - панель та же, но дополнена новыми функциями, которые тестируются в режиме реального времени) добавить гаджет "Популярные сообщения". 3) С помощью гаджета HTML/JavaScript (см. статью http://shpargalkablog.ru/2010/07/kak-dobavit-annotatio-stranitsam.html). Плюсы его использования: необходимые статьи вы выбираете сами.
NMitra NMitra
4
Ох, уж этот гаджет "Постоянные читатели"! Единственное, что можно сделать в Blogger в "Дизайн"-"Дизайнере шаблонов" на вкладке "Дополнительно"-"Фон боковой панели" подобрать единый фон или цвет текста (вкладка "Текст гаджета") всей боковой панели блога.

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

____________________________________________________________________________________________________









____________________________________________________________________________________________________
Похожие по тематике статьи :
*
Темы :

0 коммент.:

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

Комментировать...

Подписаться на: Комментарии к сообщению