Изображение во всплывающем окне с эффектом лайтбокса в Blogger.

Вы можете разместить изображение на переднем плане с эффектом Lightbox с нужным размером. Вы также можете настроить цвет фона с помощью цветового кода, с разной прозрачностью. Вы можете настроить применение файлов cookie, чтобы всплывающее окно больше не появлялось в течение определенного периода, которые в коде определяется как 7 дней, который можно настроить. Изображение может содержать объявление, приглашение или все, что вы хотите. Там также будет крестик, чтобы скрыть его на 7 дней или достаточно просто щелкнуть в любой части макета.

Всплывающее окно с эффектом лайтбокса в Blogger.

Шаблон не нуждается в модификации для установки. Перейдите в Дизайн> Добавить гаджет>  HTML / Javascript и, в разделе для кода вставьте этот код

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script> <style> #fanpagefb{display:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3flxSFLSfnpQZmbRYdpUVrBYqHnhPqOlkk8O0Ur8BY_2EC2gN_XnLfiJwuYsqaQrAKLjwvwtV9QZ-6v0ANqHQEtsh-YsSWmQ-lBcjYlSmU9ndujlPzg5IiOG-5p63Rjep3AVU-WDOrbA/s800/sfondo.png); width:100%; height:100%; position:fixed; top:0; left:0; z-index:999999; } #fanpagexit{ width:100%; height:100%; } #likebox{ background:#fff; width:420px; height:270px; position:absolute; top:50%; left:50%; -webkit-box-shadow:inset 0 0 50px 0 #939393; -moz-box-shadow:inset 0 0 50px 0 #939393; box-shadow:inset 0 0 50px 0 #939393; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:-135px 0 0 -210px; } #chiusura{ float:right; cursor:pointer; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCvpsdQCMJG6v_1EoLnD3eciDLpBrSAVaqHwmgfQeMaPp-9lv6J5uwi5FrYhaOaPkiWtkNMwXZt146G3RuAy6l_Y7-JzJrcOwxJpyBXgA_6CZXyEIk1glFF0Rey5FshJGN2dlCeO0XKS4/s56/close.png)repeat; height:15px; padding:20px; position:relative; padding-right:40px; margin-top:-20px; margin-right:-22px; } .bordo{ height:1px; width:366px; margin:0 auto; background:#F3F3F3; margin-top:16px; position:relative; margin-left:20px; } </style> <script type="text/javascript"> jQuery.cookie=function(key,value,options){ if(arguments.length>1&&String(value)!=="[object Object]"){options=jQuery.extend({},options); if(value===null||value===undefined){options.expires=-1;} if(typeof options.expires==='number'){var days=options.expires,t=options.expires=new Date();t.setDate(t.getDate()+ days);} value=String(value); return(document.cookie=[ encodeURIComponent(key),'=', options.raw?value:encodeURIComponent(value), options.expires?'; expires='+ options.expires.toUTCString():'', options.path?'; path='+ options.path:'', options.domain?'; domain='+ options.domain:'', options.secure?'; secure':''].join(''));} options=value||{}; var result,decode=options.raw?function(s){ return s;}:decodeURIComponent;return(result=new RegExp('(?:^|; )'+ encodeURIComponent(key)+'=([^;]*)').exec(document.cookie))?decode(result[1]):null;}; </script> <script type="text/javascript"> jQuery(document).ready(function($){if($.cookie('popup_user_login')!='yes'){ $('#fanpagefb').delay(100).fadeIn('medium'); $('#chiusura, #fanpagexit').click(function(){ $('#fanpagefb').stop().fadeOut('medium')})} $.cookie('popup_user_login','yes',{path:'/',expires:7})}); </script> <div id="fanpagefb"> <div id="fanpagexit"></div> <div id="likebox"> <div id="chiusura"></div> <div class="bordo"></div> <iframe allowtransparency="true" frameborder="0" scrolling="no" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXiiQECFGA7waOWcnHL58RlYu82Fsadc6uwyxr2ANXfERZ0rhdvUHNlIvlZi67lRmFf76bd6HfeB7JqNHTpri8wfaC_krbJapKYn4GvIRQvwkxbGwpUd_PVGdebHzVd4IljLTGdLgZkN2B/s402/immagine-lightbox.png" style="border: none; height: 230px; margin-left: 8px; margin-top: -19px; overflow: hidden; width: 402px;"></iframe></div> </div>

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

Предлагаемый размер изображения составляет 402 пикселя в ширину и 230 пикселей в высоту. Если библиотека jQuery уже присутствует в вашем шаблоне, вы можете обойтись без установки выделенной желтой линией код . URL фиолетового цвета - это фоновое изображение с непрозрачностью 90% . Если вы хотите получить самый светлый фон, например, с непрозрачностью 58%

Вы должны заменить URL синего цвета на этот

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh44iylqO8qJWqOJzlyL9Z_HmiUffIFTJstO6Jpfy-yxYrJaD3cxi8FJLdZow0aydyUiOFBlIPOS78y0cnEwNB_fRkip2PWSwAScqPJRjdL-ML4ICnzO7Geb5i8pRzpcIDE-fiQMQtSuql9/s800/sfondo-2.png 

Количество дней интервала, в течение которых всплывающее окно не отображается, настраивается со строкой expires: 7. Изображение закрывающего креста задается URL-адресом синего цвета.