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

У меня была статья как сделать постоянно меняющийся фон страницы, в которой предложен вариант для блога в целом и для отдельной страницы.

То, чем делюсь сегодня, можно посмотреть наглядно на тестовом блоге.

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

Код совершенно простой и не требует каких - то особых навыков. Заранее приготовьте нужные картинки, которые будут фоновым изображением. Рассчитано на 6 меняющих друг друга слайдов.

<style>

ul#fonstyly {
list-style:none;
}
.dsimageanimation {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.dsimageanimation li#fonlink span#fondrive {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.dsimageanimation li#fonlink:nth-child(1) span#fondrive {
background-image: url(Адрес картинки 1);
}
.dsimageanimation li#fonlink:nth-child(2) span#fondrive {
background-image: url(Адрес картинки 2);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.dsimageanimation li#fonlink:nth-child(3) span#fondrive {
background-image: url(Адрес картинки 3);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.dsimageanimation li#fonlink:nth-child(4) span#fondrive {
background-image: url(Адрес картинки 4);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.dsimageanimation li#fonlink:nth-child(5) span#fondrive {
background-image: url(Адрес картинки 5);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.dsimageanimation li#fonlink:nth-child(6) span#fondrive {
background-image: url(Адрес картинки 6);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
 25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% {opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>

<ul class="dsimageanimation" id="fonstyly">
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
</ul>

Розовым цветом я отметила где нужно вставить адреса ваших изображений. Высота и ширина задана уже 100%.
Теперь, просто пишите обычным способом сообщение. Затем перейдите в режим HTML и вставьте полностью готовый код.

Картинки лучше подобрать с таким фоном, чтобы текст был виден контрастнее. Публикуйте сообщение и полюбуйтесь на его анимированный фон.

Если есть желание можно просто изменить фон страницы на желаемый.

У меня сегодня всё. До встречи. 

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

введите пожалуйста свой email :

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

Всем, привет. Как добавить текстовый водяной знак в свой блог Blogspot. Мы привыкли, что  водяной знак (watermark), наложенный на изображение в виде надписи или логотипа, указывает на его первоисточник - конкретного человека, конкретный веб-сайт или иной проект в Интернете, которым принадлежит авторство на это изображение.

Попробуйте установить watermark на все статьи, чтобы связать содержимое вашего блога с вашим именем  или брендом.

Посмотрите на тестовом блоге, как примерно это будет выглядеть.

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

Как добавить текстовый водяной знак в блог.

1. Идём во вкладку Тема и сделаем резервное копирование.

2. С помощью клавиш CTRL + F ( читаем здесь), находим вот такой фрагмент кода

<data:post.body/>

таких вхождений в шаблоне может быть несколько. У меня на одном тестовом блоге было 4.

Все их нужно заменить на

<div class='hbzwatermark'><data:post.body/></div>

3. Там же в шаблоне перед строкой ]]></b:skin> нужно вставить следующий код

