Привет, друзья. При открытии некоторых сайтов можно видеть сначала приветственную заставку, которая через несколько секунд пропадает и пользователю открывается сам сайт. Наверняка вы встречали такое в сети. Видела я очень интересные варианты оформления такой приветственной заставки. Которая совсем не отвлекает и не раздражает. На ней просто "зависнуть" хочется.
Такую фишку легко реализовать и на Блоггере. Тут главное подключить фантазию. На примере, который я вам покажу, фантазии у меня не очень хватили. Но в качестве примера - всё же.
Для реализации нужно зайти во вкладку Тема и найти закрывающийся тег </ head>. Прямо над ним установить этот код
Там же находим <body>. Он где - то рядом с предыдущим. В некоторых шаблонах вместо него есть такая строка
Сразу после тега или этой строчки неё следующий код
Ваши индивидуальные настройки
В строках отмеченных зелёным цветом пишите свой текст. Адрес изображения отмечен розовым цветом.
5000 - это время в миллисекундах, когда сообщение остается видимым до исчезновения
# E4F9F8 - цвет фона на странице сообщений
width:600px; height: 400 px ширина и высота сообщения
верх: 40 % ; слева: 40% ; - это процентная точка макета, где начинается сообщение
color: # 003366 - цвет текста сообщения
размер шрифта: 24 px; line-height: 24 px - это размер символов и строк текста сообщения
text-align: center ; для центрирования сообщения и любых вставленных изображений
После установки кодов не забудьте сохранить шаблон и посмотрите результат. Кстати, советую подумать - в канун праздников можно использовать такую приветственную заставку в качестве поздравления читателям или сделать важное объявление.
Всем добра и до встречи.
Такую фишку легко реализовать и на Блоггере. Тут главное подключить фантазию. На примере, который я вам покажу, фантазии у меня не очень хватили. Но в качестве примера - всё же.
Для реализации нужно зайти во вкладку Тема и найти закрывающийся тег </ head>. Прямо над ним установить этот код
<style type='text/css'>
.visibile {display:block;}
.invisibile {display:none;}
</style>
<script type='text/javascript'>
function mostranascondi(identificazione){
var menu = document.getElementById(identificazione);
if(menu.className == "visibile"){menu.className = "invisibile"; }
else{ menu.className = "visibile"; }
}
</script>
.visibile {display:block;}
.invisibile {display:none;}
</style>
<script type='text/javascript'>
function mostranascondi(identificazione){
var menu = document.getElementById(identificazione);
if(menu.className == "visibile"){menu.className = "invisibile"; }
else{ menu.className = "visibile"; }
}
</script>
Там же находим <body>. Он где - то рядом с предыдущим. В некоторых шаблонах вместо него есть такая строка
<body expr:class='"loading" + data:blog.mobileClass'>
Сразу после тега или этой строчки неё следующий код
<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='visibile' id='benvenuto' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visibile; width:100%; height:100%; background: #E4F9F8;'>
<div style='width:600px; height:400px; position:absolute; top:40%; left:40%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#003366; font-size:24px; line-height:24px; text-align:center;'>
<p><strong>ДОБРО ПОЖАЛОВАТЬ!!!</strong></p>
<p><strong>РАДА ВАС ВИДЕТЬ </strong></p>
<p><img src='https://www.kittstillrocks.com/wp-content/uploads/2018/10/kittstillrocks-com-welcome-1024x261.png'/></p>
<p><strong> СЕЙЧАС БЛОГ ОТКРОЕТСЯ</strong></p>
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout("mostranascondi('benvenuto')", 5000);
</script>
</b:if>
<div class='visibile' id='benvenuto' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visibile; width:100%; height:100%; background: #E4F9F8;'>
<div style='width:600px; height:400px; position:absolute; top:40%; left:40%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#003366; font-size:24px; line-height:24px; text-align:center;'>
<p><strong>ДОБРО ПОЖАЛОВАТЬ!!!</strong></p>
<p><strong>РАДА ВАС ВИДЕТЬ </strong></p>
<p><img src='https://www.kittstillrocks.com/wp-content/uploads/2018/10/kittstillrocks-com-welcome-1024x261.png'/></p>
<p><strong> СЕЙЧАС БЛОГ ОТКРОЕТСЯ</strong></p>
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout("mostranascondi('benvenuto')", 5000);
</script>
</b:if>
Ваши индивидуальные настройки
В строках отмеченных зелёным цветом пишите свой текст. Адрес изображения отмечен розовым цветом.
5000 - это время в миллисекундах, когда сообщение остается видимым до исчезновения
# E4F9F8 - цвет фона на странице сообщений
width:600px; height: 400 px ширина и высота сообщения
верх: 40 % ; слева: 40% ; - это процентная точка макета, где начинается сообщение
color: # 003366 - цвет текста сообщения
размер шрифта: 24 px; line-height: 24 px - это размер символов и строк текста сообщения
text-align: center ; для центрирования сообщения и любых вставленных изображений
После установки кодов не забудьте сохранить шаблон и посмотрите результат. Кстати, советую подумать - в канун праздников можно использовать такую приветственную заставку в качестве поздравления читателям или сделать важное объявление.
Всем добра и до встречи.
хотите оформить подписку на новые шпаргалки
Виктория, интересно! Спасибо! Подумаю!
ОтветитьУдалитьПопробуй, Ирина на тестовом блоге сначала. Там поиграться с картинкой можно
ОтветитьУдалитьПрикольно! Нужно попробовать.
ОтветитьУдалитьУ меня вопрос не по теме.
Я поменяла заголовки в блоге, теперь они оптимизированы, но почему то стало по два заголовка H1. Один правильный, а другой - исходный текст. Спрашивала на сайте, там где взяла коды для смены заголовков, ни чем не помогли. Может вы подскажете в каком хоть направлении искать ошибку? И что за исходный текст в H1. Заранее благодарна.
Наталья я почти ничего не поняла. вы бы мне тот сайт откуда это брали показали. Вот это я совсем не поняла- стало по два заголовка H1. Один правильный, а другой - исходный текст. И какие именно заголовки поменяли - H1 на H2. Или ещё что. Поподробнее бы.
ОтветитьУдалитьПосмотрела Ваш код у Вас и заголовок блога h1. и заголовки сообщения под двумя вообще
Удалитьh1.post-title, h2.post-title {
font: italic bold 30px Play;
color: #004e28;
}
h1.post-title, h2.post-title a {
font: italic bold 30px Play;
color: #004e28;
}
h1.post-title, h2.post-title a:hover {
color: #004e28;
text-decoration: underline;
}.post-title, h2.post-title {
font: italic bold 30px Play;
color: #004e28;
}
h1.post-title, h2.post-title a {
font: italic bold 30px Play;
color: #004e28;
}
h1.post-title, h2.post-title a:hover {
color: #004e28;
text-decoration: underline;
}
Прикольная штука! Но я почему-то люблю, чтобы всё открывалось быстро и сразу. Если какой-либо сайт тормозит, ухожу оттуда. Внутренняя нетерпеливость подводит).
ОтветитьУдалитьВалерия, да это у всех так со всякого рода всплывающими окнами. Но всё равно пользуются. кому - то может и пригодится. Делают всё равно.
УдалитьОбычно меня раздражают всплывающие окна,но тут мне понравилось,поставила себе на пробу
ОтветитьУдалитьА это не всплывающее окно, заставка. Разные вещи.
Удалить