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

Примерный вариант посмотрите выше. Использовать будем совсем стандартные стили, чтобы можно поиграться и создать любую надпись на любой вкус. Я всё пометила в самом коде. Для эффекта тени применим свойство text-shadow:, но это уже на Ваше усмотрение. В статье ваша анимированная подпись тоже был предложен интересный вариант, но всё же мы имели на входе картинку, что чуть - чуть, но влияет на загрузку в целом.

Этот код намного легче.


<style type="text/css">
.hbz-signature {
text-align: right; /* - расположение подписи- */
     font-size: 18px; /* - размер шрифта- */
     font-family: Papyrus,fantasy; /* - стили текста - */
 text-shadow: 1px 1px #732372, 1px -1px #732372, -1px 1px #732372, -1px -1px #732372, 3px 3px 6px rgba(0,0,0,.5); /* - цвет и размеры тени - */
     margin-top : 30px; /* - отступ - */
    color: rgb(49, 151, 116); /* - основной цвет текста - */
}

.hbz-signature span {
     font-size: 14px;
     vertical-align: top;
}
    </style>
 
<div class="hbz-signature">
Ваше имя</div>


Все настройки простые. Меняя отмеченные стили, есть возможность создать что - то совсем уникальное. Код устанавливаем в редакторе сообщения в режиме HTML. Чтобы постоянно не прописывать такой код в сообщении в Блоггере есть возможность установить его используя опцию шаблон сообщения в разделе настройки.

Вот и всё на сегодня. Всем добра и до встречи.

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Всем, доброго времени суток. Обращали ли вы внимание что на некоторых сайтах внешняя ссылка имеет рядом небольшую иконку. Это не просто момент оформления ссылок в блоге. Задачей этой иконки является индикация ссылки, ведущей на сторонний сайт.

внешняя ссылка


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

Хочу вам сегодня показать, как такое реализовать в Блоггере. Рассмотрим три варианта.

Вариант 1. Абсолютно все внешние ссылки будут помечены иконкой. Не только в сообщениях и на страницах, но и такие как на картинке ниже. Кстати, рекомендую для начинающих установить этот код на время, чтобы увидеть сколько ссылок уже есть в шаблоне на сторонние ресурсы. В статье убрать всё лишнее с главной страницы я писала об этом. Все они будут с иконкой.



внешние ссылки
Код такой. Устанавливается в разделе Тема перед строкой </b:skin>

a[href^="http://"]:not([href*="prostotestblog.blogspot.ru"]):after,
a[href^="https://"]:not([href*="prostotestblog.blogspot.ru"]):after,
a[href^="ftp://"]:not([href*="prostotestblog.blogspot.ru"]):after {
content: "" url('https://webliberty.ru/wp-content/uploads/2014/12/external.png');
padding-left:5px;
}


В строчки отмеченные бежевым цветом, напишите адрес своего блога. Зелёным - адрес иконки. Можете свою подобрать. Но это обычно стандартный значок.

Вариант 2. Внешние ссылки будут помечены иконкой только на страницах сообщений.

иконка ссылки


Код. Он устанавливается тоже во вкладке Тема, но перед закрывающимся тегом перед </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
/*<![CDATA[*/
.post-body a[href^="http://"]:after,
.post-body a[href^="https://"]:after {
  content: '';
  background: url("data:image/svg+xml;charset=utf8,%3csvg viewBox='0 0 24 24' width='16' height='16' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3e%3cg%3e%3cpath style='fill:%23e8554e' d='M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z'%3e%3c/path%3e%3c/g%3e%3c/svg%3e") no-repeat;
  background-size: 14px 14px;
  width: 14px;
  height: 14px;
  display: inline-block;
  margin-left: 3px;
  vertical-align: -2px
}
.post-body .tr-caption-container a:after,
.post-body .separator a:after,
.post-body a[href^="https://smotritetyt.blogspot.ru/"]:after,
.post-body a[href^="http:/smotritetyt.blogspot.ru/"]:after {
  content: '';
  background: 0 0;
  width: 0;
  height: 0;
  margin-left: 0
}
/*]]>*/
</style>
</b:if>


Жёлтым так же адрес вашего блога. А зелёным шестизначный цветовой код без символа #. Можно сделать иконку любого цвета. Воспользуйтесь этой таблицей.

Вариант 3. Можно оформить ссылки в одном конкретном сообщении.


Создаём класс external и зададим стили

