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

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

Содержание. Способы использования.

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

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

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

Помимо стандартного варианта иконки, который предлагает Feedburner, можно добавить свою неповторимую и более заметную картинку. Мой способ:
  1. Сохранить изображение на компьютер. Оптимизировать его, воспользовавшись программой Фотошоп. Файл, размером 25139 байт, "похудел" до 4715 байт без видимого человеческим глазом ухудшения картинки.
  2. В новом сообщении (его не нужно публиковать) вставляем полученное изображение , присвоив ему читаемое имя. В моём примере, "podpiska-feed". Теперь рисунок находится в вашем альбоме Picasa с соответствующим адресом и ссылкой.
    Разработать код для добавления иконок в блог. Выделенные участки удалить.
    Разработать код для добавления иконок в блог. Выделенные участки удалить.
    • Переходим на вкладку "HTML".
    • Удаляем фрагмент кода, отвечающий за расположение картинки:
      <div class="separator" style="clear: both; text-align: center;"> и </div>
    • Меняем приблизительно такую строку
      <a href="http://1.bp.blogspot.com/_ebKrCj8TLPk/TLYAspOfLII/AAAAAAAAAxg/mKJyxycMcgg/s1600/podpiska-feed.png" imageanchor="1" style="">
      на
      <a href="http://ваша_ссылка" title="поясняющий_текст">
    • Добавляем alt, width, height в тег img.
  3. Полученный код пишем в гаджете HTML/JavaScript.
    Добавить код иконки в гаджет  HTML/JavaScript.
    Добавить код иконки в гаджет HTML/JavaScript.
    На своё усмотрение, можете убрать заголовок гаджета, в образце это "Подписка RSS6".

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

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

Добавить несколько элементов в гаджет HTML/JavaScript.

"Дизайнер шаблонов" предоставляет удобные способы размещения гаджетов. Но, порой этого не достаточно. Например, когда нужно разместить рядом несколько скриптов, как это сделано в боковой части под поиском данного блога с формами подписки. Тогда разделяем строку/строки на нужное количество столбцов при помощи тега <table>.
<table>
  <tr>
      <td>код_элемента</td>
      <td>код_элемента</td>
      <td>код_элемента</td>
      <td>код_элемента</td>
  </tr>
</table>

Вертикальное выпадающее меню без использования 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 код - стиль нашего меню. Его заносим в гаджет для наглядности результата и удобства доработки. В дальнейшем нужно содержимое этой конструкции без <style type="text/css"> ... </style> перенести в шаблон блога.

Горизонтальное выпадающее меню я постаралась адаптировать под имеющийся стиль Blogger. http://shpargalkablog.ru/2011/05/kak-sdelat-ssylku-k-nachalu-stranitsy.html
Rookee — инструменты для привлечения клиентов на сайт
в f t
наверх ↑

138 комментариев:

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

Готова ответить на вопросы.
Евгений
Значит ли это, что каждая ссылочка добавляется в это меню вручную? А ссылки только внешние или внутренние каким-то образом можно делать? И все же есть надежда, что разработчики Блоггера все же сделают разбивку на темы в виде стандартного гаджета...
NMitra
Есть гаджет "Страницы". Но он добавляет только URL страниц, расположенных по адресу, например, http://shpargalkablog.ru/p/html-css-javascript.html. Их можно создать на вкладке "Отправка"-"Изменить страницы".

Гаджет HTML/Javascript позволяет сделать вид меню любым и добавить нужные ссылки как внутренние, так и внешние. Про код ссылки я написала здесь - http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html. Посмотрите, там с примерами. При возникновении вопросов обязательно напишите, поскольку тема важная.
NMitra
Ещё есть гаджет ("Дизайн"-"Элементы страницы") "Список ссылок", но там нужно прописывать стили CSS, иначе вид крайне невзрачный.
Вика
Здравствуйте!
Скажите пожалуйста, что значит "меню в окошко сразу после сообщения". Как сделать так, чтобы меню было в окошке над сообщением, как у вас? как поставить этот гаджет в это окошко?
Спасибо.
NMitra
Посмотрите эту статью http://shpargalkablog.ru/2011/04/gadzhet-spisok-ssylok-blogger.html
Вика
Здравствуйте!
Я наверное совсем тупой чайник! У меня ничего не получилось.
Извините, спасибо!
NMitra
Значит я плохо объяснила. Совсем не получилось или не так как хотелось бы?
Вика
Здравствуйте!
Совсем ничего не получилось. Я не могу разобраться, как же все таки сделать так, чтобы виджет был сразу в окошке сообщений. И еще с ключевыми словами, ведь наверное можно же сделать так, чтобы тэги прописывались сразу после сообщения, может туда нужно тоже виджет какой то поставить?
Спасибо.
NMitra
По второму вопросу: нужно присвоить сообщениям ярлыки http://shpargalkablog.ru/2011/03/yarlyki-blogger.html