.hbzwatermark::before {
    display: block;
    background: url("https://1.bp.blogspot.com/-uREyJXjuSeA/W-PZpI5gtoI/AAAAAAAALIc/4elEZvnX4LI7iKiedg4Exvre5OL0KPGywCLcBGAs/s1600/%25D0%2594%25D0%25B8%25D0%25B7%25D0%25B0%25D0%25B9%25D0%25BD%2B%25D0%25B1%25D0%25B5%25D0%25B7%2B%25D0%25BD%25D0%25B0%25D0%25B7%25D0%25B2%25D0%25B0%25D0%25BD%25D0%25B8%25D1%258F.png");
    position: absolute;
    height: 200%;
    bottom: -100%;
    left: 0%;
    width: 5000%;
    transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    transform-origin: left center;
    -moz-transform-origin: left center;
    -webkit-transform-origin: left center;
    content: "";
    z-index: -1;
    background-size: auto 30px;
    opacity: 0.1;
    background-repeat: repeat;
}
.hbzwatermark {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

Зелёным цветом я выделила адрес картинки - надписи водяного знака. Я воспользовалась сервисом Crello и за пару минут создала картинку в формате PNG. Вы можете воспользоваться своими вариантами. И естественно замените картинку на ваш вариант.

отрегулируйте значение размера знака  auto 30px; на нужный
отрегулируйте значение opacity: 0.1; в диапазоне от 0,1 до 1,0 для установки прозрачности  водяного знака.

Не забудьте сохранить шаблон и посмотрите блог. 

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

введите пожалуйста свой email :

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

Доброго времени суток, друзья. Хочу вам показать самый простой способ, как в Блоггере показать и скрыть ленту комментариев. Наверняка вы уже видели такой вариант на некоторых блогах. Многие применяют его просто, как элемент дизайна. Кто - то хочет просто скрыть очень большое количество комментариев, чтобы не отвлекать пользователей от основного контента. Другие же, наоборот, не хотят видеть пустое поле, где написано "Комментариев нет".

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

Заходим во вкладку тема и и там, где вся секция инклудов, нажмите на чёрные стрелочки слева (маркеры), чтобы открыть полностью коды. С помощью горячих клавиш Ctrl + F находим строку

<b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>

или просто вбейте в поиск 

data='post' name='comments'/

и заменим её на следующий код

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>
.buka-komen,.tutup-komen{font-family:inherit;background-color:#11589D;color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:20px 0 0;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
</style>
<div aria-label='Показать комментарии' class='buka-komen' id='buka-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;block&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;none&quot;' role='button' tabindex='0'>Показать комментарии</div>
<div aria-label='Скрыть комментарии' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById(&quot;comments-box&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;tutup-komen&quot;).style.display=&quot;none&quot;;document.getElementById(&quot;buka-komen&quot;).style.display=&quot;block&quot;' role='button' tabindex='0'>Скрыть комментарии</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {&quot;static_page&quot;,&quot;item&quot;}' data='post' name='comments'/>
          </div>

background-color:#11589D;color:#fff;font-size:16px  цвет кнопки и шрифта

Сохраните шаблон. Вуаля. Бегите в блог и смотрите что получилось в итоге.

Возможно вам понравится статья как вставить надпись или иконку в форму отправки комментариев
Или захотите изменить дизайн комментариев.

У меня сегодня всё и до встречи. 

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

введите пожалуйста свой email :

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

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

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

Ну а кто не особо хочет копаться в шаблоне или пока боится что - то править, предлагаю небольшой код, который хоть как - то изменит внешний вид (фон) коробки самого гаджета. Вот так примерно.

Настройки минимальные, лишь  добавим немного стилей. Идём во вкладку Тема и перед строкой ]]></b:skin> в шаблоне установим вот такую строчку

#followers-iframe-container {background:#CCC!important;}

background:#CCC  замените на желаемый цвет. Можно воспользоваться этим редактором.

если захотите использовать вместо фона изображение

вставьте так же следующий фрагмент кода

#followers-iframe-container {background:url(здесь адрес фонового изображения)!important;}

Сохраните шаблон.

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

P.S. Уже давно ходят слухи, что гаджет "Постоянные читатели"  разработчики хотят убрать. Но пока он присутствует в макете и пользуется популярностью.

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

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

введите пожалуйста свой email :

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

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

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

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