<style>A.external {
    background: url(https://webliberty.ru/wp-content/uploads/2014/12/external.png) no-repeat 0 5px;
    padding-left: 13px;
   }</style>

<a href="адрес страницы, куда ведёт ссылка" class="external">название(анкор ссылки)</a>


Для расположения иконки справа от текста, следует заменить у свойства background значение 0 на 100% и вместо padding-left прописать padding-right. 

Устанавливается в режиме HTML в редакторе в нужное место.

Выбор есть. Дело за вами. Всем добра и до встречи. 


👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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

рамка для текста


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

В Блоггере реализуется достаточно просто. В редакторе сообщений в режиме HTML.

Наведите на следующий абзац курсор, чтобы увидеть пример такой раздвижной рамки.


Lorem ipsum dolor sit amet, vim nemore conceptam id, an has iusto paulo omittam. Pro eu legere scripserit! Ad magna iisque consequuntur mei, laudem prompta prodesset ad eum, ut illud facilisi assueverit usu? Cu quas aeque per. Praesent philosophia eum ex, vel noster consequat conceptam te! Eu graeci legimus quo, an nibh tractatos eos, usu suscipit tractatos ei.

Код

<style>.item{width:90%;margin:auto;position:relative;padding:20px;}
.item:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
.item:hover:after{border:5px solid red;position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}</style>


<div class="item">
Здесь участок текста, который нужно оформить в рамку.
</div>

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





Код такой

<style>.item1{width:50%;margin:auto;position:relative;padding:20px;}
.item1:after{display:block;content:"";width:0;height:100%;transition:all .5s linear;left:50%;right:50%;}
.item1:hover:after{border:5px solid Green;position:absolute;top:0;bottom:0;width:100%;left:0; right:0;}<style>


<br />
<div class="item1">
<img src="адрес изображения" />
</div>

Если предполагаете применять такой вариант раздвижной рамки для текста часто, будет лучше, если первый код CSS разместить непосредственно в Теме блога перед строкой ]]></b:skin>. Только уберите из него открывающийся и закрывающийся теги <style> и <style>.

Потом, там где нужно, в сообщении уже прописывать код HTML с нужным текстом.

Благодарю за визит и до встречи.

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Привет, друзья. А все ли возможности и особенности платформы  BlogSpot вы знаете? Сейчас столько появляется новых и интересных блогов на разные тематики, и найти нужные и интересные вам в сети очень трудно, если просто вводить поисковые запросы в браузере. Да и сам результат поиска зависит ещё и от поисковой системы.

как найти блоги

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

Поделюсь с вами как искать блоги по местоположению и по интересам. Как правило такая функция работает с ключевыми словами профиля пользователя в Блоггер. Когда мы заполняем свой профиль  - местоположение, интересы, книги, фильмы и прочее. Суть, я думаю, вы уловили. Не скучайте, сейчас повеселее будет.

Для поиска любого блога понадобится приведённый ниже URL

http://www.blogger.com/profile-find.g?t=l


Если сейчас ввести этот адрес в строку поиска то мы увидим пустую страницу

Но если мы добавим к этому адресу конкретный запрос, то увидим очень интересные вещи.

Найти блоги по определённой стране.

Добавим к вышеприведённому адресу вот такое расширение & loc0 = CountryCode

Чтобы было (попробуйте примеры ниже)

www.blogger.com/profile-find.g?t=l&loc0=RU - Россия
www.blogger.com/profile-find.g?t=l&loc0=UA - Украина
www.blogger.com/profile-find.g?t=l&loc0=US - США

И так для любой страны, только следует заменить двухбуквенный "CountryCod" кодом нужной страны и обязательно заглавными буквами. Можно посмотреть здесь.
Сейчас ещё более детально. Я хочу найти блоги по своей области (штату, краю и т.д)
Дописываем к коду

http://www.blogger.com/profile-find.g?t=l&loc0=RU&loc1=Chelyabinsk

Найти блоги по интересам

Тут всё немного проще. Нужен такой код
http://www.blogger.com/profile-find.g?t=i&q=KEYWORD

Вместо KEYWORD вставить ключевики. Например social, history, game, Blogger  и т.д.

Я ввела для интереса BLOGGER и увидела на второй странице свой профиль, да ещё несколько знакомых уже по интернету лиц.

Найти блоги по любимым фильмам, музыке, книгам