Далее в "Дизайн"-"Элементы страницы"-поле "Сообщения блога"-"Параметры Страницы сообщения" установить галочку "Ярлыки".
NMitra
По-поводу меню: я добавляла код ссылки (http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html), предварительно преобразованный в CoderHTML (http://shpargalkablog.ru/2010/07/instrumenty-vebmastera-s-nulya.html) прямо в шаблон после

<b:if cond='data:post.isDateStart'>
          &lt;div class=&quot;date-outer&quot;&gt;
        </b:if>

То есть туда, где должна располагаться дата (http://shpargalkablog.ru/2011/03/kak-sdelat-odin-raz-na-vse-stati.html).

В каждом коде ссылки я указывала id, которому в последствии задавала стиль.

Это сложно объяснить, не прочтя предыдущие записи данного блога. И не для каждого шаблона подойдёт. Экспериментируя с дизайном, постепенно разберётесь что к чему. Я сама не так давно перенесла этот элемент из боковой панели.
Вика
Здравствуйте!
Огромное спасибо Вам за терпение и доходчивой объяснение. Теперь кажется разобралась, буду пробовать. Результат напишу позже. Думаю, что все получится.
Вика
Здравствуйте!
Бьюсь с меню второй день. Заменила на свои цвета, тем не менее, у меня получаются абсолютно бесцветные заголовки, а я проделывала по вашей схеме, и уже наверное наизусть выучила. Ничего не понимаю. Выручите пожалуйста, чтобы заголовки меню были тоже яркими. Значения заменила также, как у вас- бордовым, у меня- синим, а что у вас матовым, у меня- голубым.

Спасибо.
NMitra
Вик, я только сейчас увидела. А почему вы используете шаблон 2006 года? У вас и "Дизайнер шаблонов" не работает. Поэтому возникли вопросы в прошлый раз. Дело в том, что его не часто сейчас применяю и поэтому я не рассматриваю его.

В меню замените color: #0000СD; на color: #0000CD; в ul#menu-g a {}
Такое ощущение, что С написана на русском.

Также значок # замените на конкретные URL, например, http://shpargalkablog.ru/2010/08/gadzhet-htmljavascript-blogger.html.
Ulja Stupina
Делала вертикальное меню, как изменить названия и цвета разобралась, но вот почему меню получается под остальными гаджетами?
скриншот - https://lh6.googleusercontent.com/_sW0C6HmNRd0/Ta2KkuL2nfI/AAAAAAAAAKY/6KdPLyc9_rs/s800/%D0%91%D0%B5%D0%B7%D1%8B%D0%BC%D1%8F%D0%BD%D0%BD%D1%8B%D0%B9.jpg
NMitra
Добавьте z-index:

ul#menu-v,
ul#menu-v li,
ul#menu-v ul {
.....
z-index: 2;}
Ulja Stupina
А еще я заметила, что получается строчка 3 (под названием Меню) находится сверху, строчка 2 (в вашем примере называется Css) под ней, и первая строка еще ниже по уровню
NMitra
Всё верно сделали, а вот комментарий 24 для меня загадка.
Ulja Stupina
неудачно объяснила))лучше на картинках покажу:
вот что происходит - https://lh3.googleusercontent.com/_sW0C6HmNRd0/Ta2kftIzxaI/AAAAAAAAAKk/fapa7z5oqN4/2.jpg
https://lh3.googleusercontent.com/_sW0C6HmNRd0/Ta2kcNVNM9I/AAAAAAAAAKg/GWiXCW-gS1Q/1.jpg
Ulja Stupina
Разобралась!!
дело в том что я поменяла в самом начале ширину на 200px:

{
margin: 0;
border: 0 none;
padding: 0;
width: 200px;
list-style: none;
z-index: 2;}

но не поменяла дальше, вот в этом участке:
ul#menu-v ul,
ul#menu-v ul ul,
ul#menu-v ul ul ul {
display: none;
position: absolute;
top: 0;
left: 161px;}
Стоило поменять 161 на 199 как все заработало!!!!))
NMitra
Этот значок никто кроме вас не видит. Но можете его переместить вниз, увеличив значение z-index.
KDA999
Спасибо Вам за Ваш труд. Но вот хотелось бы еще узнать, как можно добавить еще колонки для гаджетов в шаблон? Или изменить положение существующих.
NMitra
Blogger предлагает варианты на любой вкус:

