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

 Приветствую вас, уважаемые читатели и гости блога.

Продолжаю подборку красивых кнопок для блога.  На этот раз сделаем пульсирующие кнопочки. Такие обязательно привлекут внимание посетителей.  Установить их можно и в самом сообщение, и в гаджет HTML/JAVAScript.  Это могут быть, какие-то объявления или переходы на другую станицу.Все предложенные варианты кнопок в работе можно посмотреть в этом редакторе. Просто скопируйте код у установите в поле на странице редактора

 1. Пульсирующая овальная кнопка

овальная пульсирующая кнопка


Код.

<div class="dingovaila-besticsia">
  <div class="vengumpn-koveemen"><a href="http://www.shpargalochki.ru/">Нажми на меня!</div>
</div>
<style>
.vengumpn-koveemen {
    display: flex;
    justify-content:
    align-items: center;
    width: 167px;
    height: 43px;
    color: #3e3e54;
    font-weight: bold;
    border: 1.1px solid #acafb7;
    background: #f7eded;
    border-radius: 80px;
    animation: radial-pulse 1s infinite;
    font-size: 20px;
}
.dingovaila-besticsia {
  width: 100%;
  height: 100vh;
  background-color: #328096;
  display: flex;
  align-items: center;
  justify-content: center;
}
@keyframes radial-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(23, 22, 22, 0.5);
  }
  100% {
    box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
}
</style>
/div>


Я отметила цветом фон для большей выразительности. Можно эту строку в коде удалить.

2. Чёрная квадратная кнопка


квадратная кнопка


Код

<div class="button"><h1>Кнопка</h1></div>
</div>
<style>
.button{
width: 150px;
    padding: 5px 0;
    margin: 30px auto 0;
    text-transform: uppercase;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    background: rgba(41, 41, 41, 0.88);
    color: #e6a833;
    -webkit-animation-name: 'play_down';
    -moz-animation-name: 'play_up';
    animation-duration: 1s;
    animation-iteration-count: infinite;
    box-shadow: 0 0 0 3px rgba(0, 0, 0,.5);
    cursor: pointer;
}
@keyframes  play_top {
 0% 
 {
 -webkit-box-shadow: 0 0 rgba(0,163,182,.6);
 -moz-box-shadow: 0 0 rgba(0,163,182,.6);
 box-shadow: 0 0 rgba(0,163,182,.6);
 }
 to 
 {
 -webkit-box-shadow: 0 0 0 20px rgba(0,163,182,0);
 -moz-box-shadow: 0 0 0 20px rgba(0,163,182,0);
 box-shadow: 0 0 0 20px rgba(0,163,182,0);
 }   
}
@keyframes  play_down {
 0% 
 {
 -webkit-box-shadow: 0 0 rgba(55,55,55,.6);
 -moz-box-shadow: 0 0 rgba(55,55,55,.6);
 box-shadow: 0 0 rgba(55,55,55,.6); 
 }
 to 
 {
 -webkit-box-shadow: 0 0 0 20px rgba(55,55,55,0);
 -moz-box-shadow: 0 0 0 20px rgba(55,55,55,0);
 box-shadow: 0 0 0 20px rgba(55,55,55,0);  
 }
}
</style>

3. Маленькая круглая кнопка

маленькая кнопка с эффектом пульсации

Код 

 <div class="kigdsab-godeav"><button class="casetug-posavun"><a href="http://www.shpargalochki.ru/">тут</button></div>

<style> .kigdsab-godeav{
width:200px;
height:100%;
margin:0 auto 0}

.casetug-posavun {
  position: relative;
  top: 50%;
  left: 50%;
  margin-left: -32px;
  margin-top: -32px;
  display: block;
  width: 53px;
  height: 53px;
  font-size: 14px;
  font-weight: normal;
  color: #f5f0f0;
  text-shadow: 0 1px 0 #0f3354;
  border: 1px solid #1d71c1;
  box-shadow: 0 0 0 0 rgba(90, 153, 220, 0.7), inset 0 1px 0 #98c4ec;
  border-radius: 100%;
  background: #62a8e8;
  background-image: -webkit-gradient(linear, 50% 0, 50% 100%, color-stop(0, #6eace4), color-stop(100%, #4f93d4));
  background-image: -webkit-linear-gradient(#64a0d6, #3f86ca);
  background-image: linear-gradient(#66a3da, #3f88ce);
  cursor: pointer;
  -webkit-animation: pulse 1s infinite cubic-bezier(0.6, 0, 0, 1);
}

.casetug-posavun:hover{
-webkit-animation:none}

@-webkit-keyframes pulse{
to{
box-shadow:0 0 0 23px rgba(81, 147, 218, 0), inset 0 1px 0 #9ec3e6}

}</style>

Соответственно, чтобы сделать надписи на кнопках кликабельными в Дивах пишем так

<a href="http://www.shpargalochki.ru/">Текст</div>


Вставляем адрес страницы, куда будет переход по ссылке.

С цветом и размерами кнопок тоже можно поиграть во всех кодах. 

На сегодня всё. Хочется надеяться, что такие пульсирующие кнопки найдут применение на ваших блогах. До встречи.



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

Вот такой простой и в то же время достаточно функциональный метод подачи информации