1233

 
 

1233




 

Бегущая строка

Дизайн




Хорошим элементом для привлечения внимания посетителей сайта будет бегущая строка. В тексте "бегучки" можно просто написать приветствие для всех или какую-то новость. 

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

 

Если Вам не хочется разбираться в настройках бегущей строки, то можно воспользоваться всего лишь одной строкой html-кода:

 

<marquee>Текст бегущей строки</marquee>

 

1. Направление движения. 

Стандартно "бегучка" движется влево. 

 

а) Не знаю, пригодится ли это кому-то, но чтобы текст двигался вправо, нужно добавить в код параметр direction="right" И полный код строки будет таким:

 

<marquee direction="right">Ваш текст бегущей строки</marquee>

 

б) HTML код для движения вверх:

 

<marquee direction="up">Текст бегущей строки</marquee>

 

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

 

в) Код, который нужно использовать для "отправки" строки вниз:

 

<marquee direction="down">Текст бегущей строки</marquee>

 

г) Фиксируем бегущую строку - дойдя до левой границы сообщения (или гаджета) строка должна остановиться. Нам будет нужен код: 

<marquee behavior="slide">Текст бегущей строки останавливается</marquee>

 

Текст бегущей строки останавливается

 

2. Отрегулируем скорость движения текста. Для этого добавим параметр scrollamount="2" Чем больше будет цифра, тем быстрее будет бежать текст.

 

Пример: <marquee scrollamount="2">Текст бегущей строки</marquee>

 

3. Хотите цвет текста или тип шрифта изменить? Не проблема! 

 

а) Изменить цвет текста бегущей строки:  style="color: #FF0000"

 

Например: <marquee style="color: #FF3300">Цветная бегущая строка</marquee>

 

б) Шрифт "бегучки":  style="font-family: verdana"

в) Изменить можно как сам тип шрифта, так и его размер (цифрой): 

style="font-size: 2em"

 

4. Добрались до фона. При желании настраиваем фон блока с бегущей строкой. 

 

а) Высота блока (фона). За это отвечает параметр height="35", например. Указывайте нужную Вам цифру.

 

б) Ширину блока (фона) бегущей строки регулируем при помощи width="300".

 

в) И, конечно же, цвет фона. Пример кода:

<marquee bgcolor="#FF9999">Текст на цветном фоне</marquee>

 

Для выбора цвета самого текста и фона Вы можете воспользоваться статьями Таблица кодов цвета и Подбираем цвета для блога.

 

Общий принцип добавления параметров бегущей строки: 

 

берем основной код <marquee>Текст бегущей строки</marquee> и после первого тега marquee через пробел добавляем нужные настройки. 

 

Приведу пример кода бегущей строки на голубом фоне с движением вверх (сама строка в начале статьи):

 

<marquee тип шрифта + размер шрифта  + цвет текста + цвет фона + высота фона + ширина фона + движение вверх + скорость движения>Текст моей бегущей строки</marquee>

 

<marquee style="font-family: verdana" style="font-size: 3em" style="color: #FFFFFF" bgcolor="#0099FF" height="200" width="200" direction="up" scrollamount="3">Такую бегущую строку Вы можете легко (без скрипта) сделать для своего блога или сайта!

Текст может двигаться и вниз, и влево, и вправо :)</marquee>

 

 

 

Ручной паук

Дизайн




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

Текущие размеры виджета: ширина - 300px и высота - 232px

<script src="http://widgetsmonster.com/w1427995170-spider_pro&.."></script>

 

Бегущая строка с картинкой

Дизайн




Как вставить в бегущую строку картинку или ссылку

 

ля того чтобы добавить в бегущую строку ссылку, нужно всего лишь воспользоваться HTML-кодом:

 

<marquee> текст перед ссылкой <a href="http://ссылка/" title="Всплывающий текст при наведении курсора на ссылку">Отображаемый в бегущей строке текст ссылки</a></marquee>

 

Как вставить в "бегучку" любую картинку.

 

Можно взять статичную картинку, а я решила использовать анимационные - интереснее смотрится. ("Гифки" для примеров я брала на сайте http://www.juanna.ch/  Там много прикольных анимашек. Особенно для детских сайтов).

 

1. Загружаем картинку в сообщение блога (в любое, можно в черновик).

 

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

 

Например, ссылка на картинку такси у меня получилась такая: http://1.bp.blogspot.com/-O099Pm8rUYM/U1v-e5XlYDI/AAAAAAAADfo/tQMCaufgVfo/s1600/taxi.gif

 

3. Используем такой код:

 

<marquee><img title="Название картинки" src="http://адрес ссылки на картинку.gif"/>Текст Вашей бегущей строки</marquee>

 

4. Кстати, если текст бегущей строки переместить вперед, то и сама бегущая будет двигаться перед картинкой:

 

Код будет следующим: 

 

<marquee>Текст Вашей бегущей строки<img title="Название картинки" src="http://адрес ссылки на картинку.gif"/></marquee>

 

5. Еще можно направить движение текста вправо. Об этом я также писала в предыдущей статье.  Для этого в код добавляем параметр direction="right"

 

HTML-код: 

 

<marquee direction="right"><img title="Название картинки" src="http://адрес ссылки на картинку"/>Ваш текст бегущей строки</marquee>

 

6. А еще мне захотелось запустить смайлик с воздушными шариками и с бегущей строкой вверх.

 

Код брала этот: <marquee direction="up"><img title="Название картинки" src="http://адрес ссылки на картинку"/>Текст бегущей строки</marquee>

 

Виджет восхода и захода солнца

Дизайн




voshod-solnca.ru 
-------------------— 
Категория: Информеры, Время 
Описание: Виджет добавляет на сайт информацию о времени захода и восхода солнца для конкретного города. 
Настройки: Город, кол-во дней, часовой пояс, цвет текста, ширина 

<iframe src="http://voshod-solnca.ru/widget.php?view=true&amp;.." frameborder="0" width="300" scrolling="no" height="280"></iframe>

 [?]

 

Виджет социальных сетей для сайта

Дизайн




 

Категория: Соц. сети

Описание: Виджет позволяет встроить на сайт модуль с лентой последних сообщений сразу из 4 соц.сетей - ВКонтакте, Facebook, Instagram, Twitter.

Настройки: Настройки отображения внешнего вида

 

<iframe src="http://ejfe.ru/noreg?type=cube&look=wide&face=https:/www.facebook.com/Google&vk=http:/vk.com/googlerussia&twit=google&insta=google&color=CCC3BC&count=6&width=150" frameborder="0" width="490" height="375"></iframe> <!-- www.ejfe.ru -->

 

 

Партнерка фотохостинга Depositphotos

Дизайн



Категория: ФотоПартнерка
Описание: Виджет для заработка по партнерской программе. Можно использовать как галерею своих работ. Можно выводить фото по тегам, поиску или автору.
Настройки: Много настроек. Необходима регистрация!

<iframe class="dp-widget-frame" style="display: none" src="javascript:void(false)" width="400" height="450" data-dpw="43"></iframe>
<script type="text/javascript" src="//static.depositphotos.com/js_c/widget-ext.js"></script>
<script type="text/javascript">(function(){new dpw({"format":"iframe","trackingLink":"http://tracking.depositphotos.com/aff_c?offer_id=4..","feedtype":"search","searchquery":"girls hot","theme":"white","background":"false","photo":true,"sort":"1","thumbsize":"specify_size","specify_size":"130","feedwidth":"400","feedheight":"450","searchBar":true,"showlogo":true,"preview":true,"showborder":true,"wid":43,"lang":"ru"}).init(); })();</script>

<a href="http://komlevs.ru/?utm_source=embedru&utm_medium=..">Услуги фотографа в Москве</a>

Статус дня

Дизайн



 

 

Виджет с разными статусами, датой и днем недели. На выбор 4 цвета
Настройки: Цвет

<a href="http://complimentos.com/" title="Статус дня" target="_blank"><img src="http://complimentos.com/inf/?color=blue" alt="Статус дня" width="240" height="240" border="0" /></a>

 

Телевидение на твоём сайте

Технологии



Вы можете разместить специальный код плеера на своем сайте и Ваши посетители получат возможность бесплатно смотреть более 100 ТВ каналов.

 

<iframe scrolling="no" frameborder="0" src="http://tvforsite.ru/onlinetv.php?playerid=71441" width="640px" height="393px"> Your browser doesn not support floating frames! </iframe>

 

 

 



Обновлен 31 авг 2017. Создан 21 апр 2017



  Комментарии       
Имя или Email


При указании email на него будут отправляться ответы
Как имя будет использована первая часть email до @
Сам email нигде не отображается!
Зарегистрируйтесь, чтобы писать под своим ником
 

Flag Counter