"Дизайн"-"Дизайнер шаблонов"-слева вкладка "Дизайн".
Добронрава
Может я туплю, тогда ткните меня носом, не могу найти такую инфу у Вас, а думаю, что наверняка она есть.
Можно ли поставит после шапки ещё один гаджет, у меня там есть один, постоянные читатели и мне нравится, что он там, но хочется установить ещё один, уже ниже "ПЧ". Помогите разобраться пожалуйста.
NMitra
Нужно сначала создать гаджет в поле боковой панели, а затем перетащить мышкой на пунктирное поле под "Постоянные читатели". Blogger это позволяет делать.

Вот только делать этого я всё же не рекомендую, так как название статьи совсем уйдёт под линию, таким образом, что его нельзя увидеть, не прокрутив колёсиком мышки. И человек, который зайдет на сайт впервые, не увидит интересующую его информацию, скорее всего покинет ресурс.
Добронрава
Спасибо за столь оперативный ответ! Я попробую, так как мне надо написать буквально пару строк! Благодарю!
совесть
Наташа, здравствуйте.
Спасибо за ваше терпение, что помогаете таким как я.
Поставил боковую панель. Но выпадающий список "прячется" под нижний гаджет. Можно ли исправить это дело. А то на ссылку 3 или 4 уже не видно.
http://myrussiammm.blogspot.com/
благодарю.

Шапку блога просто сделал в редакторе соединив несколько картинок в одну по слоям.
NMitra
Да, я обратила внимание)

Ох, нет это меню сюда не подходит. Оно раскрывается вправо и в правой боковой панели находится. Можно сделать по другому. Я подумаю.

Ответ: применить z-index. См. 22 комментарий и ниже.
NMitra
Понимаю, что пора какие-нибудь варианты меню показать, но никак что-то душа не лежит. Боюсь статья получится "не очень", если без желания. Может быть позже.
совесть
Хорошо, Наташенька.
Давайте попозже, а я потренирусь на этих пока.
совесть
Наташа, может список можно сделать не вниз раскрывающимся, а вверх ?
NMitra
Не, не стоит так делать: человек привык к определённым закономерностям, и всё необычное скорее всего вызовет недоверие.
совесть
понял
Елагина
Доброго времени суток!
Наташа, я нашла красивое меню с изображениями. И всё скачала. А чего дальше делать никак не пойму. Файл Readme в неизвестном формате. вот ссыль https://github.com/samuelbirch/ImageMenu
а вот как оно выглядит http://compupro.ru/2009/07/01/895.html

Вот мое любимое меню сайта.Ссыль http://neighborhoodies.com/. Такое вообще реально в блогах сделать?
NMitra
Как-то не выходит - попадаю на 404 ошибку. По-видимому страницу удалили.

Да, вполне реально. На Blogger в течении года будет реализовано нечто похожее, а там уж можно с помощью CSS подкорректировать вид под свои нужды.
Елагина
Врятли. Это я, наверное, кривую ссылку даю.
Вот попробуйте с сайта разработчика http://www.phatfusion.net/projects.html
В течении года я уж и забуду,чего хотела)))
NMitra
Елагина, спасибо за интересный вопрос. Была опубликована статья http://shpargalkablog.ru/2011/07/accordion-css.html в ответ на него. При поиске информации узнала много нового для себя, нашла интересные ресурсы, натестировалась от души.) В течении дня дополню ещё одним вариантом.
xh0b0tx
Хотелось бы спросить, возможно Вы мне подскажете, где можно найти документацию или хотя бы какуето информацию по структуре шаблонов нового типа. А то самому разбираться в них уж больно тяжко.
NMitra
Мне помогло это - https://groups.google.com/group/blogger-template-design/web/html-structure?pli=1

