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

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

Тут предлагается скачать адреса (контактные данные) своих подписчиков. , дабы не потерять их. Давайте смотреть, как удобнее это сделать.

Заходим на свою страницу сервиса Фидбёрнера и находим такую вкладку 

С правой стороны опция управление подпиской. Тюкаем по ней. Далее в открывшемся окне жмём на стрелочку около строки View Subscriber Details

Если прокрутите страницу ниже будет список электронных адресов всех ваших подписчиков. Или сразу просто нажмите  на  ссылку Export: CSV. Файл скачается и просмотреть можно сразу в папке. Хотите сохраняйте, хотите нет. 

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

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

Сейчас вот придётся опять сидеть и тупо удалять все ссылки на подписку по электронной почте в виджетах и страницах блогов. Я уже с этого поста не предлагаю даже оформить эту подписку.

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

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

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

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

Код

<div class="spotlight" data-text= "Свет фонарика на тексте">
    Текст со светом фонарика
</div> 
<style>
  .spotlight {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 70px;
    line-height: 90px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px 0;
    padding: 50px 20px;
    position: relative;
    background: #1f1f1f;
    color: #000000;
}
@media screen and (max-width:600px) {
    .spotlight {
        font-size: 40px;
        line-height: 50px;
    }
}
.spotlight:before {
    content: attr(data-text);
    position: absolute;
   background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7);
    padding: 50px 20px;    
    -webkit-background-clip: text;
    color: transparent;
    background-size: 100% 90%;
    clip-path: ellipse(60px 60px at -2.54% -9.25%);
    animation: swing 5s infinite;
    animation-direction: alternate;
}
@keyframes swing {
    0%{
        clip-path: ellipse(60px 60px at -2.54% -9.25%)
    }
    50%{
        clip-path: ellipse(120px 120px at 49.66% 64.36%);
        
    }
    100%{
        clip-path: ellipse(80px 80px at 102.62% -1.61%)
    }
  }</style>

Можно сделать свет фонарика в белом цвете, просто   background: linear-gradient(#f70000, #f89200, #f8f501, #038f00,#0168f8, #a200f7);  заменить на  background: #FFF.

Будет так 

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

Всем добра и до встречи. Спасибо за внимание. 

Идея с сайта codepen.io 

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

Введите Ваш email

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

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

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

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

Если хотите попробовать  - вот код

 

<style>
.hide{display:none;}
.popbox{position:fixed;top:0;left:0;bottom:0;width:100%;z-index:1000000;}
.pop-content{width:650px;height:350px;display:block;position:absolute;top:50%;left:50%;margin:-225px 0 0 -425px;z-index:2;box-shadow:0 3px 20px 0 rgba(0,0,0,.5);}
:focus,:active{outline:0}
.popcontent{width:100%;height:100%;display:block;background:#fff;border-radius:5px;overflow:hidden}
.pop-overlay{position:absolute;top:0;left:0;bottom:0;width:100%;z-index:1;background:rgba(0,0,0,.7)}
.popbox-close-button{position:absolute;width:28px;height:28px;line-height:28px;text-align:center;top:-14px;right:-14px;background-color:#fff;box-shadow:0 -1px 1px 0 rgba(0,0,0,.2);border:none;border-radius:50%;cursor:pointer;padding:0}
.popbox-close-button svg{vertical-align:middle}
.popcontent img{width:100%;height:100%;display:block}
.flowbox{position:relative;overflow:hidden}
@media screen and (max-width:850px){.pop-content{width:90%;height:auto;top:20%;margin:0 0 0 -45%}
.popcontent img{height:auto}
}
.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}
100%{-webkit-transform:translateY(0);transform:translateY(0)}
}
.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}
@keyframes slideInLeft{0%{-webkit-transform:translateX(-100%);transform:translateX(-100%);visibility:visible}
100%{-webkit-transform:translateX(0);transform:translateX(0)}
}</style>
<div class="popbox hide" id="popbox">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()' role='button' tabindex='0'></div>
<div class="pop-content slideInUp">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'>
<div class="popcontent" id='imgcontent'>
<!-- <img src="https://1.bp.blogspot.com/-kkOAfcer9GY/XqrrBoIdN1I/AAAAAAAANo4/36RF-odXxMI4PDIVtzAByB_hqsQdZ3X8QCLcBGAsYHQ/s1600/%25D0%25BA%25D0%25B0%25D1%2580%25D1%2582%25D0%25B8%25D0%25BD%25D0%25BA%25D0%25B8.jpg" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox").style.display="none";document.getElementById("popbox2").style.display="block";showImage()'><svg height='24' viewbox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<div class="popbox hide" id="popbox2">
<div aria-label='Close' class="pop-overlay" onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();' role='button' tabindex='0'></div>
<div class="pop-content slideInLeft">
<a href="#" target="_blank" rel="noopener noreferrer" title="box" role='button' tabindex='0' aria-label='Close' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'>
<div class="popcontent" id='imgcontent2'>
<!-- <img src="https://2.bp.blogspot.com/-mQkzOxuTHoY/XKSnYc4gQvI/AAAAAAAALz8/cK00Wq_G3woqK-nLsUuiciI6bUitROxSwCLcBGAs/s400/%25D1%258D%25D1%2584%25D1%2584%25D0%25B5%25D0%25BA%25D1%2582.jpg" alt="banner" width="850" height="450"/> -->
</div>
</a>
<button aria-label='Close' class='popbox-close-button' onclick='document.getElementById("popbox2").style.display="none";removeClassonBody();'><svg height='24' viewbox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#333'></path></svg></button>
</div>
</div>
<script>
//<![CDATA[
setTimeout(function(){
 document.getElementById('popbox').classList.remove('hide');
 document.documentElement.className+=" flowbox";
 document.getElementById('imgcontent').innerHTML = document.getElementById('imgcontent').innerHTML.replace('<!--','').replace('-->','');
 }, 5000);
