Как просто изменить гаджет об авторе блога.

Доброго времени суток, всем читателям и гостям блога. В первую очередь хочу поблагодарить всех, кто  присоединился к моим шпаргалкам и стал постоянным читателем. Поверьте, мне очень приятно.

Сегодня продолжу тему, как можно поменять  скучноватый гаджет <обо мне>, который присутствует в шаблоне блоггер. Вернее, мы его уберём и сделаем похожий с помощью гаджета HTML/JavaScript. Но выглядеть он будет интереснее. Для чего нужна блогу страница об его авторе разобрались не так давно. Для тех, кто не читал шпаргалку советую перейти по ссылке

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



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

Для начала нам нужно выбрать фотографию. И узнать ссылку на неё. Я изображения храню на сайте http://radikal.ru/. И оттуда беру ссылки.

После этого, в блокноте или черновике Blogger копируем и вставляем это код-

<p align="center"><img alt="ваше имя, фамилия,ник" src="указываете здесь путь к фото(адрес фотографии)"style="border-radius: 100%;" border="0" /></p>

Где выделено красным, вписываем ваше имя, синим путь к фотографии. У меня в коде присутствует, выделенное зелёным - style="border-radius: 100%;"-. Это я сделала для того, чтобы моё фото было круглой формы. Если вам не нужно округление фотографии просто уберите эту часть  кода.

Затем нам нужно воспользоваться вот таким кодом

<p>анонс о себе <a href="путь к странице о себе">подробнее</a> &raquo;</p>

Здесь всё должно быть понятно. Для тех кто пока не знает, где этот путь к странице о себе, прочитайте шпаргалки как сделать подстраницы в блоге и о страницах блога. Ну и подробно меняйте на своё усмотрение: ещё обо мне, узнать больше и т.д.

Далее, мы вставляем блок иконок соц сетей. В интернете этих кодов достаточно много. Можете взять и с моего блога в шпаргалке. Или оставьте такие, как у меня, только поменяйте адреса на свои. Читаем здесь. Если  вам не нужны в гаджете обо мне такие кнопочки,  просто остановитесь на первых двух кодах.

И ниже код блока иконок соц. сетей. В моём случае вот такой

<style>p#socialicons img {
    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

</style>
<center><p id="socialicons">
    <a href="https://www.facebook.com/viktoria.barad">
<img border="0" src="http://4.bp.blogspot.com/-U4-lm-VG-Rs/UAFFARjvXBI/AAAAAAAACKg/5eXZk3g6JTw/s1600/facebook.png" /></a>
    <a href="https://twitter.com/vikserv">
<img border="0" src="http://1.bp.blogspot.com/-v1j9lvjPaks/UAFFDtW2I2I/AAAAAAAACK4/7ux4VptLkk0/s1600/twitter.png" /></a>
    <a href="https://plus.google.com/u/0/102675035951405180575">
<img border="0" src="http://1.bp.blogspot.com/-TatTDxZ7QlQ/UAFFBg8qgCI/AAAAAAAACKo/_iyTQXBwEEw/s1600/googleplus.png" /></a>
 
</p></center>


В итоге у нас должен получиться вот это.

<p align="center"><img alt="Вика Барад" src="https://lh3.googleusercontent.com/-K-TCpC5V_6k/AAAAAAAAAAI/AAAAAAAACYw/p6Sw4uhup7E/s120-c/photo.jpg"style="border-radius: 100%;" border="0" /></p>
 <p>Меня зовут Виктория . В данный момент живу на Южном Урале. Почему в данный? Просто столько по жизни пришлось менять место жительства, что уже и не верится, что причалила насовсем. <a href="http://hpargallka.blogspot.ru/p/blog-page_29.html">подробнее</a> &raquo;</p>

<center><span style="font-weight:bold;">присоединяйтесь ко мне</span></center> 