Я думала о написании подобного поста, но сейчас считаю не очень целесообразно. В этом году Blogger вроде как предложит новые разработки, основанные на HTML5. Вот тогда и буду разбираться.
xh0b0tx
Мне нравилась структура шаблонов более старого типа. Старые minima, если помните. Они были интуитивно понятны. Когда же появились эти тут стало всё очень сложно. Напихали как попало, вперемешку с мобильным шаблоном, который лично мне вообще не нужен. Сиди теперь копайся в куче "быдлокода", и раскладывай всё по полочкам.
Спасибо огромное за совет, буду изучать дальше.
NMitra
Я, честно говоря, с ним толком не работала, но в нём определённо кода меньше, так как тогда не было "Дизайнера шаблонов", к которому привязываются стили. Но порой возвращаюсь к нему "Дизайн"-"Изменить HTML"-"Шаблоны дизайна (запущено в 2006 г.) Выберите шаблон дизайна". Функционал там тот же.
Sviat
Здравствуйте! А у меня меню не работает! Не вертикальное не горизонтальное.
Sviat
Доброго времени суток. Что-то у меня не получается. Сделал всё как тут написано, а в результате вышло так: http://samput.blogspot.com/ как это исправить? Спасибо!
NMitra
Ой, не так. Этот весь код внесите в гаджет HTML/JavaScript на вкладке "Дизайн"-"Элементы страницы".
NMitra
А еще более простой способ - добавить в поле между заголовком и сообщением гаджет "Список ссылок" - http://shpargalkablog.ru/2011/04/gadzhet-spisok-ssylok-blogger.html
Sviat
Получилось, спасибо!
Анонимный
Здравствуйте! С новым дизайном перестал работать гаджет "Top Commentators" Powered By: Blogger Widgets. Было очень удобно. Подскажите, пожалуйста, как его наладить. Спасибо!
NMitra
Это разные не взаимосвязанные вещи.

Поскольку все скрипты основаны на http://pipes.yahoo.com/pipes/pipe.info?_id=cce6834df28b2043ff215d0a069f3c50, то, по-видимому, они изменили скрипт. Но у тех, кто брал код с первоисточника, всё по прежнему отображается.

Зарегистрируйтесь - процесс быстрый можно использовать аккаунт Гугла.

Далее перейдите по ссылке выше и нажмите ссылку "Clone". Далее "Edit Source".

Посмотрите здесь - http://assessmyblog.blogspot.com/2008/01/top-commentators-widget-for-blogger.html - хорошо написано.
NMitra
На следующей недели опубликую статью.
Konfeta
Спасибо огромное! Вы мне очень помогли. Осталось справиться с удалением себя из списка комментаторов и увеличением количества с 5 до 10 :)
Терпеливо жду статью!
Hakob
Здравствуйте. Мне нужен HTML код стандартного виджета статистики Blogspot. Заранее спасибо :)
NMitra
Здравствуйте. "Дизайн"-пунктирное поле "Добавить гаджет"-"Статистика блога".

Скрипты, применяемые в Blogger - http://www.blogger.com/static/v1/widgets/3871175110-widgets.js

Ряд скриптов, которые возможно использовать за пределами платформы, Гугл выкладывает в открытое использование - http://www.google.com/friendconnect/ - но данного гаджета там нет.
NMitra
Взяла из другого источника - http://shpargalkablog.ru/2011/09/top-kommentatorov-blogger.html
Malygina Daria
здравствуйте! помогите, пожалуйста!
Я никак не могу разобраться, как вставлять изображения в страницах.
т.е "твиттер, вопросы, обо мне"
например как здесь.
http://flkmiracle.blogspot.com/
NMitra
Добавьте в гаджет HTML/JavaScript (в поле перед сообщением) код

<center><a href="http://malyginadaria.blogspot.com/"> <img src="http://i061.radikal.ru/1108/ba/8ab8c8fccdf1.png"></a><a href="адрес"><img src="http://s61.radikal.ru/i171/1108/2c/5f24df76d3b1.png"></a><a href="адрес"><img src="http://i026.radikal.ru/1108/8b/5b7f418f41ce.png"></a><a href="адрес"><img src="http://s39.radikal.ru/i083/1108/11/41771dabbdd8.png"></a><a href="адрес"><img src="http://s011.radikal.ru/i316/1108/a3/7d85ac69ac24.jpg"></a></center>

Но поисковики не рекомендуют навигацию, оформленную с помощью картинок.
Malygina Daria
спасибо!!!
Анонимный
Здравствуйте, Наташа. Пожалуй, Ваш блог - моя последняя надежда... У каких блоггеров я только не спрашивала! А в ответ - тишина.
Очень заинтересовалась модулем «FollowMe» - это такая "плавающая" птичка Твиттер. Где-то я видела, как эта птичка, аккуратненько так примостилась в правом нижнем углу блога и никому не мешала. Очень понравилось. Но на сайте предлагаются варианты только лишь для платформы Joomla: http://extensions.joomla.org/extensions/social-web/social-profiles/8309 Вопрос: не уже ли нету никакой возможности "заточить" эту фишку под Блоггер?
И ещё: сервис share42 предлагает очень удобные кнопки для соц. сетей, но они тоже для Блоггера не подходят. Можно их, как-нибудь, тоже под нашу платформу "подогнать"?
Извините, если задаю много вопросов. Но, они, на самом деле, волнуют многих блоггеров на Блогспоте. )
NMitra
Мне понравилась птичка отсюда - http://vsegenialno.blogspot.com/2011/08/vidget-dla-bloga-veseliye-twitter.html

