Уважаемые читатели и друзья. Представляю вашему вниманию стильный и развёрнутый блок профиля автора блога. Конечно, можно просто изменить уже готовый блоггеровский стиль гаджета об авторе блога. Можно сделать стильную карточку профиля в блоге. Но вариант, о котором пойдёт сегодня речь, более интересен и более содержателен. 

Его даже можно разместить на странице "Об авторе" которая непременно должна быть на каждом сайте. Ведь авторские страницы создают доверие у посетителей к вашему сайту.

Из достоинств такого авторского блога, помимо информации

1. Код на содержит файл JQuery и работает без кода JavaScript
2. Лёгкая установка
3. Быстрая загрузка
4. Работает на любом браузере.

 

Посмотрите на этой странице пример такого авторского блока.

Если решите установить блок автора на страницу, приступаем.

Сначала скопируйте приведённый ниже код в черновик или блокнот и разберёмся с настройками.

<style type="text/css">

#authorBox {width:760px;margin:0 auto;padding:20px;display:table;background-color:#fafafa;border-bottom:4px solid #75C3B7;font-family:sans-serif;}

#authorBox h2.widgetTitle{font-size:16px;padding:10px 0 0 0;color:#57BCAC;display:block;margin:0;text-align:center;}

#authorBox .authorInfo_widget{float:left;width:260px;padding:30px;text-align:center;}

#authorBox .authorInfo_widget .profilePhoto{text-align:center;}

#authorBox .authorInfo_widget .profilePhoto img {width:160px;min-height:160px;object-fit:cover;border-radius:100%;-webkit-border-radius:100%;-moz-border-radius:100%;background:#FFF;padding:5px;border:2px inset #e8e8e8;}

#authorBox .authorInfo_widget .profileDataBlock h3{color:#75c3b7;font-weight:normal;font-size:20px;margin:10px 0 0 0;}

#authorBox .authorInfo_widget .profileDataBlock h3 a{color:#75c3b7;text-decoration:none;}

#authorBox .authorInfo_widget .profileDataBlock p{font-size:14px;}

#authorBox .authorInfo_widget .profileDataBlock img{width:200px;}

#authorBox .authorDetail_widget{float:left;width:420px;}

#authorBox .authorDetail_widget .widgetContent{margin:10px;background-color:#FFFFFF;webkit-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);-moz-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);-o-box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);box-shadow:1px 1px 2px 1px rgba(0,0,0,0.222);}

#authorBox .authorDetail_widget .widgetContent p {padding:10px;font-size:14px;text-align:center;margin:0;}

/*--------социальные сети ------*/

#authorBox .authorDetail_widget .socialsharing{height:60px;text-align:center;}

#authorBox .authorDetail_widget .socialsharing a {display:inline-block;height:50px;width:50px;padding:0 5px;background:transparent url(https://4.bp.blogspot.com/-UTkPtPsw9bY/UKRoAPEVZ9I/AAAAAAAAFnM/qDPvUxpNfqM/s1600/Sharing+buttons.png) no-repeat;-webkit-transition:ease-in 0.2s all;-moz-transition:ease-in 0.2s all;-o-transition:ease-in 0.2s all;-ms-transition:ease-in 0.2s all;transition:ease-in 0.2s all;cursor:pointer;}

#authorBox .authorDetail_widget .socialsharing a.twitter {background-position:0px -290px;}

#authorBox .authorDetail_widget .socialsharing a.twitter:hover {background-position:0px -232px;}

#authorBox .authorDetail_widget .socialsharing a.facebook {background-position:0px -406px;}

#authorBox .authorDetail_widget .socialsharing a.facebook:hover {background-position:0px -348px;}

#authorBox .authorDetail_widget .socialsharing a.rss {background-position:0px -174px;}

#authorBox .authorDetail_widget .socialsharing a.rss:hover {background-position:0px -116px;}

</style>

<div id="authorBox">

<div class="authorInfo_widget">

<h2 class="widgetTitle">Привет, это я...!!!</h2>

<div class="profilePhoto">

<img alt="Вика Барад" title="Вика Барад" src="https://lh3.googleusercontent.com/ogw/ADGmqu__EDi1uSTcIBbRzsW0jocY-xG8rTqFA6x4ma-YhA=s83-c-mo">

</div>

<div class="profileDataBlock">

<h3><a href="######" title="Вика Барад">Виктория Барад</a></h3>

<p>Я проживаю там где горы, на самой границе Европы и Азии</p>

