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

Этот скрипт немного другой. Здесь будет рандомно выводится обращение, приветствия или просто какие - то фразы. Они выбираются с помощью метода Math.random() - функции случайного числа.  В примере я использовала прикольные советы.

Посмотреть работу скрипта можно на тестовом блоге. Попробуйте несколько раз перезагрузить страницу

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

А вот и сам скрипт

<div align=center>                                                   
<span style="color:#006a6a;background-color:#ffffe1; border:3px solid #804000; padding:10px;font-family: 'Comic Sans MS', sans-serif;font-size: 14px;">

<script>
<!--
var h=(Math.random()*11);
 if (h < 1) document.writeln("Если вы боитесь поправиться, выпейте перед едой 50 грамм коньяка. Он притупляет чувство страха..");
 if (h > 1 && h < 2) document.writeln("Открывая шкаф, лучше все же сперва постучать.");
 if (h > 2 && h < 3) document.writeln("Неумение врать ещё не повод говорить правду.");
 if (h > 3 && h < 4) document.writeln("Хотите избавиться от осадка на душе - не кипятитесь.");
 if (h > 4 && h < 5) document.writeln("Не бросайте в мужа солонку - рассыпанная соль к ссоре.");
 if (h > 5 && h < 6) document.writeln("Шуруп, забитый молотком, держится крепче, чем гвоздь, закрученный отвёрткой.");
 if (h > 6 && h < 7) document.writeln("Не хватайтесь мокрыми руками за оголённые провода - они могут заржаветь.");
 if (h > 7 && h < 8) document.writeln("Чтобы слова не расходились с делом, нужно молчать и ни хрена не делать.");
 if (h > 8 && h < 9) document.writeln("Говори кратко, проси мало, уходи быстро.");
 if (h > 9 && h <10) document.writeln("Помните, что оставленные без присмотра маленькие дети очень быстро становятся маленькими родителями!");
 if (h > 10 && h <11) document.writeln("Никогда не хвалите своего мужа. У мужчин это вызывает зависть, а у женщин - желание проверить.");
// -->
</script></span></div>

Вы можете изменить всё на своё усмотрение - фон, рамку, шрифт текста и другое в этом участке кода.

<span style="color:#006a6a;background-color:#ffffe1; border:3px solid #804000; padding:10px;font-family: 'Comic Sans MS', sans-serif;font-size: 14px;">

Соответственно сами фразы пишите свои.

Небольшой совет - слишком длинные выражения не стоит применять, не особо красиво это будет выглядеть.

Весь код устанавливаем в гаджет HTML/JavaScript.

По теме можно посмотреть простой ротатор текста в блоге.

Удачи всем и яркой осени. До встречи.

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

Введите Ваш email

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

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

Для оформления всего блока в данном случае  используем HTML-теги figure и figcaption. Благодаря последнему  выводится пояснение к содержимому, которое находится внутри тега figure.

Для пущей красоты добавим лёгкий hover эффект и полупрозрачный фон.

Давайте смотреть. Скопируйте приведённый ниже код и вставьте в этом редакторе для наглядного примера. 

<div class="poem">
 <figure1>
  <p>Старинные часы</p>
  <figcaption>
   Старинные часы еще идут,<br> Старинные часы, свидетели и судьи.<br> Когда ты в дом входил,<br> Они слагали гимн,<br>Звоня тебе<br> Во все колокола.<br> Когда ты не сумел меня понять,<br>Я думала - замрут все звуки во Вселенной,<br> Но шли мои часы,<br> Торжественно, печально,<br> Я слышала их поминальный звон.
   <br>
   <div class="author">― Илья Резник</div>
  </figcaption>
 </figure1>