В гаджет HTML/JavaScript добавьте

<a href="http://twitter.com/intent/user?screen_name=shpargalkablog" onclick="window.open(this.href,this.target,'width=500,height=500,top=100, left=400,'+'toolbar=no,menubar=no,scrollbars=yes,resizable=yes');return false;" style="position: fixed; right: 20px; bottom: 50px; z-index:999;"><img src="http://demo.herdboy.com/modules/mod_followme/images/followme_right.png" border="0" alt="twitter" width="100" height="100" /></a>

Вместо shpargalkablog своё имя.

Про share42 посмотрю позже.
españolka
Ну Наталья! Ну молодца! Огромнейшее сэнкью!!! Это единственный реальный блог о Блоггере! Одна ты мне помогла, Супер! )))
Буду ждать share42...
NMitra
Посмотрела share42. У нас нет возможность загружать по FTP.

Да вы и сами можете такую панель сделать. Тем более стили уже указаны.

Перед <data:post.body/> добавить

<b:if cond='data:blog.pageType == &quot;item&quot;'><div id='share42'>
<a expr:href='&quot;http://vkontakte.ru/share.php?url=&quot; + data:post.url' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640,top=100,left=400,\&quot;); return false;&quot;'><img alt='ВКонтакте' border='0' height='32' src='http://share42.com/icons/32x32/vkontakte.png' width='32'/></a><a expr:href='&quot;http://twitter.com/share?text=&quot; + data:post.title + &quot;&amp;url=&quot; + data:post.url + &quot;&amp;via=аккаунт_блога&amp;related=ваш_личный_аккаунт&quot;' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640,top=100,left=400,\&quot;); return false;&quot;'><img alt='Твитер' border='0' height='32' src='http://share42.com/icons/32x32/twitter.png' width='32'/></a><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url+ &quot;&amp;title=&quot; + data:post.title' expr:onclick='&quot;window.open(this.href, \&quot;_blank\&quot;, \&quot;height=430,width=640,top=100,left=400,\&quot;); return false;&quot;'><img alt='facebook' border='0' height='32' src='http://share42.com/icons/32x32/facebook.png' width='32'/></a>
</div></b:if>

До ]]></b:skin> внести

#share42 {
position: fixed;
z-index: 1000;
left: 20px; /* смещение панели влево от края контента */
padding: 6px 6px 0;
background: #FFF;
border: 1px solid #E9E9E9;
border-radius: 4px;
width:32px;
margin-bottom: 500px;
}
#share42:hover {
background: #F6F6F6;
border: 1px solid #D4D4D4;
box-shadow: 0 0 5px #DDD;
}
#share42 a {opacity: 0.5}
#share42:hover a {opacity: 0.7}
#share42 a:hover {opacity: 1}

#share42 img {
padding: 0;
border: 0px solid $(image.border.color);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

Картинки я брала с http://share42.com/. Можно аналогично указать и другие кнопки, коды к которым можете найти здесь:

http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html
http://shpargalkablog.ru/2011/05/knopki-zakladok-dlya-blogger.html
españolka
Спасибо большое за ответ. Я не думаю, что я смогу сделать кнопки самостоятельно. Я до такой степени не разбираюсь в этих всех кодах, что Вы и представить не можете! ))) Есть у меня Macromedia Dreamweaver 8. Куда вставляются скрипты, что бы их можно было визуально видеть и редактировать?
Ещё вопрос: Я знаю, что код отслеживания блога от Гугл нужно размещать перед закрытым тегом head. А когда мной добавляются новые скрипты, то куда мне их лучше "втыкнуть" - до или после гугловского кода, как будет лучше?
NMitra
Ох, я такими вещами не пользуюсь. Посмотрите здесь - http://shpargalkablog.ru/2010/11/vstavit-javascript.html.

Всё равно, главное, что в head.

А вы много кнопок хотите? Перечислите. Пробовали внести изменения, описанные в 66 комментарии?
españolka
Наташа, благодарю ещё раз тебя. Ну какая же ты умничка!
Мне нужны небольшие кнопочки 24*24 в таком порядке: Фэйсбук, Одноклассники, Вконтакте, ЖЖ, Мэйл.ру, Блоггер, Я.ру, Гуглбаз, ЛайфИнтернет, Мой круг, Твиттер, RSS, Избранное браузера, Распечатать, Электронная почта.
Пытаюсь перейти по ссылке, которую ты мне дала, но там написано: страница не найдена.
Пойду пока, поделюсь твоим блогом в разных социалках! Спасибки! )))
NMitra
После ссылки стоит точка, её не нужно вводить в строку браузера)))

