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

Сам гаджет канал выглядит, мягко сказать, совсем скучно.

гаджет канал

 Но можно с помощью стилей CSS его хоть немного сделать привлекательнее. Ну вот так хотя бы.

гаджет канал в блоге

Что изменится

Уберём нумерованный список
Зададим нужный фон
Изменим шрифт
Зададим разделители между ссылками
Изменим цвет самих ссылок
Сделаем верхнюю контрастную рамку.

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



Посмотреть его можно в админпанели  НАСТРОЙКИ-ДРУГОЕ- ФИД САЙТА . У меня он выглядит так.

http://feeds.feedburner.com/shpargalochkiru

Далее нажимаем кнопку продолжить.

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


Далее скопируйте, приведённый ниже код. Все комментарии по настройкам я отметила в самом коде

<style type='text/css'>
#Feed1 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul{
list-style:none;
 background: #EEEEEE; //общий фон//

margin:0;
padding:0
}
#Feed1_feedItemListDisplay a{
color:#1A237E; //цвет ссылки //

text-decoration:none;
font-size:16px!important //размер шрифта//
}
#Feed1_feedItemListDisplay a:hover{
color:#e8554e //цвет ссылки при наведении//
}
#Feed1_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
 border-bottom: 2px solid #1565C0; //разделитель между постами толщина и цвет//
padding:3px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child{
border-top:solid 8px #F4511E //размеры и цвет верхней рамки//
}
</style>


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

Сейчас идём во вкладку Тема и находим закрывающийся тег </head>. И над ним устанавливаем этот код. Сохраняем изменения.

Можно установить 2 или 3 ленты блога и больше, добавляя новый гаджет канал. Тогда код будет такой

<style type='text/css'>
#Feed1 .widget-content,
#Feed2 .widget-content,
#Feed3 .widget-content{
padding:0
}
#Feed1_feedItemListDisplay li,#Feed1_feedItemListDisplay ul,
#Feed2_feedItemListDisplay li,#Feed2_feedItemListDisplay ul,
#Feed3_feedItemListDisplay li,#Feed3_feedItemListDisplay ul{
list-style:none;
margin:0;
padding:0
}
#Feed1_feedItemListDisplay a,
#Feed2_feedItemListDisplay a,
#Feed3_feedItemListDisplay a{
color:#444;
text-decoration:none;
font-size:16px!important
}
#Feed1_feedItemListDisplay a:hover,
#Feed2_feedItemListDisplay a:hover,
#Feed3_feedItemListDisplay a:hover{
color:#e8554e
}
#Feed1_feedItemListDisplay li,
#Feed2_feedItemListDisplay li,
#Feed3_feedItemListDisplay li{
display:block;
clear:both;
overflow:hidden;
list-style:none;
border-bottom:solid 1px #dedede;
padding:4px 0;
margin:0;
font-weight:normal
}
#Feed1_feedItemListDisplay li:first-child,
#Feed2_feedItemListDisplay li:first-child,
#Feed3_feedItemListDisplay li:first-child{
border-top:solid 1px #dedede
}
</style>


Тут я думаю понятно, что везде добавляем строки #Feed2, #Feed3 и так далее, если нужно. Если вы автор нескольких блогов, то так же можно отображать в текущем ленту другого блога.

Выбор за вами. Возможно, кому -то  и пригодится.



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

введите пожалуйста свой адрес электронной почты :

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

эффект для картинки.

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


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


<div id="boxercontainer">
<img alt="" src="https://2divi.com/wp-content/uploads/banner-5.png" />
  <br />
<div>
<h1>
ГОРЫ</h1>
В суету городов и в потоки машин
Возвращаемся мы — просто некуда деться!
И спускаемся вниз с покоренных вершин,
Оставляя в горах, оставляя в горах свое сердце.
Так оставьте ненужные споры!
Я себе уже все доказал —
Лучше гор могут быть только горы,
На которых еще не бывал.
</div>