<style>p#socialicons img {

    -moz-transition: all 0.8s ease-in-out;
    -webkit-transition: all 0.8s ease-in-out;
    -o-transition: all 0.8s ease-in-out;
    -ms-transition: all 0.8s ease-in-out;
    transition: all 0.8s ease-in-out;
}
p#socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

</style> 

<center><p id="socialicons">
    <a href="https://www.facebook.com/viktoria.barad">
<img border="0" src="http://4.bp.blogspot.com/-U4-lm-VG-Rs/UAFFARjvXBI/AAAAAAAACKg/5eXZk3g6JTw/s1600/facebook.png" /></a>
    <a href="https://twitter.com/vikserv">
<img border="0" src="http://1.bp.blogspot.com/-v1j9lvjPaks/UAFFDtW2I2I/AAAAAAAACK4/7ux4VptLkk0/s1600/twitter.png" /></a>
    <a href="https://plus.google.com/u/0/102675035951405180575">
<img border="0" src="http://1.bp.blogspot.com/-TatTDxZ7QlQ/UAFFBg8qgCI/AAAAAAAACKo/_iyTQXBwEEw/s1600/googleplus.png" /></a>
    
</p></center>


Я выделила в нём тот участок кода, который отвечает за блок кнопок. Всё, что получилось у нас копируем. Заходим ДИЗАЙН - ДОБАВИТЬ ГАДЖЕТ -HTML/JavaScript .
Вот так мы и  поменяем гаджет об авторе блога на более симпатичный. Тем самым предадим блогу некую уникальность.

Сегодня больше не буду занимать ваше драгоценное время. Пожелаю всем  хороших выходных.



хотите оформить подписку на новые шпаргалки

введите пожалуйста свой email :



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

  1. Вика, привет! А кнопочку ВКонтакте как добавить в этот список?
    И что за человечек поселился у тебя?

    ОтветитьУдалить
  2. Привет,Ирина. С кнопочкой ВК надо потрудиться немного. Тут можно просто сделать кнопки от яндекс и поменять выделенный код на код Яндекса. А вообще это кропотливая тема. Подобные кнопки можно все менять на свои , пока пост в проекте. Пока у меня до этого ни как не дойдёт. Для контакта можно просто вывести отдельным виджетом.
    А человечек вдруг и возьмись ниоткуда.

    ОтветитьУдалить
  3. Ирина у тебя ведь канал есть на ютбе, можно, что-то заменить и поставить эдентичную кнопку. Посмотри здесь http://smotritetyt.blogspot.ru/ , как она выглядит в самом верху. Если что -в личку.

    ОтветитьУдалить
  4. Ну, мастерица! У меня глаза разбежались))) Пойду соберу их в кучу, подумаю и напишу...

    ОтветитьУдалить
  5. Давай Ирина. Удачи тебе.

    ОтветитьУдалить
  6. Интересный у вас блог. удачи, и побольше читателей:)

    ОтветитьУдалить
  7. Спасибо, Алекс за оценку и пожелания.

    ОтветитьУдалить
  8. а у меня почему то фото в кружочке получается на пол страницы( что делать?

    ОтветитьУдалить
  9. Аня, нажмите на вашу фотографию в гугл+. Кликнете по ней правой кнопкой мыши, выберите копировать URL картинки вот этот адрес и вставляйте в код. Вы видимо взяли слишком большую фотографию.

    ОтветитьУдалить
  10. Спасибо за статью. Я наконец заменила гаджет Обо мне на более интересный. Заходите посмотреть https://zarabotoknev.blogspot.ru/

    ОтветитьУдалить
  11. Пожалуйста Татьяна. Может ещё вот такое о себе любимой пригодится. http://www.shpargalochki.ru/2015/10/informacija-ob-avtore-bloga-pod-kazhdym-soobshheniem-v-Blogger.html
    Есть ещё более продвинутый вариант, но пост пока ещё в черновиках висит.

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

Пользовательский поиск