<img alt="Вика Барад" title="Вика Барад" src="https://1.bp.blogspot.com/-V46TIqCJWXY/V4NDPQdKw2I/AAAAAAAAE18/71fLZqll5EYPfW0rObGYLVvoEgs4uHQZACKgB/s200/%25D0%25BF%25D0%25BE%25D0%25B4%25D0%25BF%25D0%25B8%25D1%2581%25D1%258C.png" >

</div>

</div>

<div class="authorDetail_widget" >

<div class="widgetContent">

<h2 class="widgetTitle">Давайте знакомиться</h2>

<p>Уже​ ​много ​​лет​ ​я​ ​использую платформу​ ​Blogger.​ ​Имею​ ​опыт​ п​о​ ​настройке,​ ​дизайну,​ в​едению и​ ​ ​оптимизации​ ​блога.​

О​ ​чём ​​подробно​ ​делюсь​ ​в​ ​своих публикациях

На​ ​моем​ б​логе​ ​вы​ ​найдёте​ ​массу ​​бесплатной​ ​и​ ​ценной​ ​информации, практических​ ​приемов,​ ​которые​ ​позволят​ ​правильно​ ​и​ ​быстро​ ​сделать​ ​все настройки своего блога.

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

Перебрала​ массу​ ​бесплатных платформ​ ​пока​ ​не​ ​пришло​ ​полное​ ​понимание,​ ч​то​ ​платформа​ ​ ​Blogger​ с​амая подходящая​ ​для​ ​этого.​

Поэтому​ х​очу​ ​поделиться​ ​с​ ​вами​ ​и​ ​дать​ ​полное руководство​ ​по​ ​созданию​ ​блога​ ​на​ ​этой​ ​платформе​ ​и​ ​настройкам​ ​блога. 

Сейчас у меня несколько блогов и очень много друзей и подписчиков. Присоединяйтесь и вы, будем общаться, дружить. Блог ​​—​ ​это​ ​крутой​ ​личный​ ​блокнот,​ ​который​ ч​итают ​​другие​ ​люди.​ ​Именно наличие​ ч​итающей​ ​и​ о​бсуждающей​ а​вторские​ ​мысли​ ​аудитории​ ​приносит ни ​​с​ ​чем​ ​не​ ​сравнимое​ у​довольствие. 

</p>

</div>

<div class="widgetContent">

<h2 class="widgetTitle">мой блог и странички в социальных сетях</h2>

<div class="socialsharing">

<a class="rss" href="http://www.shpargalochki.ru/" rel="external nofollow" target="_blank"></a>

<a class="facebook" href="https://www.facebook.com/viktoria.barad " target="_blank"></a>

<a class="twitter" href="https://twitter.com/VikserV" rel="external nofollow" target="_blank"></a>

</div>

</div>

<div style="clear:both:"></div>

</div>

</div>

Настройки авторского профиля

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

2. В строке жёлтого цвета можно дать ссылку на ваш профиль Блоггер..

3. Розовый цвет, это подпись ваша. В принципе её можно убрать или вставить что - то ещё. Я же применила картинку подпись и вставила её URL. Как её сделать прочитайте в этой статье. 

4. Синий цвет  -  адреса ваших страничек в социальных сетях. Можно дать ссылку на подписку RSS или на главную страницу. 

5. Все текстовые поля заполняйте своим содержанием. 

С цветом тоже можно поиграться. Меняйте все свойства background, background-color на желаемые.

Готовый код устанавливаем на нужную страницу, перейдя в формат HTML.

Всё просто, а в итоге имеем полностраничный стильный блок об авторе. 

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

Добра всем и до встречи.

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

Введите Ваш email

Подробнее...

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

Многие уже вполне привыкли к нему, но эксперименты разработчики продолжают и это опять  коснулось ссылок на картинки. Ну обо всём по порядку.

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

При вставке изображения, если мы перейдём в режим HTML увидим , что ссылка состоит из двух ссылок. Извините за масло масляное. Ну вот так она выглядит (показываю на примере первой картинки)

Сам код такой 

<a href="https://1.bp.blogspot.com/-hkse5CgJuAk/X7PUYXxcytI/AAAAAAAAOVk/bgb_fH_po9Mt-bZDOmVDELMVuf2mQNC5wCLcBGAsYHQ/s369/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B8.jpg" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="196" data-original-width="369" src="https://1.bp.blogspot.com/-hkse5CgJuAk/X7PUYXxcytI/AAAAAAAAOVk/bgb_fH_po9Mt-bZDOmVDELMVuf2mQNC5wCLcBGAsYHQ/s16000/%25D1%2581%25D1%2581%25D1%258B%25D0%25BB%25D0%25BA%25D0%25B8.jpg" /></a>