<style>
#boxercontainer {
  width: 80%;
  max-width: 800px;
  margin: 0 auto;
  background-image: url(https://poster.nicefon.ru/2016_12/26/1080x610/190929fee4c4dbd90f46bc.jpg);
  position: relative;
  padding-bottom: 45%;
  background-size: 120% 120%;
  background-position: 50% 50%;
  overflow: hidden;
  min-height: 650px;
}
#boxercontainer div {
  position: absolute;
  width: 60%;
  left: 20px;
  top: 20px;
  border: 2px solid #fff;
  padding: 2rem;
  font-family: "Slabo 27px", serif;
  font-size: 1.2rem;
  background: rgba(0,0,0,0.2);
}
#boxercontainer img {
  position: absolute;
  bottom: -40px;
  right: -30px;
  width: 70%;
  filter: drop-shadow(-200px 200px 50px #000);
  padding: 1rem;
  z-index: 2;
}
#boxercontainer h1 {
  text-align: center;
  font-family: "My Underwood", monospace;
  font-size: 3rem;
  font-weight: 400;
  margin: 0;
}
#boxercontainer p {
  position: relative;
  line-height: 1.5;
  margin: 1rem;
  z-index: 3;
}
@media all and (max-width: 1200px) {
  #boxercontainer { width: 100%; }
}
@media all and (max-width: 875px) {
  #boxercontainer img {
    width: 50%;
    right: -50px;
  }
}
@media all and (max-width: 785px) {
  #boxercontainer div {
    top: 5px;
    left: 5px;
    padding: 1rem;
  }
}
@media all and (max-width: 725px) {
  #boxercontainer {
    background-size: contain;
  }
  #boxercontainer img {
    position: relative;
    display: block;
    width: 40%;
    margin: 0 auto;
    margin-top: -5%;
    filter: drop-shadow(-30px 50px 20px rgba(0,0,0,0.8));
  }
  #boxercontainer div {
    width: 80%;
    margin: 1% auto;
    position: relative;
  background: rgba(0,0,0,0.9);
    z-index: 4;
  }
}
@media all and (max-width: 500px) {
  #boxercontainer div {
    width: 90%;
  }
  #boxercontainer img {
    width: 50%;
    padding: 0;
  }
}</style>

<script type="text/javascript">
const boxer = boxercontainer.querySelector("img"),
maxMove = boxercontainer.offsetWidth / 30,
boxerCenterX = boxer.offsetLeft + (boxer.offsetWidth / 2),
boxerCenterY = boxer.offsetTop + (boxer.offsetHeight / 2),
fluidboxer = window.matchMedia("(min-width: 726px)");

function getMousePos(xRef, yRef) {

  let panelRect = boxercontainer.getBoundingClientRect();
  return {
   x: Math.floor(xRef - panelRect.left) /(panelRect.right-panelRect.left)*boxercontainer.offsetWidth,
   y: Math.floor(yRef - panelRect.top) / (panelRect.bottom -panelRect.top) * boxercontainer.offsetHeight
    };
}

document.body.addEventListener("mousemove", function(e) {
  let mousePos = getMousePos(e.clientX, e.clientY),
  distX = mousePos.x - boxerCenterX,
  distY = mousePos.y - boxerCenterY;
  if (Math.abs(distX) < 500 && distY < 200 && fluidboxer.matches) {
  boxer.style.transform = "translate("+(-1*distX)/12+"px,"+(-1*distY)/12+"px)";
    boxercontainer.style.backgroundPosition = `calc(50% + ${distX/50}px) calc(50% + ${distY/50}px)`;
  }
})
</script>


Готовый код вставляем в тело поста в режиме HTML.

https://2divi.com/wp-content/uploads/banner-5.png  адрес картинки в формате PNG, которую заставим двигаться.