<style type='text/css'> /*<![CDATA[*/ #navbar-iframe { display: none !important; } #slider{ z-index:9999; position:fixed;    top:-127px;    right:0px;    height:130px; width:100%;    background-color:#fff;    opacity:0.95;    -moz-box-shadow:    0px 0px 8px #ccc;    -webkit-box-shadow: 0px 0px 8px #ccc;    box-shadow:         0px 0px 8px #ccc;   }   .IPCEI_footer{margin-top:-10px;font-size:1.1em;} #slider #slider-shell{width:800px; height:120px;margin:15px auto;    position:relative;}   #slider #slider-tab{position:absolute; bottom:7px; right:0px;    width:800px; text-align:right; padding-right:0px;    cursor:pointer; font-size:1.2em; color:#f00 !important; font-weight:bold;} #IPCEI_embed_signup{ background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }#IPCEI_embed_signup form {display:block; text-align:left; padding:10px 0 10px 3%}#IPCEI_embed_signup h2 {font-weight:bold; padding:0; margin:15px 0; font-size:1.4em;}#IPCEI_embed_signup input {border:1px solid #999; -webkit-appearance:none;}#IPCEI_embed_signup input[type=checkbox]{-webkit-appearance:checkbox;}#IPCEI_embed_signup input[type=radio]{-webkit-appearance:radio;}#IPCEI_embed_signup input:focus {border-color:#191919;}#IPCEI_embed_signup .button {clear:both; background-color: #aaa; border: 0 none; border-radius:4px; color: #FFFFFF; cursor: pointer; display: inline-block;font-size:15px; font-weight: bold; height: 32px; line-height: 32px; margin: 0 5px 10px 0; padding:0; text-align: center; text-decoration: none; vertical-align: top; white-space: nowrap; width: auto;}#IPCEI_embed_signup .button:hover {background-color:#191919;}#IPCEI_embed_signup .small-meta {font-size: 11px;}#IPCEI_embed_signup .nowrap {white-space:nowrap;}     #IPCEI_embed_signup .clear {clear:none; display:inline;}#IPCEI_embed_signup label {display:block; font-size:16px; padding-bottom:10px; font-weight:bold;}#IPCEI_embed_signup input.email {padding:8px 0; margin:0 4% 10px 0; text-indent:10px; width:58%; min-width:130px;}#IPCEI_embed_signup input.button {width:35%; margin:0 0 10px 0; min-width:90px; }  /*]]>*/
</style>
<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script><div id='slider' style='top: -108px;'><div id='slider-shell'><div id='IPCEI_embed_signup'><form action='http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru' id='subscription-email-form' method='post' onsubmit='window.open(&quot;http://feedburner.google.com/fb/a/mailverify?uri=shpargalochkiru&quot;, &quot;popupwindow&quot;, &quot;scrollbars=yes,width=550,height=520&quot;); return true' target='popupwindow'><label for='IPCEI-EMAIL'>Получайте на почту уведомления о новых статьях блога</label><input class='email' id='IPCEI-EMAIL' name='email' placeholder='Введите Ваш Email' required='required' type='email' /><div class='clear'><input class='button' id='subscription-email' style='background-color: #0066cc;' type='submit' /></div></form></div><div id='slider-tab'>Подписка на обновления блога</div></div></div><script type='text/javascript'>$(document).ready(function(){function isScrolledDown(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(e<=c)}function isScrolledUp(a){var b=$(window).scrollTop();var c=b+$(window).height();var d=$(a).offset().top;var e=d+$(a).height();return(d-200>=c)}function bringSliderOut(){$(f).animate({top:0},'fast');$('#slider-tab').text('Скрыть...')}function bringSliderIn(){$(f).animate({top:-108},'fast');$('#slider-tab').text('Подписка на обновления блога')}var f=$('#slider');var g=$('#comments');var h=false;var i=false;$('#slider-tab').click(function(){if(!i){bringSliderOut();i=true}else{bringSliderIn();i=false}});$(window).scroll(function(){if(isScrolledUp(g)){if(h){bringSliderIn();h=false;i=false}}else if(isScrolledDown(g)){if(!h){bringSliderOut();i=true;h=true}}})});  </script>

В строке

#slider-tab{position:absolute; bottom:7px; right:0px;    width:800px; text-align:right; padding-right:0px;    cursor:pointer; font-size:1.2em; color:#f00 !important; font-weight:bold;} 

Возможно придётся изменить некоторые значения. Ширину width:800px;, размер шрифта font-size:1.2em; цвет шрифта color:#f00  и значение bottom:7px;

Вместо shpargalochkiru  вставьте адрес вашего фида в 2 местах. Посмотрите в статье красивая элегантная форма подписки где его взять.

Текст полей отмечен зелёным цветом. Вообще, в первом коде CSS, можно сделать очень много персональных настроек - изменить прозрачность, размеры и цвета шрифтов, вид кнопки и другие.

Готовый код устанавливается в гаджет HTML/JavaScript  в любом месте блога. Если будет не совсем корректно выглядеть поиграйтесь со значение  width:800px и расстоянием bottom:7px;

Сложного ничего в установке такой формы подписки нет - было бы желание. Что не понятно, пишите в комментариях.

У меня всё. Всем добра и до встречи. 

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

введите пожалуйста свой email :

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