</div>
<style>
.poem {
 margin: 20px 35%;
}
figure1 {
 position: relative;
 background: url(https://sun9-53.userapi.com/c855416/v855416488/202f74/9bUJkyUSiHY.jpg);
 width: 320px;
 height: 350px;
 box-sizing: border-box;
 display: inline-block;
 margin: 0 auto;
 background-color: rgba(230, 230, 230, 0.7);
 color: #666;
 transition: all 0.35s ease;
 overflow: hidden;
 backface-visibility: hidden;
 box-shadow: 3px 2px 24px 0px rgba(190, 158, 167, 1);
}
figure1 p {
 width: 320px;
 background-color: rgba(255, 255, 255, 0.9);

 border-bottom: 5px solid rgba(190, 158, 167, 0.4);
 font-family: "Special Elite", cursive;
 padding: 20px;
 bottom: 5px;
 position: absolute;
 transition: all 0.45s ease;
}

figure1 figcaption {
 transform: translateX(-120%);
 background-color: rgba(255, 255, 255, 0.9);
 width: 250px;
 height: 330px;
 padding: 20px;
 position: absolute;
 top: 0px;
 bottom: 15px;
 left: 0px;
 right: 15px;
 font-family: "Faustina", serif;
 font-size: 15px;
 border: 15px solid rgba(190, 158, 167, 0.4);
 transition: all 1.5s ease;
}

figure1:hover figcaption {
 transition: all 1s ease;
 transform: translate(0, 0);
}
figure1:hover p {
 transform: translateX(-120%);
}

figure1 .author {
 text-align: right;
 margin-top: 25px;
}
</style>

Вам нужно подобрать свою картинку и вставить её адрес вместо моей. В коде эта строка отмечена оранжевым. Надпись и текст пишите, что хотите. 

Ширина 320px;

Высота 350px;

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

Особое внимание обращу на то, что если у вас в блоге уже, где - то был применён тег figure1, то могут возникнуть "неполадки". Не огорчайтесь, просто везде в коде замените тег figure1, допустим, на figure 2. 

Готовый код устанавливаем в нужное место поста в режиме  HTML (карандашик в левом верхнем углу нового редактора). Или в гаджет HTML/JavaScript. Вот такие не хитрые настройки и в итоге весьма симпатичная карточка получилась.

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

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

Введите Ваш email

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

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

Я написала свой "сценарий" со своими обращениями к читателя в зависимости от определённого участка времени. Вы сможете написать своё, более оригинальное обращение. Установка абсолютно простая.  Blogger вы идете во вкладку  Дизайн > Добавить гаджет > HTML/Javascript и устанавливаете следующий код в любое место макета блога.

А сейчас просто демонстрация для наглядности и проверка его в работе. Копируйте код и устанавливайте его в этом редакторе для просмотра результата.

Код

<div align="center">
<span style="color:#f0f; font-size:16px; font-family:Georgia; font-weight: bold;">
Самое точное время
<script>
ora = new Date();
ora1= ora.getHours();
ora2 = ora.getMinutes();
ora3= ora.getSeconds();
if(ora1==0){ora4=" AM";ora1=12}
else if(ora1 <= 11){ora4=" AM"} else if(ora1 == 12){ora4=" PM";ora1=12} else if(ora1 >= 13){ora4=" PM";ora1-=12}
if(ora2 <= 9){ora2="0"+ora2} document.write(""+ora1+":"+ora2+":"+ora3+""+ora4+""+"");
</script>
<span>
<br/>
 <span style="color:#00f; font-size:16px;font-family:Georgia; font-weight: bold;">
<script>
day1 = new Date()
ora1 = day1.getHours()
if (ora1 < "6") {
document.write(" Привет. Вы уже проснулись? ")
}else if (ora1 < "10"){
document.write(" Добрый день. Вы уже читаете мой блог, а позавтракать не забыли? ")
}else if (ora1 < "11"){
document.write(" Ух, сейчас самое время для чтения информации ")
}else if (ora1 < "12") {
document.write(" Самое время подумать про обед? ")
}else if (ora1 < "13") {
document.write(" Браво, можно немного и отдохнуть ")
}else if (ora1 < "15") {
document.write(" Время ещё есть, чтобы почитать блог ")
}else if (ora1 < "17") {
document.write(" Вы уже все дела домашние сделали, если читаете сейчас мой блог")
}else if (ora1 < "20") {
document.write(" Не забудьте посмотреть прогноз погоды на завтра ")
}else if (ora1 < "22") {
document.write(" Время позднее, про прогулку перед сном не забыли ?")
}else if (ora1 < "23") {
document.write("Если вы  здесь доброго вечера  ")
}else if (ora1 >= "23") {
document.write(" А вы не забыли пожелать доброй ночи себе и близким? ")
}
</script>
</span>
</span></span>
</div>

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

Пример, где изменены стили самого текста (это скриншоты)

Здесь добавили фон, используя свойство background-color:

Обратите внимание на тег <br/> который задаёт перенос строк. Если вы захотите поставить код в гаджет над сообщениями блога или под шапкой, его следует убрать. В этом случае вся конструкция будет в одну строку.

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

Если не нужно сообщение для посетителей, просто уберите весь участок кода от тега <br/>
Или наоборот убрать первый, чтобы оставить приветствия.

Настройки такого виджета времени и приветствия не сложные, как и установка в блоге.

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

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

Введите Ваш email

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

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

Можно добавить в блог новый и необычный шрифт от Гугл. Я писала об этом варианте в статье WEB-ШРИФТЫ для блога. Обойдёмся на этот раз без всяких скачиваний и подключений. Ниже приложила таблицу наиболее распространённых шрифтов. Ну и по теме немного информации в  самом посте. А пока перейду на обычный шрифт.

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

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

Этот текст будет примерно таким

Если перейти в режим HTML, то увидим весь код, а именно стили нашего текста, вот такого вида

<span style="color: #45818e; font-family: Courier New, Courier, monospace; font-size: large;">Этот текст будет примерно таким</span>

где

color: #45818e; - цвет самого текста
ont-family: Courier New, Courier, monospace; - семейство шрифтов
font-size: large; - размер шрифта

Собственно основные стили текста. Но сегодня речь о шрифтах. В таблице ниже вы можете выбрать нужный вам стиль текста и скопировать его название. К примеру я взяла шрифт Comic Sans Ms и заменила предыдущий на него. В результате получилось вот что. 

Этот текст будет примерно таким.

<span style="color: #45818e; font-family: comic sans ms;font-size: large;">Этот текст будет примерно таким.</span>

 распространённые русифицированные шрифты

Текст на странице	Название шрифта
Шрифт	- Arial
Шрифт	- Arial Cyr
Шрифт	- Arial Black
Шрифт	- Book antiqua
Шрифт	- Bookman old style
Шрифт	- Calibri
Шрифт	- Cambria
Шрифт	- Candara
Шрифт	- Century
Шрифт	- Century gothic
Шрифт	- Comic Sans Ms
Шрифт	- Consolas
Шрифт	- Constantia
Шрифт	- Corbel
Шрифт	- Courier
Шрифт	- Courier New
Шрифт	- Courier, monospace
Шрифт	- Cursive
Шрифт	- Franklin Gothic
Шрифт	- Gabriola
Шрифт	- Garamond
Шрифт	- Georgia
Шрифт	- Helvetica
Шрифт	- Impact
Шрифт	- Lucida console
Шрифт	- Lucida Sans Unicode
Шрифт	- Mistral (Mistral)
Шрифт	- monospace
Шрифт	- Monotype Corsiva
Шрифт	- MS Sans Serif
Шрифт	- MS Serif
Шрифт	- Palatino Linotype
Шрифт	- Sans-serif
Шрифт	- Segoe print
Шрифт	- Segoe script
Шрифт	- Sylfaen
Шрифт	- Tahoma
Шрифт	- Times New Roman
Шрифт	- Trebuchet ms
Шрифт	- Verdana

Для информации - 

Параметр font-family определяет список семейств шрифтов. Обычно задаются несколько похожих шрифтов в порядке предпочтения, а их названия разделяются запятыми

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

Семейство шрифта (примеры)

<style="font-family: 'Times New Roman', Verdana, sans-serif;">

пропала собака по кличке Дружок

<style="font-family: 'Monotype Corsiva', sans-serif;">

пропала собака по кличке Дружок

<style="font-family: 'Comic Sans MS', sans-serif;">

пропала собака по кличке Дружок

В интернете много информации по стилям шрифта, нет смысла повторяться. Ещё некоторые дополнения к статье про шрифты

Размеры шрифта

font-size: xx-small"> - очень очень маленький
font-size: x-small"> - очень маленький
font-size: small"> - маленький
font-size: medium"> - средний
font-size: large"> - большой
font-size: x-large"> - очень большой
font-size: xx-large"> - очень очень большой

В Internet Explorer бывают проблемы с масштабированием текста. И чтобы их решить вместо пикселей используется значение em. 1em равен 16 пикселям.
Допустим размер текста у нас рав 14px. Делим 14 на 16 получаем 14 / 16 = 0,875 em.

font-size:0.875em;

Имея минимальное представление о стилях шрифта, менять в Блоггер их можно где угодно. Это в самом посте, названии сообщения, подзаголовках, заголовках статей, гаджетов.

В качестве примера покажу на заголовках гаджетов на тестовом блоге.  Все заголовки были обычные

Задала  некоторые стили для них и прописала непосредственно в шаблоне ко всем гаджетам сразу.

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

Возможно, кому - нибудь пригодится информация как подключить и использовать шрифт шрифт Font Awesome в блоге.

Очень надеюсь, что хоть кому - то информация окажется полезной. Если возникли вопросы, пишите в комментариях.

Всем успехов и до встречи.

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

Введите Ваш email

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

Доброго времени суток, друзья. Вы видели на некоторых сайтах, когда при прокрутке страницы вниз, появляется вдруг блок с какой - то информацией. Это может быть баннер, картинка или просто объявление или пожелание. Любая информация.

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

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

Нам понадобится совсем не большой  код.

<style type="text/css">
body { min-height: 1500px; }
#blfix{
    display:none;
    position:fixed;
    top:0;
    width: 50%;
    padding: 20px;
}
</style>

<div id="blfix"><img alt="" height="200" src="https://avatars.mds.yandex.net/get-pdb/901820/7909be1b-5b7d-4bfa-800c-19853f1c0781/s1200" width="200" /> </div>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
jQuery(function(f){
    var element = f('#blfix');
    f(window).scroll(function(){
        element['fade'+ (f(this).scrollTop() > 1600 ? 'In': 'Out')](800);         
    });
});
</script>

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

Так же расстояние появления блока 1600  меняйте на нужное вам.

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

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

Введите Ваш email

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