К основному контенту

Добавляем собственные Java Скрипты (Диалоговое окно с посетителем вашего блога)

диалоговые окнаНаверное многие из вас посещали сайты на которых перед загрузкой появлялось всплывающее окно, с предупреждением, например : “Внимание! Вы должны подтвердить, что вам есть 18 лет…” . Большинство блоггеров простые люди, у которых есть свои хобби, и зачастую кажется что блоггер не может предоставить вам всех возможностей, как сайт, однако мы уже неоднократно доказывали, что на базе блоггера можно сделать практически полноценный сайт, просто необходимо уметь использовать Java скрипты…
Так вот о том как сделать предупредительное всплывающее окно, либо несколько окон в виде диалога, например где вы просите ввести имя посетителя и пойдет речь дальше.

Итак, первый вариант предупредительного окна:
1. Окно предупреждения с кнопкой “OK”
Окно в котором вы просто спрашиваете : “ Вам есть 18 лет, на сайте находятся материалы для взрослых” – это пример, написать можете любое сообщение, которое хотите донести читателю, ниже будет кнопка “OK” при нажатии на которую читатель попадет на ваш сайт.
Скрипт необходимо вставить пустой гаджет в разделе : Настройки/Элементы страницы/Добавить гаджет , выбираем HTML/Java script и вставляем в него следующий скрипт:
<script type="text/javascript">
alert(' Внимание! На сайте секретные материалы, подтвердите что вам есть 18 ')
</script>
<noscript>Активируйте Java Scripts чтобы прочесть важное сообщение.</noscript>
В этом скрипте можете изменить текст сообщения (красная строчка), и далее строчку зеленым, это строчка которая будет всплывать если у вашего посетителя отключены Java скрипты , и окно не может быть запущенно. При нажатии кнопки “OK” или кнопки “Х” – закрыть, посетитель в обоих случаях попадает на ваш блог.
диалоговые окна с кнопкой ОК
2. Окно предупреждения с кнопкой “ OK” и “Cancel”
Это вариант предупреждения, где у читателя будет возможность отказаться от попадания на ваш блог. Для этого тем же путем вставляем в гаджеты следующий скрипт:
<script type="text/javascript">
confirm(' На данном сайте есть секретные материалы, вы хотите продолжить?');
if (confirm(' На данном сайте есть секретные материалы, вы хотите продолжить?')) {
window.location = "http://lagunof.blogspot.com/";
}
else {
window.location = "http://www.google.com/";
}
</script>
В данном скрипте вы необходимо изменить текст предупреждения на свой (выделен красны), а так же ссылки для переходов:
-зеленым выделена ссылка куда должен попасть читатель, если он нажал “ОК” (теоретически главная страница вашего блога)
-Желтым выделена ссылка куда должен попасть читатель, если он нажмет отмену.
диалоговые окна с кнопкой ОК и отмена
3. Окно предупреждения с диалоговой формой:
В данном случае нам необходимо будет добавить два гаджета.
-Первый:
<script type="text/javascript">
alert(' Вы зашли на сайт на котором находятся секретные материалы, будьте внимательны! ')
var yourName = prompt("Пожалуйста напишите ваше имя", "Читатель");
</script>
<noscript>Включите java скрипты чтобы прочитать важное сообщение</noscript>
<script type="text/javascript"></script>
В нем изменяем текст сообщения на свой (красным), затем текст просьбу написать имя посетителя(зеленым), предлагаемое имя (синим) и  текст в случае, если у читателя не активированы Java scripts в браузере (оранжевый).
- Второй скрипт, добавляем рядом с первым, либо в боковой панели, либо в шапке, так  как там будет написан текст приветствия. Скрипт следующий:
Большое спасибо<script type="text/javascript">document.write(yourName)</script>!Наслаждайтесь пребыванием на нашем сайте, всегда вам рады, не забудьте рассказать знакомым о нас <script type="text/javascript">document.write(yourName)</script>
Здесь изменяем красные строки на текст приветствия который вы желаете. В общей последовательности все будет выглядеть вот так:
диалоговые окна с кнопкой с именем 1После нажатия “ОК” читатель перейдет ко второму окну:
диалоговые окна с кнопкой с именем 2
Если он впишет свое имя, то там где вы добавили второй гаджет будет текст приветствия :
диалоговые окна с кнопкой с именем 3
Ну вот и все. Наслаждайтесь!!!

Комментарии

Популярные сообщения из этого блога

Добавляем красивый гаджет Поделиться

Если Вы регулярно совершенствуете свой блог, то Вам пригодится данная не сложная публикация, о том как добавить красивую кнопку "Поделиться". Ее особенность в том, что при наведение курсора она раскрывается и предлагает несколько сервисов в которых можно разместить ссылку на Ваш блог. Демо можно посмотреть тут!

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт