Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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


Бегущая строка с обновлениями в Блоггере


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

Для просмотра попрошу перейти вас на тестовый блог.

Демонстрация

1. Виджет последних сообщений бегущей строкой


Код


<style>
.topnews,.topnews a:link {text-decoration: none; color:#FFF !important}
.topnews a:visited {text-decoration: none; color:#FDFDFD !important;}
.topnews a:hover {text-decoration:none; color: red !important;}
</style>
<div class="topnews">
<table border="0" cellspacing="0" cellpadding="0" style="width:100%; border: 1px solid #000;  background-color:#556B2F;"><tbody><tr><td><div style="position:relative;overflow:hidden;width:100%; height:20px;" onmouseover="copyspeed=pausespeed"
onmouseout="copyspeed=memoryspeed"><div id="memoryscroller" style="position: absolute; left: -101px; top: 0px;"><nobr><script type="text/javascript" async="" src="https://apis.google.com/js/plusone.js" gapi_processed="true"></script><script type="text/javascript">
var nMaxPosts =10;
        var nWidth = 100;
        var nScrollDelay = 0;
        var sDirection = "left";
        var sOpenLinkLocation = "N";
        var sBulletChar = ">>"
</script>
<script type="text/javascript">
function RecentPostsScrollerv2(json) {
var sHeadLines;
var sPostURL;
var objPost;
var sMoqueeHTMLStart;
var sMoqueeHTMLEnd;
var sPoweredBy;
var sHeadlineTerminator;
var sPostLinkLocation;
  try {
   sMoqueeHTMLStart = "\<MARQUEE behavior=\"scroll\" onmouseover=\"this.stop();\" onmouseout=\"this.start();\" ";
   if (nWidth) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"" + nWidth + "%\"";
  } else {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " width = \"100%\"";
  }
  if (nScrollDelay) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " scrolldelay = \"" + nScrollDelay + "\"";
  }
  if (sDirection) {
   sMoqueeHTMLStart = sMoqueeHTMLStart + " direction = \"" + sDirection + "\"\>";
    if (sDirection == "left" || sDirection == "right") {
    sHeadlineTerminator = "&nbsp;&nbsp;";
   } else {
    sHeadlineTerminator = "\<br/\>";
   }
  }
  if (sOpenLinkLocation == "N") {
   sPostLinkLocation = " target= \"_blank\" ";
  } else {
   sPostLinkLocation = " ";
  }
  sMoqueeHTMLEnd = "\</MARQUEE\>"
   sHeadLines = "";
   for (var nFeedCounter = 0; nFeedCounter < nMaxPosts; nFeedCounter++) {
   var objPost = json.feed.entry[nFeedCounter];
    if (nFeedCounter == json.feed.entry.length) break;
    for (var nCounter = 0; nCounter < objPost.link.length; nCounter++) {
    if (objPost.link[nCounter].rel == 'alternate') {
     sPostURL = objPost.link[nCounter].href;
     break;
    }
   }
   sHeadLines = sHeadLines + "\<b\>" + sBulletChar + "\</b\> \<a " + sPostLinkLocation + " href=\"" + sPostURL + "\">" + objPost.title.$t + "\</a\>" +
sHeadlineTerminator;
  }
   if (sDirection == "left") {
   sHeadLines = sHeadLines + "&nbsp;&nbsp;" + sPoweredBy;
  } else if (sDirection == "right") {
   sHeadLines = sPoweredBy + "&nbsp;&nbsp;" + sHeadLines;
  } else if (sDirection == "up") {
   sHeadLines = sHeadLines + "\<br/\>" + sHeadLines;
  }
  document.write(sMoqueeHTMLStart + sHeadLines + sMoqueeHTMLEnd)
} catch (exception) {
  alert(exception);
}
}</script>
<script src="https://bvd-2.blogspot.com/feeds/posts/default?alt=json-in-script&amp;callback=RecentPostsScrollerv2&amp;max-results=10"
type="text/javascript"></script></nobr></div></div></td></tr></tbody></table></div>


Настройки виджета

Все настройки помечены цветом.

 

Ширина задана 100%; можно менять в зависимости от макета блога. 

Высота строки 20px; тоже настраиваемая, меняйте по желанию 

Максимальное количество постов поvar nMaxPosts =10;  по вашему желанию. В примерах я задала 10.

Цвет background-color:#556B2F;"> строки на ваше усмотрение 

Цвет текст задан  color:#FFF белым цветом

при наведении курсора и остановке текста  color:#FDFDFD  красный 

Толщина и цвет  border: 1px solid #000;  рамки так же по желанию

Скорость  var nScrollDelay = 0; прокрутки регулируется

Ну и наконец, в этой https://bvd-2.blogspot.com/feeds/posts/default строке нужно вставить адрес вашего блога (будьте внимательны с символами).


2. Виджет последних комментариев бегущей строкой

Здесь уже проще. Тот же самый код, только в строке

 участок https://bvd-2.blogspot.com/feeds/posts/default замените участок feeds/posts/default на feeds/comments/default.


3. Виджет последних стаей определённого ярлыка.

Меняем так же , только прописываем название нужного ярлыка, статьи которого хотим показать в бегущей строке. В этом случае, нужно быть внимательным к регистру. Допустим у меня ярлык КАРТИНКИ все крупным шрифтом, так и нужно писать . А не так Картинки. Пишем так

https://bvd-2.blogspot.com/feeds/posts/default /-/КАРТИНКИ

Код каждого из вариантов или все их сразу устанавливаем в гаджет (гаджеты) HTML/JavaScript и располагаем где-нибудь над сообщениями или под шапкой блога.

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

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

Это только фото 

панель с информацией


Для просмотра скопируйте код и расположите его в этом редакторе 

<input type="checkbox" id="side-checkbox" />
<div class="side-panel">
    <label class="side-button-2" for="side-checkbox">+</label>    
    <div class="side-title">Выдвижная панель:</div>
    <p>Информация в панеле -здесь можно разместить всё, что угодно - текст, изображение, форму связи, код
</p><img src="https://i.pinimg.com/originals/19/6e/c7/196ec72878f83afeac3ffb84306d9ac4.png" width="250" height="200" alt="ёж">
</div>
<div class="side-button-1-wr">
    <label class="side-button-1" for="side-checkbox">
        <div class="side-b side-open">Открыть</div>
        <div class="side-b side-close">Закрыть</div>
    </label>
</div>
<style>
/* стили панели */
#side-checkbox {
    display: none;
}
.side-panel {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: -360px;
    background: #306754; /*общий фон панели */
    transition: all 0.5s;   
    width: 320px;
    height: 100vh;
    box-shadow: 10px 0 20px rgba(0,0,0,0.4);
    color: #FFF;
    padding: 40px 20px;
}
.side-title {
    font-size: 20px;
    padding-bottom: 10px;
    margin-bottom: 20px;
    border-bottom: 2px solid #BFE2FF;
}
/* Оформление кнопки  */

.side-button-1-wr {
    text-align: center; /* Контейнер для кнопки,  */
}
.side-button-1 {
    display: inline-block;
}
.side-button-1 .side-b {
    margin: 10px;
    text-decoration: none;
    position: relative;
    font-size: 20px;
    line-height: 20px;
    padding: 12px 30px;
    color: #FFF;
    font-weight: bold;
    text-transform: uppercase; 
    font-family: 'Roboto Condensed', Тahoma, sans-serif;
    background: #1d4569; /* цвет кнопки открыть,закрыть */
    cursor: pointer; 
    border: 1px solid #f5faff;
}
.side-button-1 .side-b:hover,
.side-button-1 .side-b:active,
.side-button-1 .side-b:focus {
    color: #FFF;
}
.side-button-1 .side-b:after,
.side-button-1 .side-b:before {
    position: absolute;
    height: 4px;
    left: 50%;
    bottom: -6px;
    content: "";
    transition: all 280ms ease-in-out;
    width: 0;
}
.side-button-1 .side-open:after,
.side-button-1 .side-open:before {
    background: green;
}
.side-button-1 .side-close:after,
.side-button-1 .side-close:before {
    background: green;
}
.side-button-1 .side-b:before {
    top: -6px;
}
.side-button-1 .side-b:hover:after,
.side-button-1 .side-b:hover:before {
    width: 100%;
    left: 0;
}
/* Переключатели кнопки 1 */