То, что отмечено розовым нужно убирать. Остаться должна только синяя часть кода. И вот представьте сколько за это время картинок у вас блоге и сколько таких лишних ссылок, если этого не делать. 

В самом начале мы просто нажимали на соответствующую иконку в редакторе.

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

И вот чудненьким образом эта функция, убрать ссылку с изображения, отыскалась. 

Если вы вставляете изображение в блог, нажмите на него левой кнопкой и обратите внимание на отмеченные красным иконки в панели редактора. А именно на подчёркнутый текст. Смотрим скриншот

Вообще не совсем понятна эта функция для картинки. Так вот там и оказалась зарыта эта опция - убрать ссылку. 

Но чтобы ей воспользоваться нужно щёлкать на картинку. Потом рядом с ней на пустое поле около неё, потом на иконку подчёркнутый текст. Появляется строка с перечёркнутой иконкой ссылки. Жмём на неё и вуаля. Лишний ссылки нет. 

Бегите в режим HTML и убедитесь, что эта манипуляция сработала. Это же надо было постараться так намудрить. Хочется надеяться, что эта информация поможет вам избавиться от не нужных ссылок на изображения в блоге.  Так можно редактировать и уже опубликованные статьи, а именно картинки в них.

P. S. Моя коллега по блоговедению Ольга Протасова, обратила внимание, что не сохраняется гаджет страницы в макете блога. У неё же перестала работать форма связи. А мне через форму связи просто спам пачками приходит. Не успеваю удалять. И ещё при оформлении ссылки в тексте, окно трясётся "в судорогах", еле успеваешь поймать строку. Как у Вас?

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

Введите Ваш email

Подробнее...

Привет, друзья. Хочу поделиться с вами как сделать ваши веб-сайты в настольные приложения Chrome.  Это поможет более разумно организовать рабочее место и даст быстрый доступ к любому нужному вам ресурсу. Не знаю как в других, но с помощью браузера Chrome это сейчас достаточно просто реализовать. 

Пост подкорректирован и обновлён. Буквально на днях два моих читателя задавали этот вопрос. Всего несколько несложных шагов. Может ещё кому пригодится.

В правом верхнем углу браузера Хром открываем меню и выбираем опцию Дополнительные инструменты. Из открывшегося списка нам нужна строка Добавить на рабочий стол. 

Я покажу на примере почты Gmail. Можно вывести любой продукт Гугл, тот же Блоггер. Тогда в панель инструментов будет просто зайти сразу по иконке с рабочего стола.

В поле вводим нужное название и поставим галочку Открыть в отдельном окне. Добавить.

Вернитесь к рабочему столу и вы увидите иконку вновь созданного приложения. Его обычным способом можно закрепить на панели задач для быстрого доступа к нему. Можно таким же образом сделать веб-приложение из любого другого нужного вам сайта. Очень удобно и советую вам попробовать. Такое приложение прекрасный помощник для владельцев планшетов под управлением Windows.
.
Спасибо всем за визит и до встречи.

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

Введите Ваш email

Подробнее...

Доброго времени суток, друзья. Этот эффект увеличительного стекла для картинок в блоге, который вам сегодня предложу, впишется в любой дизайн. Изображение будет увеличиваться при наведении курсора мыши. Сам эффект масштабирования будет плавным. Можно добавить неограниченное количество изображений на веб-страницу. Перемещение курсора от изображения мягко гасит увеличительное стекло, возвращая изображение в состояние по умолчанию.

Я очень много тестировала подобных эффектов, но все они в Блоггере отказывались работать. Вот не так давно нашла руководство по его созданию здесь, чем и делюсь сегодня с вами. 

Для просмотра результата в работе, как всегда, скопируйте код и установите его в этом редакторе. Ещё рабочий вариант на тестовом блоге в самом низу сайдбара. 

Код

<script type="text/javascript" src="https://code.jquery.com/jquery-2.0.0.min.js"></script><script type="text/javascript">

