<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('lebaran').style.display='flex';kupat.style.display='none';'>
<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('lebaran').style.display='none';kupat.style.display='block';'><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>
Давайте немного разберём настройки. Они не сложные, справимся легко.
Первая картинка, адрес которой выделен розовым, это картинка расположенная
слева во всплывающем окне.
Мы расположили миниатюру в левом углу блога. Можно установить в правом, заменив все значения left (6 раз) на right. Будьте внимательны ко всем символам в коде.
Код устанавливаем в гаджет HTML/JavaScript в любом месте макета блога. Только запомните куда вы его установили. В любой момент можно убрать и установить снова, когда понадобится.
Вот и всё. Думаю пригодится. Что не понятно пишите в комментариях. Разберёмся.