Смотрите комментарии к этой статье - http://shpargalkablog.ru/2011/02/sotsialnye-knopki-dlya-blogger.html?commentPage=2
españolka
Ну со сторокой браузера я знакома. :) А точку, вот - да, я не поставила. Пойду разбираться во всех этих кодах. Как всё это сложно! Сложно потому, что все эти "html-кракозябры" я визуально не вижу (что они, на самом деле, из себя представляют). А какую программу можно использовать, чтобы при редактировании, визуально видеть те изменения, которые я вношу в скрипты?
NMitra
Я пользуюсь кнопкой "Просмотр" при изменении шаблона. Код и его ошибки показывает, можно отказаться от внесения изменений и виден результат.
españolka
Наташа, ты говорила, что иконки ты брала в share42. А как их оттуда взять? Щелкаю правой кнопкой мыши, что бы появилось меню "сохранить изображение", но оно не появляется.
Думаю, что с кодами кнопок я бы уже разобралась (не со всеми, а частично), если бы у меня были нужные мне иконки. Пробовала искать другие иконки - не понравилось. Там либо не окажется какой-нибудь кнопки, которая мне нужна, либо размеры картинок подгонять нужно.
И ещё, воможно ли сделать эту вертикальную панель кнопок скролящейся?
NMitra
Нужно выбрать, наведя на картинку правой клавишей мышки, "Открыть фоновое изображение", а потом "Сохранить".

Можно, но по видимому уже не востребовано, поскольку у её автора http://dimox.name уже данная панель имеет более упрощённый вид. Видимо у читателей не возникало желания её разворачивать.
Евгений
Как добавить гаджет "пять звёздочек для оценки под каждым постом". И бесплатно ли это?
NMitra
Да, бесплатный сервис - http://shpargalkablog.ru/2010/12/reiting-stati-v-vide-zvezd.html
españolka
Сколько времени потеряла в поисках сохранения изображения и напрасно! Теперь разобралась, наконец-то. Оказывается, в Опере нет такого меню "Открыть фоновое изображение". Додумалась открыть Мозилу - получилось! =)
Теперь буду юзать. )))

А вот про скролл не поняла. Зашла к автору, вот здесь: http://dimox.name/google-plus-one-and-share42/, там у него панель в том виде, в котором надо мне - то есть она скролится.
NMitra
Какой адрес блога у вас?
Евгений
А как гаджет пять звёздочек правильно вставить в макете? Вбок не нужен вниз не нужен. Как сделать под каждое сообщешние?Спасибо за прошлую ссылку на этот гаджет.
NMitra
Так он под каждое сообщение вставляется. Вы только всем сообщениям название давайте. Пример - http://prilozhenie5.blogspot.com/
Евгений
Блин!!! Не устанавливается, я делал всё, как вы пишите в соответствующем разделе своего блога про гаджет пять звёзд. В итоге в блоге его нет, хотя помещаю, как вы и пишете,под сообщение. В чём дело.
Евгений
Появляется только вот что
Оцени пост
http://shpargalkablog.ru/2010/12/reiting-stati-v-vide-zvezd.html
в самом конце главной страницы
NMitra
Повторю вопрос из комментария 78.
Евгений
http://mirglazamicheloveka.blogspot.com/
Евгений
чё,адрес блога помог?
NMitra
Сейчас посмотрела, кода звёзд не обнаружила.
Евгений
Я просто удалил этот гаджет, толку-то нет. Там было всё так, как написано в 82 комментарии. Этот код и был.
Rina (butterfly)
Здравствуйте, Наташа!
Я хотела бы на боковой панельке сделать кнопку "Заказать", суть её в том, чтобы заказчик нажав на эту кнопку попадал на вновь открывающееся окно электронной почты и мог написать мне письмо с заказом. Подскажите, как это сделать. Спасибо.
Рина
NMitra
Здравствуйте.
http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#pochta
Мария Юнак
Не совсем в тему, но не знаю куда этот вопрос воткнуть.
Как называется картинка рядом с названием-заголовком гаджета? Например, цветочек. Или когда заголовок гаджета на куске пергамента написан, или указующий палец рядом... Как это называется? и как такое на блогспоте в блог добавить?
NMitra
Логотип?