$(function() {

var native_width = 0;

var native_height = 0;

var mouse = {x: 0, y: 0};

var magnify;

var cur_img;

var ui = {

magniflier: $('.magniflier')

};

if (ui.magniflier.length) {

var div = document.createElement('div');

div.setAttribute('class', 'glass');

ui.glass = $(div);

$('body').append(div);

}

var mouseMove = function(e) {

var $el = $(this);

var magnify_offset = cur_img.offset();

mouse.x = e.pageX - magnify_offset.left;

mouse.y = e.pageY - magnify_offset.top;

if (

mouse.x < cur_img.width() &&

mouse.y < cur_img.height() &&

mouse.x > 0 &&

mouse.y > 0

) {

magnify(e);

}

else {

ui.glass.fadeOut(100);

}

return;

};

var magnify = function(e) {

var rx = Math.round(mouse.x/cur_img.width()*native_width - ui.glass.width()/2)*-1;

var ry = Math.round(mouse.y/cur_img.height()*native_height - ui.glass.height()/2)*-1;

var bg_pos = rx + "px " + ry + "px";

var glass_left = e.pageX - ui.glass.width() / 2;

var glass_top = e.pageY - ui.glass.height() / 2;

ui.glass.css({

left: glass_left,

top: glass_top,

backgroundPosition: bg_pos

});

return;

};

$('.magniflier').on('mousemove', function() {

ui.glass.fadeIn(100);

cur_img = $(this);

var large_img_loaded = cur_img.data('large-img-loaded');

var src = cur_img.data('large') || cur_img.attr('src');

// cur_img.data('large-img-loaded', true)

if (src) {

ui.glass.css({

'background-image': 'url(' + src + ')',

'background-repeat': 'no-repeat'

});

}

//if(!native_width && !native_height) {

if (!cur_img.data('native_width')) {

var image_object = new Image();

image_object.onload = function() {

native_width = image_object.width;

native_height = image_object.height;

cur_img.data('native_width', native_width);

cur_img.data('native_height', native_height);

//console.log(native_width, native_height);

mouseMove.apply(this, arguments);

ui.glass.on('mousemove', mouseMove);

};

image_object.src = src;

return;

} else {

native_width = cur_img.data('native_width');

native_height = cur_img.data('native_height');

}

//}

//console.log(native_width, native_height);

mouseMove.apply(this, arguments);

ui.glass.on('mousemove', mouseMove);

});

ui.glass.on('mouseout', function() {

ui.glass.off('mousemove', mouseMove);

});

});

</script>

<style type="text/css">

.glass {

width: 170px;

height: 170px;

position: absolute;

border-radius: 50%;

cursor: crosshair;

box-shadow:

0 0 0 7px rgba(255, 255, 255, 0.85),

0 0 7px 7px rgba(0, 0, 0, 0.25),

inset 0 0 40px 2px rgba(0, 0, 0, 0.25);

display: none;

}

.magnifying {

margin: 50px auto;

text-align: center;

padding: 20px;

border: none!important;

}

</style>

<div class="magnifying">

<img class="magniflier" src="https://1.bp.blogspot.com/-X9uDmnYMyR8/X6P73yoNKrI/AAAAAAAAOUE/AUzYaPQBDSgf6lYj0bCwpGdixNLig6shwCLcBGAsYHQ/s16000/%25D0%25BC%25D0%25BE%25D0%25BD%25D1%2580%25D0%25BE.jpg" width="160" />

</div>

Первую строку я отметила другим цветом. Это скрипт библиотеки jquery. Если вдруг код не будет у вас работать, эту строку нужно удалить. Подробнее про jquery читаем здесь.

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

Просто добавляйте новые классы div с другими адресами. 

На тестовом блоге, ссылка на который выше,  всё прекрасно разместилось в гаджете HTML/JavaScript. Так что,  в сообщениях блога такой вариант прекрасно устроится. Переходите в формат HTML в редакторе создания поста, в нужных местах пропишите 1 или несколько div ов с адресами картинок. А в конце сообщения, там же вставьте всю первую часть кода - JQuery, JavaScript и CSS3.

Собственно и ни каких хлопот, Нужны лишь адреса ваших изображений. Я пробовала очень много картинок - групповые фотографии, фото где не совсем видны мелкие детали. Реально получается просмотреть всё в увеличенном виде. Попробуйте.

Возможно вас заинтересует

Эффект увеличения миниатюр в блоге

Эффект света фонарика

На этом всё, спасибо вам за визит и до встречи.

 Получайте новые статьи прямо на почту

Введите Ваш email

Подробнее...

Привет, друзья. Как сделать разворачивающуюся открытку на чистом CSS, без подключения всяких библиотек и сторонних редакторов. Всё очень просто. Для начала вам нужно всего - то подобрать картинку, которая будет служить лицевой стороной открытки и придумать текст самого поздравления. 

