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

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

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