function showImage(){document.getElementById('imgcontent2').innerHTML = document.getElementById('imgcontent2').innerHTML.replace('<!--','').replace('-->','')};
function removeClassonBody(){var element=document.documentElement;element.className=element.className.replace(" flowbox","")}
//]]>
</script>

 Голубым цветом я отметила размеры баннеров width:650px;height:350px;

Измените адреса ваших изображений в строках розового цвета. Собственно, вот и все настройки. Код устанавливается в гаджет HTML/JavaScript в любом месте блога. 

Ещё 2 варианта статичного ротатора баннеров  для установки в блоге.

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

Введите Ваш email

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

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

В качестве примера взяла Пасхальную тему. 

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

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

<style>.kupat,.lebaran{position:fixed;top:0;z-index:9999}.kupat{left:0;width:80px;height:80px;cursor:pointer}.lebaran{width:100%;height:100%;left:0;background-color:rgba(9,100,13,.8);background-image:url(https://img-fotki.yandex.ru/get/9802/56195015.28a/0_cd68c_88ce7b52_XL.png);background-position:10% 50%;background-repeat:no-repeat;background-size:auto;display:none;flex-direction:column;align-items:center;justify-content:center}.lebaran blockquote{font-weight:700;font-size:1.6rem;font-family:Arial;color:#fff;width:60%;max-width:800px;line-height:1.4;margin:0;padding:.5rem;position:relative;text-align:center}.lebaran blockquote:after,.lebaran blockquote:before{position:absolute;color:#f1efe6;font-size:8rem;width:4rem;height:4rem;opacity:.5}.lebaran blockquote:before{content:'“';left:-3rem;top:-2rem}.lebaran blockquote:after{content:'”';left:-3rem;bottom:1rem}.lebaran cite{line-height:3;text-align:left;color:#fff}.tutup-lebaran{position:absolute;top:20px;left:20px;cursor:pointer}.goyang{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;animation:goyang 1s linear infinite}@-webkit-keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}@keyframes goyang{20%{-webkit-transform:rotate3d(0,0,1,15deg);transform:rotate3d(0,0,1,15deg)}40%{-webkit-transform:rotate3d(0,0,1,-10deg);transform:rotate3d(0,0,1,-10deg)}60%{-webkit-transform:rotate3d(0,0,1,5deg);transform:rotate3d(0,0,1,5deg)}80%{-webkit-transform:rotate3d(0,0,1,-5deg);transform:rotate3d(0,0,1,-5deg)}100%{-webkit-transform:rotate3d(0,0,1,0deg);transform:rotate3d(0,0,1,0deg)}}.muncul{-webkit-animation-name:muncul;animation-name:muncul;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}@-webkit-keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes muncul{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@media screen and (max-width:425px){.lebaran blockquote{font-size:1rem}.lebaran blockquote:after,.lebaran blockquote:before{font-size:6rem;width:2rem;height:2rem}}

</style>

<div class='kupat goyang' id='kupat' onclick='document.getElementById(&#39;lebaran&#39;).style.display=&#39;flex&#39;;kupat.style.display=&#39;none&#39;;'>

<picture>

<source srcset='https://img-fotki.yandex.ru/get/5640/137293384.71/0_9c4a6_2ea62e66_S.jpg' type='image/webp'></source>

<source srcset='https://img-fotki.yandex.ru/get/5640/137293384.71/0_9c4a6_2ea62e66_S.jpg' type='image/png'></source>

<img alt='kupat' height='80' src='https://img-fotki.yandex.ru/get/5640/137293384.71/0_9c4a6_2ea62e66_S.jpg' title='Пасха' width='80'/>

</picture>

</div>

<div class='lebaran muncul' id='lebaran'>

<blockquote>

С Пасхой вас! Христос воскрес!

Благодати вам с небес.

В доме будет пусть добро,

Счастье, радость и тепло.

</blockquote>

<cite>Ваша Вика Барадi</cite>

<span class='tutup-lebaran' onclick='document.getElementById(&#39;lebaran&#39;).style.display=&#39;none&#39;;kupat.style.display=&#39;block&#39;;'><svg height='24px' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='#ffffff'></path></svg></span>

</div>

Давайте немного разберём настройки. Они не сложные, справимся легко. 

Первая картинка, адрес которой выделен розовым, это картинка расположенная слева во всплывающем окне.

Всё, что синим цветом - адрес картинки в углу блога. 

Фон всплывающего окна задан зелёным цветом background-color:rgba(9,100,13,.8); в формате rgba. Можно заменить на желаемый. Все цвета можно найти в поиске. 

Мы расположили миниатюру в левом углу блога. Можно установить в правом, заменив все значения left (6 раз) на right. Будьте внимательны ко всем символам в коде. 

Весь текст в тегах <blockquote> и <cite> меняйте на свой.

Код устанавливаем в гаджет HTML/JavaScript в любом месте макета блога. Только запомните куда вы его установили. В любой момент можно убрать и установить снова, когда понадобится.

Вот и всё. Думаю пригодится. Что не понятно пишите в комментариях. Разберёмся.

Спасибо всем за внимание к моим шпаргалкам и до встречи.

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

Введите Ваш email

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

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

Для реализации используется стандартный тег kbd и задаются стили.

Элемент <kbd> (от англ. keyboard — клавиатура) используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. 

Сам результат вы можете видеть прямо в этом сообщении ниже.  Код совершенно простой. 

Вот для примера просто закрашивание текста клавиш.

Для быстрого закрашивания выделенной области цветом переднего плана используйте комбинацию клавиш Alt+Backspace или Alt+Delete.

Здесь самый стандартный код и просто текст 

<style>   kbd1 {    background: #ccc;    border-radius: 3px;>    padding: 0 4px;   }  </style> Для быстрого закрашивания выделенной области цветом переднего планаиспользуйте комбинацию клавиш <kbd1>Alt</kbd1>+<kbd1>Backspace</kbd1> или <kbd1>Alt</kbd1>+<kbd1>Delete</kbd1>.  

А сейчас с помощью стилей CSS задаём вид кнопки - тень, округление углов, рамку, цвета 

<style>kbd {border-color: #A9A9A9 #8C8C8C #C6C6C6 #C0C0C0;
border-radius: 5px 5px 5px 5px;
border-style: solid;border-width: 1px 1px 3px;
box-shadow: -1px 1px 1px #484848, 1px 1px 1px #484848;
font-family: "Courier New",Courier,monospace;
font-size: 12px;padding: 2px 6px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
text-transform: capitalize;}</style>

<kbd>Ctrl</kbd> + <kbd>F</kbd>

Получаем следующие

Чтобы найти нужное слово на странице, нажмите сочетание клавиш на компьютере  Ctrl + F

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

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

Итог - тег <kbd> используется для обозначения текста, который набирается на клавиатуре или для названия клавиш. 

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

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

Введите Ваш email

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