.side-button-1 .side-close {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-open {
    display: none;
}
#side-checkbox:checked + .side-panel + .side-button-1-wr .side-button-1 .side-close {
    display: block;
}
#side-checkbox:checked + .side-panel {
    left: 0;
}
/* Оформление кнопки на панеле */
.side-button-2 {
    font-size: 30px;
    border-radius: 20px;
    position: absolute;
    z-index: 1;
    top: 8px;
    right: 8px;
    cursor: pointer;
    transform: rotate(45deg);
    color: #BFE2FF;    
    transition: all 280ms ease-in-out;    
}
.side-button-2:hover {
    transform: rotate(45deg) scale(1.1);    
    color: #FFF;
}
</style>

Все основные настройки я пометила комментариями в самом коде. Нужную информацию размещайте в тегах <p>текст </p>. пример привела с текстом и картинкой, адрес которой выделен цветом. Меняйте на свой.  Сам код выдвижной панели, как всегда устанавливаем в редакторе сообщений, перейдя в режим HTML. 

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


движение картинки в сфере



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


<div class="planet planetEarth">
  <div class="container">
    <div class="earth"></div>
  </div>
</div>
<style>
.planetEarth{
position: relative;
min-width: 60%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #182357;
}
.earth{
position: absolute;
width: 300px;
height: 300px;
background: #f00;
border-radius: 50%;
background: url(https://i1.wallbox.ru/wallpapers/main/201551/e74a8ffac9938d4.jpg);
background-size: cover;
    animation: earth 20s linear infinite;
    box-shadow: inset 0 0 20px #03A9F4,
    0 0 120px #03A9F4;
}
.planet .container{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
-webkit-box-reflect: below 1px linear-gradient(#0001,#0002);
}
@keyframes earth
{
0%
{
    background-position: 0;
}
100%
{
    background-position: 162.5%;
}
}
</style>

Хочу добавить пояснительный текст к некоторым настройкам

background: #182357; цвет фона вокруг круга

earth{

    position: absolute;- абсолютное позиционирование

    width: 340px;ширина - окружности

    height: 340px;высота окружности

    background: #f00;- цвет общего фона 

    border-radius: 50%;-закругление углов у блока

    background: url(planet.jpg);- адрес картинки в круге

    background-size: cover;- пропорционально растянутая фоновая картинка

    animation: earth 20s linear infinite;-  продолжительность, и непрерывная анимация

    box-shadow: inset 0 0 20px #03A9F4,- размытая рамка и цвет теней

        0 0 120px #03A9F4;

}

.planet .container{

    width: 100%; - отступы обнуляем

    display: flex;

    justify-content: center;

    align-items: center;

    flex-direction: column;

    -webkit-box-reflect: below 1px linear-gradient(#0001,#0002);- зеркальное отражение 


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

https://i.ytimg.com/vi/JX7giiYkHno/maxresdefault.jpg


Играть с этим можно сколько угодно. Думаю, многие найдут применение такому эффекту движения картинки в сфере. У меня просьба, если сделаете свой вариант, дайте знать пожалуйста, уж очень посмотреть хочется. 

автор эффкета porsake на CodePen


на CodePen

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

блоки выпадающщие



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

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

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

Давайте уже тестировать.

Скопируйте предложенный код и разместите в поле этого редактора

<div class="wrapper">
  <div class="half">
    
    <div class="tab">
      <input id="tab-one" type="checkbox" name="tabs">
      <label for="tab-one">Первая вкладка</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-two" type="checkbox" name="tabs">
      <label for="tab-two">Вторая вкладка</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
    <div class="tab">
      <input id="tab-three" type="checkbox" name="tabs">
      <label for="tab-three">Третья вкладка</label>
      <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>
  </div>
<style>
.tab {
  position: relative;
  margin-bottom: 1px;
  width: 100%;
  color: #fff;
  overflow: hidden;
}
.tab input {
  position: absolute;
  opacity: 0;
  z-index: -1;
}
.tab label {
  position: relative;
  display: block;
  padding: 0 0 0 1em;
  background: #008b8b;
  font-weight: bold;
  line-height: 3;
  cursor: pointer;
}
.blue label {
  background: #2980b9;
}
.tab-content {
  max-height: 0;
  overflow: hidden;
  background: #025669;
  -webkit-transition: max-height .35s;
  -o-transition: max-height .35s;
  transition: max-height .35s;
}
.blue .tab-content {
  background: #3498db;
}
.tab-content p {
  margin: 1em;
}
/* :checked */
.tab input:checked ~ .tab-content {
  max-height: 100vh;
}
/* Icon */
.tab label::after {
  position: absolute;
  right: 0;
  top: 0;
  display: block;
  width: 3em;
  height: 3em;
  line-height: 3;
  text-align: center;
  -webkit-transition: all .35s;
  -o-transition: all .35s;
  transition: all .35s;
}
.tab input[type=checkbox] + label::after {
  content: "+";
}
.tab input[type=radio] + label::after {
  content: "\25BC";
}
.tab input[type=checkbox]:checked + label::after {
  transform: rotate(315deg);
}
.tab input[type=radio]:checked + label::after {
  transform: rotateX(180deg);
}</style>


Можно рассмотреть такой вариант для создания меню аккордеон на сайте.

По необходимости добавляйте или убирайте дополнительные блоки 

<div class="tab">
      <input id="tab-two" type="checkbox" name="tabs" />
      <label for="tab-two">Вторая вкладка</label>
      <div class="tab-content"> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaque.</p>
      </div>
    </div>

Меняйте цветовые решения на свои-свойства background:
Соответственно, ваша информация в табах (вкладках) и заголовки

Для применения на странице блога, готовый код вставляем в редакторе в формате HTML или в гаджет HTML/JAVASCRIPT в любом месте макета блога. 

Вот такой простой и в то же время достаточно функциональный метод подачи информации
 Всем, доброго времени суток. Хочу показать, как просто поставить знак ударения в слове при написании сообщения. Часто вижу, что просто выделяют ударную буквы крупным шрифтом или дают поправку в скобках. В русском языке часто встречаются слова - омографы. Допустим парОм — пАром, Сорок — сорОк и другие. Если в обычной речи мы ставим произношением ударение на нужный слог, то в письменной форме, конечно же, необходимо поставить знак ударения.

ударение в слове


Как же поставить ударение в коде- HTML?

Всё достаточно просто. Использовать будем специальные символы, которые применяются в формате HTML при создании страницы. В редакторе сообщения Блоггер есть функции установки символов в тексте, но я не увидела знака ударения, сколько не пробовала. Да и мне легче при необходимости прописать знак ударения в HTML, не так уж часто это используется в тексте. И такой вариант проще. 

Все символы начинаются с использованием амперсанда (&) и это так:

&здесь имя; 
&#DD; здесь код символа
&lt;так пишется вот такой символ <, а так &gt; наоборот >

Ну это, для расширения кругозора. Всё же, вернёмся к знаку ударения в тексте.

 Когда пишем сообщение и есть необходимость поставить ударение, переходим  из обычного формата в формат HTML,  пишем так

В режиме HTML пишем   всегда плачу&#x301;    Получается ↣ всегда плачу́
В режиме  HTML пишем  всегда  пла &#x301;чу  Получается ↣ всегда пла́чу

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

То же самое с другим кодом 

Пишем в формате древний замо&#769;к Получаем ↣ древний замо́к 
Пишем в формате древний за&#769;мок Получаем ↣ древний за́мок

Ещё с помощью символов можно сделать, например знак копирайта и другие. К слову, сам знак прописываем так же © 2013 — 2021

Попробуйте в черновике, чтобы освоить такое не хитрое дело.