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


Доброго времени суток, всем читателям и гостям блога. В первую очередь хочу поблагодарить всех, кто  присоединился к моим шпаргалкам и стал постоянным читателем. Поверьте, мне очень приятно.
Сегодня продолжу тему, как можно поменять  скучноватый гаджет <обо мне>, который присутствует в шаблоне блоггер. Вернее, мы его уберём и сделаем похожий с помощью гаджета 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 :



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

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

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

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

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

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

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

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

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

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

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

Пользовательский поиск
Foto Saya
My Photo