(https://poster.nicefon.ru/2016_12/26/1080x610/190929fee4c4dbd90f46bc.jpg адрес фоновой картинки

 right: -30px;  расстояние картинки относительно правого края.

Название и текст в рамке замените на своё.

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

Таким образом можно создать красивую открытку. Праздники уже скоро. Подумайте. Если что пошло не так пишите в комментариях. А так всё просто.

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

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

введите пожалуйста свой адрес электронной почты :

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

Это тонкая цветная полоса, которая будет отображаться при прокрутке страницы вниз. Как альтернатива ползунка скроллинга на странице. Такой  своеобразный индикатор прокрутки в процентном отношении, когда прокручиваем вниз индикатор смещается вправо. И наоборот - при прокрутке вверх смещается  влево.


прокрутка страницы

Не требуется подключения библиотеки Jquery. Используем небольшой javascript и код HTML.  Посмотрите наглядно на тестовом блоге - прокрутите страницу вниз и вверх. В самом верху странице сам индикатор будет показывать на каком расстоянии страницы вы находитесь.


<div class="progress-container">
    <div class="progress-bar" id="progressbar"></div>
  </div>

<script>
//<![CDATA[
window.addEventListener("scroll", myFunction);

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progressbar").style.width = scrolled + "%";
}
//]]>
</script>

<style>
.progress-container {
  width: 100%;
  height: 3px;
  background: #00796B;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999
}

.progress-bar {
  height: 3px;
  background: #76FF03;
  width: 0%
}</style>


Отрегулируйте фон, который отмечен, чтобы соответствовать теме вашего блога на ваш вкус.

.progress-container находится там, где расположен индикатор прокрутки, и .progress-bar  является индикатором прокрутки, которая перемещается слева направо.
Готовый код установите в гаджет в любом месте макета блога (лучше в самом низу).
Ещё по теме - как изменить внешний вид полосы прокрутки

Надеюсь кому - то и пригодится. 

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

введите пожалуйста свой адрес электронной почты :

Доброго времени суток, друзья. Многие пользователи создают на платформе Blogger полноценные видеоблоги с очень интересным и грамотным оформлением. И чаще всего используется  родной, предоставленный в редакторе сообщений. Но простой способ добавления видео скучновато смотрится на странице.

видеоролик
На самом деле существует и другие способы отображения видеоплеера в блог. Например, можно вставить ролик так, чтобы он открывался в новом окне при просмотре.
Привет друзья. Хочу показать вам как создать на странице видимые и невидимые блоки. Есть масса способов, используя CSS, сделать любой элемент страницы скрытым (невидимым). Можно использовать свойство opacity, задав ему значение 0. display: блок полностью исчезнет с веб-страницы, без следа.
Visibility, тоже поможет скрыть наш элемент, но влияет на макет страницы.
Чтобы показать невидимый элемент, можно использовать псевдокласс :hover. и другие. Информации много и не буду подробно останавливаться на каждом моменте.

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

Для наглядности, скопируйте код и установите его в этом редакторе для просмотра. Наведите мышь на появившейся блок. Если не совсем будет понятно ниже выкладываю картинки.

<div class="on-hover">
Видимый блок
</div>
<div class="hidden-block">
А это то что появится. Может быть текст или картинка. Как её сюда вставить рассмотрим ниже
</div>
<style>.on-hover{
width:300px;
background:#004D40;
color:#fff;
font-size:28px;
border:3px solid #4DB6AC;
padding:20px;
margin:auto;
margin-bottom:20px;
text-align:center;
}
.hidden-block{
width:300px;
background:#4DB6AC;
color:#fff;
font-size:25px;
border:3px solid #004D40;
padding:20px;
margin:auto;
text-align:center;
opacity:0; /*Элемент прозрачный (невидимый)*/
transition: 1s; /*Скорость перехода */
}
.on-hover:hover+ .hidden-block{
opacity:1;
transition: 1s;
}</style><br />
<br />
<br />


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

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

скрытие элемента страницы

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

<div class="hidden-block">
А это то что появится. Может быть текст или картинка. Как её сюда вставить рассмотрим ниже
</div>


вместо текста прописать путь к изображению - адрес.

<div class="hidden-block">
<img src="здесь адрес изображения">
</div>


Картинка должна быть такого же размера как ширина и высота блока. В коде это 300px; на 300px;

Вот такая игра в прятки на CSS. Видимый и невидимый блок, который спрятался.

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

введите пожалуйста свой адрес электронной почты :

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