Можно фоновой картинкой сделать http://shpargalkablog.ru/2010/07/kartinku-v-zagolovok-bloga.html или отдельным гаджетом http://shpargalkablog.ru/2011/01/dobavit-blok-v-zagalovok-blogger.html . Но в шаблоне нужно код менять.
Мариша
Огромное спасибо! Очень полезно. А можно ли сделать горизонтальное по такому же подобию?
NMitra
Я до конца следующей недели код подправлю, там всего пару строк http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html
Мариша
Спасибо огромное, что-то получается!!! Если есть возможность, подскажите пожалуйста, какаячасть кода отвечает за то, чтобы меню, которое уже выпало, не исчезало, когда я с меню первого уровня увожу курсор? А то после тыканий что-то видимо потерла нужное...
NMitra
Не поняла. Чтобы оно так и весело всё время?
NMitra
Мариша, я код поменяла, предполагаю, трудностей не должно возникнуть
Альбина Рассеина
не могу поставить гаджет "постоянные чиатели" . "исправьте форму" Как можно поставить этот гаджет с пом. HTMl? Прохожу по данной Вами ссылке, но никаких кодов там найти не могу. помогите пожалуйста. http://creativenn.blogspot.ru/
NMitra
Blogger-"Дизайн"-"Добавить гаджет"-в открывшемся окне слева "Дополнительные гаджеты"-первым будет "Постоянные читатели"
Альбина Рассеина
Это я знаю.я не об этом говорила, а о том, что он не устанавливался, и писалось "измените форму" Проблему я решила уже. Долго пришлось разбираться, что же значит "измените форму"
NMitra
Посмотрела ваш блог. Гаджет присутствует внизу над "Популярное на неделе".
Hanum
здравствуйте не могли бы вы подсказать как добавить виджет инстаграмма как у этого блоггера http://www.linadelika.com/ если можно скиньте ссылку на почтy islamovahanum@Mail.ru
NMitra
Регистрируйтесь на http://snapwidget.com/#getstarted и предложенный код добавляйте в гаджет HTML/JavaScript
Светлана Ковалева
Наталья, доброго времени суток!
Не подскажете куда Мастер сообществ Google переехал? По этой ссылке: http://www.google.com/friendconnect/ идет перенаправление на справку, а там ничего толком. Я блог перенесла на Wordpress, хотела подредактировать настройки гаджета и не нашла где это сделать.
NMitra
Доброго времени суток! Светлан, Гугл его совсем удалил ещё в прошлом году как невостребованный сервис.
Светлана Ковалева
Жаль! Попробую перенаправление прописать в .htaccess, может поможет.
Mishechka
Наталья, как закруглить углы в Вашем вертикальном меню? Я знаю, что с помощью border-radius, но куда его вставить?
Mishechka
Здравствуйте, Наташа. С углами я уже сам разобрался. У меня возник другой вопрос: можно ли с этим же CSS кодом использовать более удобный для создания пунктов меню гаджет "Список ссылок"?
NMitra
Здравствуйте, я потеряла нить разговора.
Mishechka
Как код Вашего "Вертикальное выпадающее меню без использования JavaScript" использовать с гаджетом "Список ссылок"?
NMitra
Вместо
ul#menu-v
написать
#LinkList1 ul
Mishechka
А как теперь в "Список ссылок" вносить подпункты? Раньше я для подпункта перед названием ставил знак -.
NMitra
см. гаджет Список http://shpargalkablog.ru/2011/10/gorizontalnoye-vypadayushcheye-menyu.html
Mishechka
Наталья, какое отношение эта статья имеет к ВЕРТИКАЛЬНОМУ меню, построенному с помощью гаджета СПИСОК ССЫЛОК?
NMitra
Какая разница. Разместите гаджет Список сбоку, пропишите стили - вот и вертикальное выпадающее меню.
NMitra
Собственно, это абсолютно неважно каким из гаджетов воспользоваться. Любой можно подстроить.
Mishechka
Гаджет "Список ссылок" удобнее чем "Список" и уже работает с Вашим вертикальным выпадающим меню, но я не могу вносить подпункты. В старом блоге http://portable-rus.blogspot.com/ я просто ставил тире перед названием подпункта, а в списке сдвигал ниже основного пункта. Как сделать также?
NMitra
Там возможно скрипт замены был какой-то такой http://shpargalkablog.ru/2013/04/value-input-javascript.html#querySelectorAll
Полное решение не скажу, нет времени этим заниматься.
Mishechka
Да, я сравнил оба шаблона и коды совершенно разные, в старом какие-то скрипты, массивы и т.д.
У меня в LinkList1 в три раза меньше кода, нужно чтобы посмотрел тот, кто понимает.
Может, когда у Вас будет время, я вышлю Вам старый шаблон и Вы посмотрите?

А пока я остановил свой выбор на Вашем меню и есть пару вопросов:
1. У Вас код CSS зачем-то закомментирован <!-- и -->, но работает...
2. Вы говорите, что в дальнейшем нужно содержимое этой конструкции перенести в шаблон блога.
Обязательно ли это делать и какая будет выгода? Я пробовал и в шаблоне, и в гаджете, показалось
гаджет работает быстрее и блог загружается быстрее...
NMitra
"когда у Вас будет время" - эх, когда же??? :)