http://www.blogger.com/profile-find.g?t=m&q=название - по названию фильма http://www.blogger.com/profile-find.g?t=b&q=название - по названию книги
http://www.blogger.com/profile-find.g?t=s&q=название - по названию музыки


Попробуйте хотя бы этот пример http://www.blogger.com/profile-find.g?t=m&q=Любовь и голуби

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

Вот так, платформа блоггер упростила нам поиск нужных блогов по месту положения, интересам и ключевым словам. Теперь их легко можно найти в любом месте и в любое время.

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

Найти страницы, которые похожи или ссылаются на указанную
Поискать информацию в истории поиска
Применить поисковые операторы

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



👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


Всем, доброго времени суток. Хочу предложить вам сегодня поработать над дизайном гаджета популярные сообщения. Нам Блоггер предоставил такой , где отображаются самые читаемые посты блога. Можно с помощью стилей изменить его внешний вид. Так, чтобы было ни как у всех. 

В этом сообщении было 5 вариантов виджета популярных сообщений. Загляните по ссылке, возможно ещё что - то подберёте. Этот гаджет, о котором сегодня идёт речь, с нумерацией постов. Отображает миниатюру и название сообщения. При наведении курсора появляется анонс. Ну и конечно, эффект анимации делает его более привлекательным. Посмотрите ниже.

виджет популярных постов
Рабочий вариант на тестовом блоге


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

Сейчас идём во вкладку Тема и находим строку ]]></b:skin>. Прямо над ней устанавливаем следующий код

.PopularPosts ul,.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{list-style:none;border:none;background:none;outline:none;margin:0;padding:0} .PopularPosts ul{list-style:none;font-family:&#39;Oswald&#39;,Sans-Serif;font-size:13px;color:#919392;margin:.5em 0} .PopularPosts ul li img{display:block;width:70px;height:70px;float:left;margin:0 15px 0 0; border: 1px solid silver;padding: 2px;} .PopularPosts ul li{background-color:#eee;counter-increment:num;position:relative;margin:0 10% 0 0;padding:10px} .PopularPosts ul li:before,.PopularPosts ul li .item-title a{font-weight:700;font-size:13px;color:#919392;text-decoration:none;transition:.5s linear; font-family: Open Sans;} .PopularPosts ul li:before{content:counter(num);display:block;position:absolute;background-color:rgb(247, 73, 73);color:#fff;width:30px;height:28px;line-height:25px;text-align:center;bottom:0;right:0;margin-top:15px;transition:.5s linear; border-radius: 10%;font-size: 18px; padding: 5px;} .PopularPosts ul li:nth-child(1),.PopularPosts ul li:nth-child(2),.PopularPosts ul li:nth-child(3),.PopularPosts ul li:nth-child(4),.PopularPosts ul li:nth-child(5),.PopularPosts ul li:nth-child(6),.PopularPosts ul li:nth-child(7),.PopularPosts ul li:nth-child(8),.PopularPosts ul li:nth-child(9),.PopularPosts ul li:nth-child(10){background:#fff;color:#aaacab; border-bottom:1px solid #EFEFEF;transition:all .5s linear;} PopularPosts ul li:last-child{border-bottom:none;} .PopularPosts ul li:hover:nth-child(1),.PopularPosts ul li:hover:nth-child(2),.PopularPosts ul li:hover:nth-child(3),.PopularPosts ul li:hover:nth-child(4),.PopularPosts ul li:hover:nth-child(5),.PopularPosts ul li:hover:nth-child(6),.PopularPosts ul li:hover:nth-child(7),.PopularPosts ul li:hover:nth-child(8),.PopularPosts ul li:hover:nth-child(9),.PopularPosts ul li:hover:nth-child(10){background-color:#fafafa;transition:all .5s linear;} .PopularPosts ul li:hover .item-title a{color:#37B576;transition:all .5s linear;} .PopularPosts ul li:hover:before{background-color:#37B576;color:#fff;transition:all .5s linear;} .PopularPosts .item-thumbnail{float:left;margin:0 0 0 10px;} .PopularPosts ul li .item-snippet {display:none;visibility:hidden;opacity:0;font-size:11px;color:#383838;transition:all .5s linear; font-family: Open Sans;} .PopularPosts ul li:hover .item-snippet {display:block;visibility:visible;opacity:1;transition:all .5s linear;}

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

Выбора достаточно и на любой вкус. Сложного ничего нет, а уникальность гаджету можно любую создать, было бы желание.

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

👇
Получайте новые сообщения с блога прямо на почту

Введите Ваш email


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