Георгиевская лента для блога на Blogger

08.05.2013

И снова приближается праздник Победы - 9 мая. Каждый год с волнением жду этот день. Чтобы вспомнить прадеда и двух моих дедов, которые участвовали в В.О.в. и, слава Богу, вернулись домой живыми. Сейчас их уже нет с нашей семьей, но память о них и благодарность за подвиг живет в душе... 

В честь всех ветеранов войны, уважения к ним, можно разместить на своих блогах Георгиевскую ленточку.



Предлагаю несколько вариантов Георгиевской ленты для Blogger'а.

1. Красивая веточка, обвитая Георгиевской ленточкой 
 

     Код ленты 1: 
<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a href="http://samasajt.blogspot.com/2013/05/georgievskaya-lenta-dlya-bloga.html" target="_blank"> <img border="0" src="http://1.bp.blogspot.com/-Gz57yRAlZ-A/UYlgoZvafyI/AAAAAAAAChI/j_m50RIM1jk/s1600/9maya_vetka.png" alt="Георгиевская ленточка"/></a>
</div>

2. Еще один вариант ленточки с веткой

   Код ленты 2:

<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a href="http://samasajt.blogspot.com/2013/05/georgievskaya-lenta-dlya-bloga.html" target="_blank"> <img border="0" src="http://3.bp.blogspot.com/-RpQn6fvuqlA/UYlgoCNZmVI/AAAAAAAAChE/4ExDyCrpD4c/s1600/9maya_vetka_1.png" 
alt="Георгиевская ленточка"/></a></div>

3. Широкая Георгиевская лента
 Код ленты 3:
<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a href="http://samasajt.blogspot.com/2013/05/georgievskaya-lenta-dlya-bloga.html" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-tv53faeAigs/UYlgoPyDWLI/AAAAAAAAChA/4jp-ptqfAtk/s1600/georgievskaya-lenta.5.png" 
alt="Георгиевская ленточка"/></a>
</div> 

4. Ленточка, завязанная в виде бантика


  Код ленты 4: 

<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a href="http://samasajt.blogspot.com/2013/05/georgievskaya-lenta-dlya-bloga.html" target="_blank"><img border="0" src="http://1.bp.blogspot.com/-b40LBDxzIQM/UYlgowSna9I/AAAAAAAAChM/Xr9kqmWKP70/s1600/georgievskaya-lenta.6.png" alt="Георгиевская ленточка"/></a></div>


5. Георгиевская лента - петля

     Код ленты 5:

<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">
<a href="http://samasajt.blogspot.com/2013/05/georgievskaya-lenta-dlya-bloga.html" target="_blank"><img border="0" src="http://4.bp.blogspot.com/-EEfO0UBXTco/UYlgpMAK8jI/AAAAAAAAChY/m0vuavhRKBE/s1600/georgievskaya-lenta_4.gif" alt="Георгиевская ленточка"/></a></div>


6. Анимированная Георгивская ленточка для блога

   Код ленты 6: 

<div id="georgyevskaya-lenta" style="position:absolute;  top:0; left:0; z-index:999999;">
<a href="http://samasajt.blogspot.com/2013/05/georgievskaya-lenta-dlya-bloga.html" target="_blank"><img border="0" src="http://3.bp.blogspot.com/-mbdJ2A53QdI/UYlgpZpV8SI/AAAAAAAAChQ/WzIXveSThu4/s1600/georgievskaya-lenta_7.gif" alt="Георгиевская ленточка"/></a>
</div>


Вот инструкция по новому интерфейсу Blogger - как украсить блог Георгиевской лентой.

1. В админ-панели блога выбрать пункт "Тема"



2. Далее справа на кнопке "Настроить" нажать на треугольник




В выпадающем меню выбрать "Изменить "HTML"

3. Поставить курсор мыши внутри рамки с кодом блога и нажать на клавиатуре клавиши "Ctrl+F", написать в строке поиска </header> и нажать на клавиатуре кнопку Enter



4. Вставить один пробел после <div> перед </header>. И вставить код ленты, скопированный выше. Например, я добавила анимированную Георгиевскую ленту № 6


Нажать на пиктограмму в виде глаза для просмотра страницы.
 Если все хорошо, то нажать на значок дискеты для сохранения изменений.


====================================================
Инструкция по "старому" интерфейсу Blogger:
  1. В настройках блога выбрать Шаблон > Изменить HTML


2. В списке виджетов выбрать Header1


3. Найти немного ниже код </header>
4. Вставить один пробел после <div> перед </header>.
      И вставить код ленты, скопированный выше.
 5. Нажать кнопку Просмотреть шаблон

6. Если лента появилась в шапке блога (первые пять лент должны появиться справа, а шестая анимированная - слева), и Вас все устраивает - нажимаем Сохранить шаблон.

Если хотите поменять Георгиевскую ленту на другую - просто удалите старый код и вставьте новый или нажмите кнопку Отменить все изменения.

! Можно изменить расположение ленты в шапке блога - справа или слева. 

Ленты с 1-й по 5-ю будут отражаться в блоге слева. Если нужно справа - измените слово right на left 
<div id="georgyevskaya-lenta" style="position:absolute;  top:0; right:0; z-index:999999;">....
И наоборот в 6-й ленточке. 

P. S. Не забудьте с друзьями поделиться информацией в статье. Пусть и они украсят свой блог на Blogger'е Георгиевской лентой к 9 мая.

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

  1. Спасибо большое за Георгиевскую ленточку! Уже появилась она в моём блоге! С Днём Победы! Мира Вашему дому!

    ОтветитьУдалить
  2. Спасибо за пост. Впервый раз делала и все получилось!!! и как раз к празднику.

    ОтветитьУдалить
  3. Спасибо огромное! Сделала перепост, чтобы больше блогеров смогли добавить Георгиевскую ленточку на блог!

    ОтветитьУдалить
    Ответы
    1. Вам спасибо! Рада, что статья оказалась полезной :)

      Удалить
  4. Спасибо! Все очень подробно и понятно!

    ОтветитьУдалить
  5. Очень рада, что помогла Вам )))

    ОтветитьУдалить
  6. Анонимный21.04.2017, 12:47

    Благодарю.

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

Kwork.ru - услуги фрилансеров от 500 руб.

Загляните и на другие страницы ^