Любая картинка в верхних углах блога

29.01.2014

К новогодним праздникам мы с Вами украшали блог, например, колокольчиками. Но впереди будут еще праздники: День Святого Валентина, 23 февраля, 8 марта... И в наш любимый Blogger можно снова добавить любое изображение в верхнюю часть блога - в уголки.
Оказывается, сделать это несложно. Я попробовала - получилось. По инструкции ниже, думаю, и Вы легко сделаете Ваш блог уникальным.

Для примера можете сразу попробовать вставить в гаджет HTML/JavaScript для добавления сердечка в верхний левый угол блога получившийся у меня код:
<img src="https://lh6.googleusercontent.com/-OFEE_KioLxE/Uuf9eNAeYmI/AAAAAAAADR0/obY2tElu2Gc/s128/%D1%81%D0%B5%D1%80%D0%B4%D1%86%D0%B5%20%D0%B8%D0%B7%20%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2_%D0%BB%D0%B5%D0%B2..png" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/>

А теперь можете поэкспериментировать сами. Для начала нужно определиться с тематикой картинки. Поскольку не за горами День всех влюбленных, я покажу на примере добавления сердечка в левый уголок блога.

1. Находим нужную картинку, например, при помощи сервиса Яндекс.Картинки. Написав в строку поиска тему, в настройках поиска выбираем файл - PNG, чтобы картинка была на прозрачном фоне.


2. Теперь выбираем нужный размер. Если колокольчики были примерно 120х120 пикселей, то из имеющихся в Яндекс.Картинках сердечек я выбрала 150х131. Смотрите по размеру шапки Вашего блога.


3. Сохраняем картинку на свой компьютер.
4. Заходим в свой гуггл-аккаунт и затем в веб-альбомы Picasa
5. Загружаем картинку в любой свой альбом:

     1) Нажимаем Добавить фотографии

     2) Перетаскиваем картинку в окно загрузки или выбираем картинку на компьютере:
        

6. После добавления изображения в Picasa нажимаем правую кнопку мыши и копируем URL картинки:


7. Открываем на компьютере приложение Блокнот и вставляем скопированный URL. 

8. Добавляем перед URL код <img src="
 
Сразу после URL (без пробелов) добавляем следующий код: 
" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/> 


В итоге должен получиться код:
<img src="URL картинки" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/>

9. Теперь можно зайти в админку Blogger'а - в Дизайн блога и добавить гаджет HTML/JavaScript
В поле Содержание вставляем полученный выше код. 
Название гаджета можно оставить пустым.

Сохраняем гаджет. 

Теперь о том, если свою картинку Вы хотите вставить в правый верхний угол блога. Все шаги те же самые. Только в итоговом коде заменяем left на right.

Кстати, картинку для левого или правого угла можно легко отразить в Microsoft Office Picture Manager, нажав Изменить рисунки >> Поворот и отражение.


Для добавления в верхнюю часть блога двух картинок (справа и слева) код будет такой:

<img src="URL картинки слева" style="position:fixed; top: 0px;left:0px;border:none;z-index:5;"/><img src="URL картинки справа" style="position:fixed; top: 0px;right:0px;border:none;z-index:5;"/> 

! Если картинка слева и справа будет одна и та же, то и URL будет одинаковый. Если же Вы захотите картинки в зеркальном (отраженном) варианте, то не забудьте вторую картинку также загрузить в веб-альбом Пикаса и затем там уже скопировать URL картинки, и вставить в код.


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

  1. Огромное спасибо! очень полезная информация и уже воспользовалась ей!

    ОтветитьУдалить
  2. Спасибо))))) мне понравилось)))

    ОтветитьУдалить
  3. Люблю украшать свой блог и " наряжать". Очень много полезной информации у вас взяла. Спасибо большое.

    ОтветитьУдалить
  4. Мария! Я начинающий блоггер ,учусь на ходу,подписана как читатель на ваш блог. Обязательно воспользуюсьтаким украшением. По ходу разрешите задать вопрос. С ноября у нас интерфейс Гугл не показывает Picasa, есть Фотографии.Там все мои картинки с блога, только когда копируешь url ссылка например такая https://lh6.googleusercontent.com/Cuh9yOXEw5lQHnmqs1G_5lz2PJeHaHBPNKYO3z9Uqbk=s143-p-no
    нет названия картинки и расширения.
    Когда беру url картинки на блоге-http://1.bp.blogspot.com/ и т.д.Эти картинки загружала с компа,где же их хранит блогспот?
    В интернете все ссылаются на Picasa, очевидно, ее уже нет?
    Буду очень благодарна за ответ!

    ОтветитьУдалить
    Ответы
    1. Здравствуйте, Нина! Недавно сама заходила в Picasa. Все картинки там есть в моем аккаунте. Может, эта статья Вам поможет: http://samasajt.blogspot.ru/2013/01/blogger.html

      Удалить
    2. Здравствуйте, Мария! Я в замешательстве.Статью читала, ссылку видела, но она ведет в фотографии Google-аккаунта.Может потому что никогда не работала с Picasa и у меня там нет альбомов.Раньше в продуктах Google я видела пиктограмму Picasa, сейчас нет.Когда я перехожу по ссылке в вашей статье, попадаю опять в фотографии g+ .Скачала программу, боюсь нажимать "синхронизировать с интернет", мои фото будут всем доступны?Надо поискать обучающие материалы, пка каша в голове с этой программой. Обратила внимание, что в статье у вас картинка лежит в g+

      Удалить
    3. Скорее всего это из-за того, что Вы объединили профиль Blogger и профиль Google+, а еще нет. И все картинки теперь у Вас там. Про Picasa вот здесь есть полезная информация: https://support.google.com/picasa/?hl=ru

      Удалить
    4. у меня та же проблема.А сайт ваш мне очень нравится,спасибо за кучу полезной информации.

      Удалить
  5. Благодарю. Очень помогло.

    ОтветитьУдалить
  6. Щиро дякую Вам за корисні поради.

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

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

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