Для разворота картинки используем свойство transform. повернём сам блок при нажатии на изображения и зададим эффект тени для оригинальности.

Посмотрите, что должно получится в итоге. Пример привожу с новогодней тематикой. Мало ли, может пригодится. Скопируйте приведённый ниже код и установите в этом редакторе, чтобы увидеть всё в работе.

<div class="card">

<div class="imgBox">

<div class="bark"></div>

<img src="https://1.bp.blogspot.com/-hvBM87LM5WI/X5mS9DQLo0I/AAAAAAAAOSQ/U60NbZNL9pMygsZVRrNkg4H5YxfBM9VFQCLcBGAsYHQ/s16000/%25D0%25B1%25D1%258B%25D0%25BA.jpg">

</div>

<div class="details">

<h4 class="color1">Дорогие друзья</h4>

<h4 class="color2 margin">С Новым годом</h4>

<p>Пожелаю в год Быка,</p>

<p>Взять удачу за рога,.</p>

<p>А плохому настроенью</p>

<p>Дать хорошего пинка!</p>

<p>Ценит Бык любовь и труд,</p>

<p>Пусть они не подведут,</p>

<p>Вам подарят много счастья,</p>

<p>А от бед уберегут!</p>

<p class="text-right">Ура, Ура, Ура!</p>

<p class="text-right">♥Вика Барад</p>

</div>

</div>

<style>body {

font-family: 'Indie Flower', cursive !important;

  background: #FDE3A7; 

margin: 0px;

padding: 0px;

}

::selection {

background: transparent;

}

h4 {

font-size: 26px;

line-height: 1px;

font-family: 'Amatic SC', cursive !important;

}

.color1{color:#1BBC9B}

.color2{color:#C0392B}

.card {

color: #013243;

position: absolute;

top: 50%;

left: 50%;

width: 300px;

height: 400px;

background: #e0e1dc;

transform-style: preserve-3d;

transform: translate(-50%,-50%) perspective(2000px);

box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 20px 0 60px rgba(0,0,0,.5);

transition: 1s;

}

.card:hover {

transform: translate(-50%,-50%) perspective(2000px) rotate(15deg) scale(1.2);

box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 10px 100px rgba(0,0,0,.5);

}

.card:before {

content:'';

position: absolute;

top: -5px;

left: 0;

width: 100%;

height: 5px;

background: #BAC1BA;

transform-origin: bottom;

transform: skewX(-45deg);

}

.card:after {

content: '';

position: absolute;

top: 0;

right: -5px;

width: 5px;

height: 100%;

background: #92A29C;

transform-origin: left;

transform: skewY(-45deg);

}

.card .imgBox {

width: 100%;

height: 100%;

position: relative;

transform-origin: left;

transition: .7s;

}

.card .bark {

position: absolute;

background: #e0e1dc;

width: 100%;

height: 100%;

opacity: 0;

transition: .7s;

}

.card .imgBox img {

min-width: 250px;

max-height: 400px;

}

.card:hover .imgBox {

transform: rotateY(-135deg);

}

.card:hover .bark {

opacity: 1;

transition: .6s;

  box-shadow: 300px 200px 100px rgba(0, 0, 0, .4) inset;

}

.card .details {

position: absolute;

top: 0;

left: 0;

box-sizing: border-box;

padding: 0 0 0 10px;

z-index: -1;

margin-top: 70px;

}

.card .details p {

font-size: 15px;

line-height: 5px;

transform: rotate(-10deg);

padding: 0 0 0 20px;

}

.card .details h4 {

text-align: center;

}

.text-right {

text-align: right;

}</style>

В участке кода, отмеченного жёлтым цветом, значение  background: #FDE3A7;  отвечает за фон всей страницы. Измените при желании. В целом этот участок просто можно удалить из кода, если захотите. Открытка будет на обычном фоне.

Голубой цвет  - это адрес самой картинки на обложке. Обратите внимание на размер обложки 

width: 300px; height: 400px; - такого размера должно быть изображение.

С размерами шрифта font-size:  тоже можно поиграться.

С текстом и заголовком справиться не составит труда. 

Вот такая раскрывающаяся открытка получается. 

Готовый код устанавливаем в формате HTML (знак карандашика слева) в нужном месте сообщения. 

В категории картинки можно посмотреть другие эффекты.

Желаю всем удачи и до встречи.

 Получайте новые статьи прямо на почту

Введите Ваш email

Подробнее...