1. Да, комментарии нужно убрать. Давным давно с какого-то блога скопировала код (тогда я даже ссылки на источники не ставила), до сих пор никак не переделаю.
2. Разница очень небольшая, невооружённым взглядом не увидеть. Выгода - удобство. Открываешь гаджет, а там весь код, не нужно рыскать по вкладкам.
Mishechka
1. Наташа, а в скорости разница есть или мне показалось?
2. И ещё, с гаджетом вес шаблона не увеличивается?
NMitra
Скрипты гаджетов висят во всех шаблонах, используете вы их или нет. Что касается html - да, любой код увеличивает вес шаблона, даже текст, но у вас же статьи не объёмом 100КБ.
Mishechka
Что касается шаблона, то я взял "Венецианское окно"-1, но многое в нём уже переделал и кое-что удалил, ибо считаю, что вес пустого шаблона 77КВ - это слишком много.

1. Раздел "Variable definitions" - удалил (не пользуюсь редактором шаблона).
2. Раздел "Tabs" - удалил (не использую верхнее меню).
3. Раздел "Widgets" - удалил (не использую архивы).
4. Раздел "Mobile" - удалил (у меня отключен мобильный шаблон).
Вес шаблона стал 65КВ, но всё равно это много.

Наталья, подскажите, как и что ещё можно сделать чтобы уменьшить вес шаблона?
Думаю, что все параметры из <b:template-skin>...</b:template-skin> можно расставить по своим местам, а его удалить.
NMitra
Я использовала шаблон 2006 года https://sites.google.com/site/spargalka1/rating/minima.xml?attredirects=0&d=1 Он легче. Его я изменила под свои нужны, полностью написав CSS с нуля. Также все внутри почикала.
Mishechka
Я взял свой месяц назад. Я в этом не понимаю, но есть разница:
У Вас:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
У меня:
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
Я пока не знаю в чём отличие, но думаю, что код должен отличаться. В моём шаблоне всё начинается с точки, а что означает значок # в начале кода?
NMitra
Адрес блога напомните
Mishechka
http://bossportable.blogspot.com/
NMitra
"шаблоне всё начинается с точки" - не понимаю.

По-хорошем должно быть

<!DOCTYPE html>
<html>
Mishechka
"шаблоне всё начинается с точки" - не понимаю.
Я имел ввиду эту точку:
есть так - .post-footer, и есть так - #blog-pager.

"По-хорошем должно быть"
Значит у меня правильно, а у Вас нет?
NMitra
Это стили. Точку ставим для классов, решётку - для id. http://shpargalkablog.ru/2011/08/kak-ispolzovat-css.html
Mishechka
Если я правильно понял, то для применения стилей ко всем колонкам нужно писать:

.sidebar

если только к правой:

#sidebar-right-1

Или я дурню смолол?
NMitra
Дело говоришь, всё верно
Mishechka
Спасибо, Наташа!
Пашок Захарофф
Всем привет, а можно ли на blogger сделать так, чтобы когда по адресу кто нибудь заходил и попадал на какую нибудь страницу, например приветственное слово, или картинка во весь экран, а уже после этого переходил на сайт. Спасибо
NMitra
Можно. Вам нужно именно приветственное слово?

Если галку ставите в "Настройках"-"Другое"-"Содержимое только для взрослых", то при заходе на сайт будет появляться соответствующее предупреждение

Можно сделать пароль http://shpargalkablog.ru/2012/04/script-parolya-na-stranitsy.html
Анонимный
Добрый день! Не подскажите как в вертикальном меню, сделать чтобы выбранное активное меню подсвечивалось, каким-нибудь цветом чтоб пользователей мог знать где он находится. Спасибо
NMitra
Добрый день. Можно с помощью http://shpargalkablog.ru/2011/03/yarlyki-blogger.html ярлыков и их условий, но на пальцах не объяснишь.
Galina Meleh
Здравствуйте! Может быть вы поможете начинающему блогеру? Я хочу вставить в блог гаджет, чтобы он отражал мою подписку "Этот день в истории" (http://subscribe.ru/archive/day.this/201508/30100037.html) и чтобы был показан картинкой.Наверно, я очень путано и не профессионально объяснила, но может вы мне сможете помочь?
http://bibliovesti.blogspot.com
NMitra
Здравствуйте, вам нужно обратиться к авторам http://citycat.ru/historycentre/ за консультацией и разрешением использовать материал. Без него это будет нарушением авторских прав. Извините.