Как установить радио на сайт
Вы здесь:
Главная — HTML — HTML Основы — Как установить радио на сайт
На некоторых сайтах встречается радио, которое пользователи могут свободно прослушать. И в этой статье я расскажу, как установить радио на сайт.
Безусловно, для этого надо использовать уже готовые сервисы, которые выдают просто код. Данный код Вы размещаете у себя на сайте в требуемом месте, после чего радио заработает.
Таких сервисов огромное количество, Вы можете выбрать любой из них. Вот этот сервис мне попался самым первым: http://radiopotok.ru/radio_on_site/. Здесь в списке надо выбрать требуемые радиостанции, далее нажать на «Получить код«.
После этого Вы получите примерно следующее:
<div align="center">
<a href="http://radiopotok.ru/">Онлайн радио</a>
<script type="text/javascript">
<!--
var RP_font_size = '16px'; // Размер шрифта
var RP_bg_color = 'white'; // Цвет фона
var RP_border_color = 'white'; // Цвет рамки таблицы
var RP_border_size = '2px'; // Толщина рамки таблицы
var RP_grid_color = 'silver'; // Цвет сетки таблицы
var RP_a_color = 'blue'; // Цвет ссылки
var RP_a_color_hover = 'red'; // Цвет ссылки при наведении
var RP_new_window = false; // Слушать радио в новом окне [true/false]
//-->
</script>
<script type="text/javascript" src="http://radiopotok.ru/f/script/ca1604d7521508d4dda674072908d725.js" charset="UTF-8"></script>
</div>
Данный код Вы просто размещаете у себя на сайте, после чего пользователи смогут слушать выбранные Вами изначально радиостанции.
Вот так легко и быстро можно установить радио у себя на сайте.
-
Создано 05.07.2013 10:11:10 -
Михаил Русаков
Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
Скрипт онлайн радио на сайт
Если здесь не работает — послушать радио онлайн можно на сайте Отдыхай-ка! (в нижней части страницы, плеер на желтом фоне).
Радиостанции на русском языке я расположила в алфавитном порядке для удобства поиска. Если Вы хотите добавить к себе на сайт скрипт с этими же станциями, то скопируйте вот этот код:
<div>
<a href=»https://www.radiobells.com/» rel=»nofollow»>Онлайн радио</a> #radiobells_script_hash</div>
<link href=»https://www.radiobells.com/script/style.css» type=»text/css» rel=»stylesheet» /><script type=»text/javascript»>var rad_backcolor=»#ffff6b»; var rad_logo = «white»; var rad_autoplay = false; var rad_width = «responsive»; var rad_width_px = 330;var rad_stations =[[‘http://ic7.101.ru:8000/a100?userid=0′,’Авторадио’,’avtoradio’],[‘http://bfm.hostingradio.ru:8004/fm’,’Бизнес FM’,’businessfm’],[‘http://listen2.myradio24.com:9000/8286?2′,’Большое радио’,’bigradio’],[‘http://misato.ru-hoster.com:8082/stream’,’Волшебное радио’,’poleskazok’],[‘http://media.govoritmoskva.ru:8000/rufm.mp3′,’Говорит Москва’,’govoritmoskva’],[‘http://ic3.101.ru:8000/a199?userid=0′,’Детское радио’,’detskoeradio’],[‘http://online.radiojamfm.ru:8000/jam_aacplus’,’Джем FM’,’jammradio’],[‘http://ic7.101.ru:8000/a1?userid=0′,’Дискотека 80-х’,’disco80′],[‘http://ic7.101.ru:8000/a144?userid=0′,’Дискотека СССР’,’discoussr’],[‘http://dorognoe.hostingradio.ru:8000/dorognoe’,’Дорожное радио’,’dorognoe’],[‘http://dor2server.streamr.ru:8000/dorognoe1945.mp3′,’Дорожное радио — Танцы по-русски’,’dorognoetancyporusski’],[‘http://stream.hoster.by:8081/pilotfm/audio/icecast.audio’,’Душевное радио’,’dushevnoeradio’],[‘http://ep256.hostingradio.ru:8052/europaplus256.mp3′,’Европа плюс’,’europaplus’],[‘http://eptop128server.streamr.ru:8033/eptop128’,’Европа Плюс: ТОП 40 ‘,’europaplustop40’],[‘http://emg02.hostingradio.ru/ep-new128.mp3′,’Европа Плюс: New’,’europaplusnew’],[‘http://live1.zharafm.ru:8000/live’,’Жара FM’,’zharafm’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_zaychata_256.mp3′,’Зайцев FM: Зайчата’,’zaycevfmzaychata’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_pop_256.mp3′,’Зайцев FM: Поп-музыка’,’zaycevpop’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_relax_256.mp3′,’Зайцев FM: Релакс’,’zaycevrelax’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_rurock_256.mp3′,’Зайцев FM: РуРок’,’zaycevfmrurock’],[‘http://zaycevfm.cdnvideo.ru/ZaycevFM_shanson_256.mp3′,’Зайцев FM: Шансон’,’zaycevfmshanson’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_bass_256.mp3′,’Зайцев FM: Bass’,’zaycevfmbass’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_disco_256.mp3′,’Зайцев FM: DISCO’,’zaycevdisco’],[‘http://zaycevfm.cdnvideo.ru/ZaycevFM_electronic_256.mp3′,’Зайцев FM: Club’,’zaycevclub’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_holiday_256.mp3′,’Зайцев FM: Love’,’zaycevlove’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_rock_256.mp3′,’Зайцев FM: New Rock’,’zaycevfm’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_metal_256.mp3′,’Зайцев FM: Metal’,’zaycevfmmetal’],[‘https://zaycevfm.cdnvideo.ru/ZaycevFM_rap_256.mp3′,’Зайцев FM: Rap’,’zaycevrap’],[‘http://zaycevfm.cdnvideo.ru/ZaycevFM_rnb_256′,’Зайцев FM: RNB’,’zaycevhiphop’],[‘http://zaycevfm.cdnvideo.ru/ZaycevFM_rus_256.mp3′,’Зайцев FM: RUS’,’zaycevrus’],[‘http://setmedia.ru:8000/high’,’Золотой век’,’zolotoyvek’],[‘http://176.101.223.52:8000/klassnoe’,’Классное радио’,’klassradio’],[‘https://kommersant77.hostingradio.ru:8085/kommersant64.mp3′,’Коммерсант FM’,’kommersantfm’],[‘http://radio-holding.ru:9000/marusya_default’,’Маруся ФМ’,’radiomarusyafm’],[‘http://37.187.174.88:8103/djiir’,’Мега Дискач 90-х’,’megadiskach90′],[‘http://stream.megaradio.pro/MegaRadio’,’Мега Радио’,’megaradio’],[‘http://air2.radiorecord.ru:805/mdl_320′,’Медляк FM’,’medliakfm’],[‘http://online-melodiafm.tavrmedia.ua/MelodiaFM_HD’,’Мелодия ФМ’,’melodia’],[‘http://air.radiorecord.ru:805/naft_320′,’Нафталин FM’,’naftalinfm’],[‘http://nashe1.hostingradio.ru/nashe-128.mp3′,’Наше радио’,’nashe’],[‘https://nashe1.hostingradio.ru:18000/nashe20-128.mp3′,’Наше Радио 2.0′,’nashe20’],[‘http://icecast.newradio.cdnvideo.ru/newradio3′,’Новое радио’,’newradio’],[‘http://nostalgiafm.hostingradio.ru:8000/nostalgiafm.mp3′,’Ностальгия ФМ’,’nostalgiafm’],[‘https://listen7.myradio24.com/alexx333′,’Ностальжи Россия’,’nostalgie’],[‘http://s02.radio-tochka.com:4130/radio’,’Обычное Радио’,’obychnoeradio’],[‘http://radio.oneex.ru:9000/8234′,’Отличное радио’,’otlihnoeradio’],[‘https://listen6.myradio24.com/95364′,’Отличное Радио: Русское’,’otlichnoeradiorus’],[‘http://217.19.105.43:8000/’,’Первое Радио’,’pervoeradio’],[‘http://online.pilotfm.ru:8000/pilot’,’Пилот FM’,’pilotfm’],[‘http://radio.dline-media.com/ppr128.mp3′,’Пионер FM’,’pionerfm’],[‘http://radio.dline-media.com/ru-wave.mp3′,’Пионер FM: Русская волна’,’pionerfmruwave’],[‘http://radio.dline-media.com/ppr_90.mp3′,’Пионер FM: Dance 9.0′,’pionerfm90’],[‘http://radio.dline-media.com/popularka’,’Популярное радио’,’popularnoeradio’],[‘http://stream.pravilnoeradio.ru:8000/pr_mpeg’,’Правильное Радио’,’pravilnoeradio’],[‘http://a9.radioheart.ru:8028/RH9354′,’Просто Радио’,’fmprosto’],[‘http://stream.zenolive.com/4vtkfq9p02quv’,’Пятница FM’,’pyatnicafm’],[‘http://radio.angelsradio.ru:9000/8162′,’Радио Ангелов’,’angelsradio’],[‘http://icecast-radiovanya.cdnvideo.ru/radiovanya’,’Радио Ваня’,’vanya’],[‘http://air.radioday.fm/mp3′,’Радио День’,’radioday’],[‘http://icecast-radiofortwo.cdnvideo.ru/radiofortwo’,’Радио для двоих’,’radiodd’],[‘https://icecast-zvezda.cdnvideo.ru/zvezda_128′,’Радио Звезда’,’zvezda’],[‘http://iskatel.hostingradio.ru:8015/iskatel-128.mp3′,’Радио ИСКАТЕЛЬ’,’radioiskatel’],[‘http://setmedia.ru:8000/high4′,’Радио Кабриолет’,’kabriolet’],[‘http://s03.radio-tochka.com:6045/;’,’Радио Кафе’,’radiocafe’],[‘http://icecast.vgtrk.cdnvideo.ru/kulturafm_mp3_192kbps’,’Радио Культура’,’cultura’],[‘http://85.114.140.64:8000/666′,’Радио Лучшие Песни’,’luchiepesni’],[‘https://maximum.hostingradio.ru/maximum96.aacp’,’Радио Максимум’,’maximum’],[‘http://radio.radiomart38.com:8010/stream’,’Радио Март’,’radiomart’],[‘http://radio.radiomart38.com:8050/stream’,’Радио Март Хиты 80-х — 90-х’,’radiomart8090′],[‘http://icecast.vgtrk.cdnvideo.ru/mayakfm_mp3_192kbps’,’Радио Маяк’,’mayak’],[‘http://listen.megahit.online/mega0mp128′,’Радио Мегахит’,’megahitonline’],[‘http://stream.radiometal.com:8010/;’,’Радио Метал’,’radiometal’],[‘http://icecast.mirtv.cdnvideo.ru:8000/radio_mir128′,’Радио МИР’,’radiomir’],[‘https://montecarlo.hostingradio.ru/montecarlo96.aacp’,’Радио Монте-Карло’,’montecarlo’],[‘http://radio.dline-media.com/myata’,’Радио Мята’,’radiomyata’],[‘http://radio.lagoonfm.ru:8005/neformat256′,’Радио Неформат’,’neformat’],[‘http://online.olimpfm.ru:8000/olimp’,’Радио Олимп’,’olimp’],[‘https://orfeyfm.hostingradio.ru:8034/orfeyfm128.mp3′,’Радио Орфей’,’orfey’],[‘http://cast.radiopyatnica.com.ua/radiopyatnica’,’Радио Пятница’,’radiopyatnica’],[‘http://89.175.27.162:9000/aacp48′,’ Радио Премиум’,’rpfm’],[‘http://air.radiorecord.ru:805/rr_320′,’Радио Рекорд’,’radiorecord’],[‘http://air.radiorecord.ru:805/1980_320′,’Радио Рекорд 1980-е’,’radiorecord80′],[‘http://online-radiorelax.tavrmedia.ua/RadioRelax_HD’,’Радио Релакс’,’radiorelax’],[‘http://stream1.radiord.ru:8000/live96.aac’,’Радио Родных Дорог’,’radiord’],[‘http://icecast.radiorocks.cdnvideo.ru/roks.stream’,’Радио Рокс’,’roksfm’],[‘http://ic7.101.ru:8000/a101?userid=0′,’Радио Романтика’,’romantika’],[‘https://rfe04.akacast.akamaistream.net/7/509/437762/v1/ibb.akacast.akamaistream.net/rfe04′,’Радио свобода’,’radiosvoboda’],[‘http://online.radioc.ru:8000/radioc_aacplus’,’Радио Си’,’radioci’],[‘https://rr-sonya.hostingradio.ru/sonya96.aacp’,’Радио Соня’,’rusradiosonya’],[‘http://audio2.video.ria.ru/voicerus’,’Радио Спутник’,’radiosputnik’],[‘https://listen2.myradio24.com/4156′,’Радио странствий’,’radiostranstviy’],[‘http://stream.zenolive.com/k3mfhvxwy2quv’,’Радио Тень’,’tenfm’],[‘http://chanson.hostingradio.ru:8041/chanson256.mp3′,’Радио Шансон’,’chanson’],[‘http://5.19.168.205:8000/;stream.nsv’,’Радио Шансон 24′,’shanson24′],[‘http://radio.radioshansonplus.com:8000/radio’,’Радио Шансон Плюс’,’radioshansonplus’],[‘http://chanson.hostingradio.ru:8041/chanson-romantic256.mp3′,’Радио Шансон: Романтический’,’chansonromantic’],[‘http://spb.radioshock.ru/radioshock’,’Радио Шок’,’shok’],[‘http://choco.hostingradio.ru:10010/fm’,’Радио Шоколад’,’chocolate’],[‘http://icecast-vgtrk.cdnvideo.ru/unost_mp3_192kbps’,’Радио Юность’,’ufm’],[‘http://nashe1.hostingradio.ru/best-128.mp3′,’Радио Best’,’bestfm’],[‘http://ic7.101.ru:8000/a99?’,’Радио Energy’,’nrj’],[‘https://nashe1.hostingradio.ru:18000/ultra-192.mp3′,’Радио ULTRA’,’ultra’],[‘http://retro.volna.top/Retro’,’Ретро Хит’,’retrohit’],[‘http://retroserver.streamr.ru:8043/retro256.mp3′,’Ретро FM’,’retrofmrus’],[‘http://retro70.hostingradio.ru:8025/retro70-128.mp3′,’Ретро FM: 70-е’,’retrofm70′],[‘http://retro80.hostingradio.ru:8025/retro80-128.mp3′,’ Ретро FM: 80-е’,’retrofm80′],[‘http://retro90.hostingradio.ru:8025/retro90-128.mp3′,’Ретро FM: 90-е’,’retrofm90′],[‘http://online.rockarsenal.ru:8000/rockarsenal_aacplus’,’Рок Арсенал’,’rockarsenal’],[‘http://ru1.volna.top/RuWave48′,’Русская Волна’,’ruwave’],[‘http://listen.rusongs.ru:8005/ru-mp3-128′,’Русские песни’,’russong’],[‘http://rock.volna.top/RusRock’,’Русский Рок’,’makradiorusrock’],[‘https://rusradio.hostingradio.ru/rusradio96.aacp’,’Русское радио’,’russradio’],[‘https://rr-zolotoigrammofon.hostingradio.ru/zolotoigrammofon96.aacp’,’Русское радио: Золотой граммофон’,’rusradiogoldgram’],[‘https://rr-russkijrok.hostingradio.ru/russkijrok96.aacp’,’Русское Радио: Русский Рок’,’rusradiorock’],[‘http://radio.russkoe.fm:8000/russkoefm_mp3′,’РУССКОЕ FM’,’russkoefm’],[‘http://svoeradiofm.hostingradio.ru:8032/svoe-128.mp3′,’Свое радио’,’svoeradio’],[‘http://air.radiorecord.ru:805/symph_320′,’Симфония FM’,’symphonyfm’],[‘http://listen1.myradio24.com:9000/6262′,’Спокойное радио’,’spokoinoe’],[‘http://air2.radiorecord.ru:805/sd90_320′,’Супердискотека 90-х’,’super90′],[‘http://hfm.volna.top/HypeFM’,’ХАЙП FM’,’hypefm’],[‘https://hitfm.hostingradio.ru/hitfm96.aacp’,’Хит FM’,’hitfm’],[‘http://rmgradio.gcdn.co/station-ru/st02.mp3/icecast.audio’,’Хит FM: Большая Двадцатка’,’hitfmbig20′],[‘https://hitfm-hit90.hostingradio.ru/hit9096.aacp’,’Хит FM 90-е’,’hitfm90′],[‘https://hitfm-hit2000.hostingradio.ru/hit200096.aacp’,’Хит FM 2000-е’,’hitfm2000′],[‘http://stream.hitroe.com/stream’,’Хитрое радио’,’hitroe’],[‘http://stream.hitirossii.com:8000/khr.mp3′,’Хиты России’,’hitirossii’],[‘http://radio.horoshee.fm:8000/mp3′,’Хорошее радио’,’horoshee’],[‘http://r1.electron.fm:8000/256′,’Электронная Волна’,’electrowave’],[‘http://ice912.echo.msk.ru:9120/stream’,’Эхо Москвы’,’echo’],[‘http://ic7.101.ru:8000/a102?userid=0′,’Юмор FM’,’umor’],[‘http://online-kissfm.tavrmedia.ua/KissFM_HD’,’Kiss FM’,’kissfm’],[‘http://nashe1.hostingradio.ru/jazz-128.mp3′,’Радио Джаз’,’radiojazz’]];</script><script type=»text/javascript» src=»https://www.radiobells.com/script/v2_1.js» charset=»UTF-8″></script>
Чтобы изменить фон плеера, найдите в коде вот этот кусочек ffff6b и замените на тот код цвета, который больше подходит под Ваш сайт.
Коды цветов можно посмотреть в этих статьях:
Скрипт радио на сайт онлайн и Ucoz
Зайцев.FM Поп музыка
Наше Радио
1.FM — Otto\’s Opera House
1.FM — Absolute Trance (Euro)
1.FM — Amsterdam Trance Radio
Star FM — From Hell
Vocal Trance FM
Premium
Европа Плюс
1.FM — Otto\’s Baroque Musick
1.FM — All Otto Classical Music
Русское Радио
Хит ФМ
Хіт FM
Ди ФМ (DFM)
Мега
Монте-Карло
Шансон (Россия)
Юмор ФМ
San FM Relax
Милицейская Волна
LUGA RADIO
Ретро ФМ
Дорожное
Эхо Москвы
Романтика
181.FM — The Buzz (Your Alternative Station!)
Big L Radio
Big R Radio — 90s Alternative Rock
Big R Radio — Alternative Rock
247drumandbass.com
Маяк
POWERFM
Мелодія
Свобода
Спокойное
Whisperings Solo Piano Radio
Love (Лав)
Март
Premium — Русский ТОП
Radio Cafe
Первое Интернет-Радио
Soulplay Radiostation
Dubstep.fm
Fresh FM / Свежее ФМ
Студия Дон
ТНТ Music Radio
Пионер Дэнс ФМ / Pioner Dance FM
Радио 7 На Семи Холмах
Пассаж
Радио 13
Aloha Joe Radio
Серебряный дождь
ENERGY (Энерджи)
Бизнес ФМ
Авторадио
Сибирь
ROKS
Discover Trance Radio
Venice Classic Radio
WDNA Serious Jazz
1.FM — Absolute TOP 40 Radio
1.FM — Chillout Lounge Radio
1.FM — Absolute Country Hits Radio
L-radio
МАКС-FM
1.FM — Absolute 90s Party Zone Radio
ЮмоRock
GTI Radio — Trance
KISS FM
Hot 108 JAMZ — #1 For Hip Hop
Вышка
Noise FM
Maks Radio
Комсомольская правда
Русские песни
ULTRA (Ультра)
Prosto Radi.o
Хорошее ФМ
Вести ФМ
Relax FM (Релакс FM)
Рекорд (Record)
161fm
Жара FM
Апекс
Юнитон
Наше
MFM
Lounge FM
Закарпатье ФМ
Карнавал
Sputnik
Пилот FM
Новая Волна
Стильное радио \»Перец FМ\»
Шансон (Украина)
DnbRadio
HR RADIO
NewTone FM
Восток FM
Атмосфера
Music In Paradise (Музыка В Раю)
Like FM
Synthwave Retrowave Radio
Atm.Fm
101.ru — Звуки Природы
Trancemission
Perpetuum Music
Супердискотека 90-х
EDM Classic
LisFm
Trance — Open.fm
ENERGY Lounge
HIP HOP RADIO
EDM Radio
Paradise Trance — Digital Impulse Radio
Поляна Сказок
Ibiza Global Radio
Хиты Топ 40 (181 Fm — Power Top 40)
Дискотека 80-х
Новое
Эльдорадио
ROCK FM
Biker-FM
Мелодия
Lounge FM Terrace
Книга
Комсомольская правда — Петербург
New Age Radio
DNB FM
WalconFM
[RCM]DEEP
Studio21
Славянскiй МIРЪ
90s Eurodance
Baby FM
Весна
M.Deep Radio
Pure 24 — European hits!
Говорит Москва
Орфей
SOUNDPARK DEEP
Fusion
Лучшие песни
Шторм
Машенька
Радио странствий
Русская Волна
ХАЙП FM
АБСОЛЮТ парк
для двоих
Радио День
Synthwave
Unistar
РадиоТочка
Супер-радио
Rock FM (Украина)
Свой стиль (Рок)
JAZZ
iRadio
Comedy Radio
Best FM
Nicefm
Radio Record: ChillOut
Радио России
Сталинград
Ностальжи
МОТОРАДИО
BrooklynFM (BFM)
ArtRemixRadio
RS dance station
Лайн
Beat Records
2020FM
Bass-Clubbers
Хайп
Релиз
Bel-Muz
Ruzafa
SunFM Ukraine
4YOU
Disney (Дисней)
Бонч
Амичи
Alyaxen Radiostation
80ies
Гамаюн
MegaNight
Христианское радио Holybunch.com
Рамблер, какие новости?
Group Therapy Radio with Above & Beyond
Шоколад
MH•radio
Пирамида
Взрослое — Шансон
Респект
DeeJay 97.5 Greece Corfu
BluesMen Channel (Hits)
KAIF.FM
Insomnia
BANANAS FM
Супер
Столица
MuzON
Вечерний Бриз
Звезда (Красноярск)
Скрипт Радио на сайт. Как разнообразить свой сайт
Если Вы обладатель онлайн проекта, скажем сайта или личного блога, то возникает вопрос о том как удержать посетителя или подписчика. Существует несколько способов для повышения востребованости ресурса, можно завлечь гостей на свой сайт уникальным материалом или продукцией, которую Вы реализуете или быть может производите. Но так как мы с вами простые пользователи Интернета, то и предложить что – то совершенно уникальное навряд ли сможем, что же делать в таких случаях? Как я ранее уже сказал вариантов несколько на одном из них мы и заострим внимание.
Помимо всяческого украшательства сайта, в том числе общее оформление вашего Интернет- проекта, можно выделить функциональную часть. Вы должны заинтересовать динамической составляющей своего ресурса. Что можно подразумевать под динамической частью, сразу оговорится что это никак не реклама, скорее информеры и онлайн сервисы.
Предоставьте помимо основного контента иные возможности, например, онлайн – ТВ или онлайн – игры. Я же предложу разместить на сайте небольшой блок с онлайн – радио. Скажите, что данный сервис предоставляется каждым вторым Интернет проектом, возражу , мы стараемся выделить свой сайт, не обращая внимания на сторонние ресурсы.
Сразу определитесь с местом расположения блока радио, стоит помнить что место должно быть приметным, но не бросающимся в глаза. К примеру можно выделить место в боковой панели, либо если блок небольшой, то место в шапке сайта.
Спросите где можно взять сам код онлайн – радио? В общем – то многие ресурсы специализирующиеся на массовой трансляции радио предоставляют возможность размещения скрипта на сторонние сайты – за что им спасибо!
Одним из таких сайтов, является радиопоток.ру. Большое количество разножанровых станций радио, простой интерфейс, неплохая функциональность и последние новости в мире музыки. А самое главное что данный проект предоставляет возможность размещения онлайн-радио на ваш сайт. Простая настройка внешнего вида и наименования станций, и главное без рекламы. Также портал предлагает владельцам сайтов построенных на WordPress и Joomla — скачать плагины, которые дадут Вам ещё более доступную возможность размезщения и настройки.charset=»UTF-8″></script>
Вот так будет выглядеть радио на сайте, Я выбрал первый из предложенных вариантов оформления
Пример работы Онлайн-Радио
Вы можете скопировать код скрипта и попробовать на своём сайте.
Код:
х<div align=»center» style=»max-height:250px; overflow:auto;»>
<a href=»http://radiopotok.ru/» id=»RP_link»>Онлайн радио</a>
<script type=»text/javascript»><!—
var RP_font_size = ’16px’; // Размер шрифта
var RP_bg_color = ‘white’; // Цвет фона
var RP_border_color = ‘white’; // Цвет рамки таблицы
var RP_border_size = ‘2px’; // Толщина рамки таблицы
var RP_grid_color = ‘silver’; // Цвет сетки таблицы
var RP_a_color = ‘blue’; // Цвет ссылки
var RP_a_color_hover = ‘red’; // Цвет ссылки при наведении
var RP_new_window = false; // Слушать радио в новом окне [true/false]
//—></script>
<script type=»text/javascript» src=»http://radiopotok.ru/f/script/003493422a34d9f76272707f9f77ed32.js» charset=»UTF-8″></script>
</div>
На странице настройки Вы сможете выбрать плейлист из более ста радиостанций.
Страница настройки скрипта
Главная страница Радиопоток.ру
Как добавить радио на сайт
Как добавить радио на сайт
В статье Гаджет Радио-онлайн для Blogger я рассказывала, как можно добавить в блог радио, которое можно слушать онлайн. К сожалению, в этом гаджете не все радиостанции хорошо работают.
Поэтому предлагаю еще один вариант радио для блога или сайта с настройками внешнего вида и выбором станций.
Как добавить радио на сайт или блог:
1. Сначала нужно перейти на сайт, где размещен скрипт радио.
2. Затем отметить радиостанции, которые можно будет послушать на Вашем сайте. Здесь огромный выбор как зарубежных, так и отечественных станций.
Отмеченные слева станции будут появляться в списке справа.
При желании отметить все станции — есть кнопка Выделить все.
3. После выбора радиостанций нажмите кнопку Получить код для сайта (на голубом фоне).
4. На следующей странице Вы можете скопировать код скрипта радио, затем вставив его на сайт. В блог на Blogger’е я пробовала код вставить на отдельную статичную страницу в режиме HTML. (Пример — Еще радио).
Если место на сайте позволяет, тогда и в гаджет HTML/JavaScript код радио вставьте.
К тому же, авторы скрипта дают возможность выбрать внешний вид радио. Для этого нажмите на ссылку — Варианты оформления.
И выберите вертикальное или горизонтальное расположение онлайн радио на сайте. В зависимости от Вашего выбора, копируйте предоставленный код.
Есть еще несколько вариантов внешнего вида радио от этих же разработчиков.
В виде простого вертикального списка или выпадающего списка радиостанций.
Чтобы выбрать один из четырех оформлений радио:
1) Выполнить шаги 1-3 (см. выше).
2) В шаге 4 описывается версия v.5, а на той же странице (только ниже) Вы увидите и другие версии: v1, v2.0, v3 и v4.
Справа располагается превью радио, а слева соответствующий код скрипта, который опять же копируете и проверяете на работоспособность на Вашем сайте или блоге.
! Кстати, иногда, (особенно, после первого включения) приходится подождать, пока подгрузится скрипт и включится выбранная радиостанция.
ПРОВЕРИМ:
- Онлайн радио
Скрипт Радио на сайт uCoz
Полезно радио для того, чтобы удержать на некоторое время посетителя на сайте. Имеет смысл ставить его на видное место. Не только для сайтов музыкального направления радио приемлемо, для развлекательных порталов и варезников тема актуальна.
Преимущество этого скрипта в том, что радио не займет много места, т.к. имеет вид выпадающего списка. Скрипт Радио для uCoz написан в несколько строк, что облегчает установку значительно.
Код радио
Версия с выпадающим списком. Вставить в секцию <body>:
Код
<!—НАЧАЛО БЛОКА РАДИО ОНЛАЙН—>
<style type=»text/css»>
#ro_h3 {border-radius: 0px 0px 0 0;}
#ro_block h3 { background: #800000; padding: 10px; margin: 0; line-height: 100%; text-align:center;}
#ro_block h3 a { background: #800000; color: #ffffff; font: normal bold 16px Arial, Verdana, Tahoma; text-decoration: none;}
#ro_block h3 a:hover { text-decoration: underline;}
#ro_img { background: #ffffff; border-radius: 0 0 0px 0px;}
</style>
<div align=»center»>
<h3 id =»ro_h3″><a href=»http://onlayn-radio.ru/» target=»_blank»>Онлайн радио</a></h3>
<div></div><div></div>
</div>
<script type=»text/javascript» language=»javascript»>var orruMyRad = «13,5,8,26,31,129,145,324,339», orruBlockWidth = 240, orruImgKol = 3;</script>
<script src=»http://onlayn-radio.ru/script/rad.js» type=»text/javascript» defer=»defer»></script>
<!—КОНЕЦ БЛОКА РАДИО ОНЛАЙН—>
Версия со значками радиостанций:
Код
#RP_v2_content ul{max-height:150px;overflow:auto;font-family:Arial, Verdana, Tahoma;}
#RP_v2_radioPlayer{float:left;width:0;height:0;overflow:hidden;z-index:-999}
#RP_v2_radio{text-align:left;margin:0;height: 30px;}
#RP_v2_radio dd,#RP_v2_radio dt,#RP_v2_radio ul{text-align:left;margin:0;padding:0}
#radio2link{height:26px;width:220px;overflow:hidden}
#RP_v2_radio dd{position:relative;text-align:left}
#RP_v2_radio a,#RP_v2_radio a:visited{color:#6a6a6a;text-decoration:none;outline:none;width: 200px;}
#RP_v2_radio a:hover{color:#000}
#RP_v2_radio dt a:hover{color:#000;border:1px solid #cfcfcf;width: 200px;}
#RP_v2_radio dt a{background:#fff url(http://onlayn-radio.ru/script/dd-arrow.png) no-repeat scroll right center;display:block;border:1px solid #cfcfcf;width:200px;height:20px;padding:2px 5px}
#RP_v2_radio dt a span{cursor:pointer;display:block;height:22px;font-weight:normal;font-size:16px;}
#RP_v2_radio dd ul{background:#fff none repeat scroll 0 0;text-align:left;border:1px solid #cfcfcf;color:#C5C0B0;display:none;left:0;position:absolute;top:2px;width:auto;min-width:150px;list-style:none;z-index:200;padding:0;overflow-x: hidden;}
#RP_v2_radio span.value{display:none}
#RP_v2_radio dd ul li a{display:block;padding:5px}
#RP_v2_radio dd ul li a:hover{background-color:#eee}
<dl>
<span></span>
<dt><a href=»http://onlayn-radio.ru/» target=»_blank»><span>Слушать радио</span></a></dt>
<dd>
<ul></ul>
</dd>
</dl>
<script type=»text/javascript»>var orruMyRad = «24,13,5,8,26,31,33,34,135,136,178,324,331,335,413,1258», orruBlockWidth = 200, orruImgKol = 3;</script>
<script src=»http://onlayn-radio.ru/script/rad3.js» type=»text/javascript» defer=»defer»></script>
<!—КОНЕЦ БЛОКА РАДИО ОНЛАЙН—>
Список радиостанций и другие версии
Воспользуйтесь оригинальной страницей генератора радио. На данной странице приведены только примеры. Там же вы можете выбрать список радиостанций, шрифты и т.д.
Отметим, что список радиостанций огромной, любой желающий найдет себе станцию по вкусу. Станций более ста. Можно привести для примера десять первых радиостанций: Европа Плюс, Шансон, Energy, Эхо Москвы, Серебряный дождь, Радио Ваня, Makradio Ретро хит, Venice Classic Radio, Radio Jazz Instrumantal и Наше радио.
Если Вы решили установить скрипт Радио для uCoz на другую CMS, то работать радио будет, только прежде нужно подключить JQuery на страницах сайта. Вот этот код ставьте в секцию HEAD:
Code
<script type=»text/javascript» src=»http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js»></script>
Скрипт, на самом деле, универсальный, просто uCoz имеет свою популярность в этом плане, множество людей ищут радио на сайт специально для uCoz, хотя любой подобный сценарий в итоге все равно окажется универсальным, т.е. подходящим для любых сайтов, не только на uCoz.
Стилизация radio на CSS
Вы здесь:
Главная — CSS — CSS3 — Стилизация radio на CSS
Давайте немного освежим в памяти, для чего нужны radio кнопки на сайтах. Radio кнопка – это переключатель, который используют в формах, когда пользователю надо сделать выбор, между несколькими вариантами. Например, выбрать между марками автомобилей, для последующей аренды.
Дизайнеры рисуют в макетах радиокнопки, как им нравиться и совсем не обязательно круглой формы. Нам же, верстальщикам, надо думать, каким образом стилизовать всю эту красоту.
HTML код
Атрибут for у тега label устанавливает связь с input через id, в том случае если, input не вложен в label. Значения у for и id, должны быть одинаковыми. В нашем примере, у первой связки – honda, а у второй renault. Когда пользователь должен выбрать только один вариант, следует прописать обоим инпутам, атрибут name с одинаковым значением (car). Атрибут type указывает, что инпут надо отобразить, как radio кнопку (круглым).
Обернем первую связку input+label в div с классом radio, то же самое сделаем для второй связки. Присвоим так же классы input и label, для их дальнейшей стилизации.
<div>
<input name="car" type="radio">
<label for="honda">Honda</label>
</div>
<div>
<input name="car" type="radio">
<label for="renault">Renault</label>
</div>
По умолчанию, браузер отобразит любой элемент формы. На картинке ниже, вы можете увидеть наши radio, без CSS стилей.
Скажем спасибо браузеру и погрузимся в CSS код для стилизации radio кнопок.
CSS-код
Вложенные теги input+label, позиционируем относительно родителя – div с классом radio.
.radio {
position: relative;
margin-bottom: 1rem;
}
Спрячем дефолтные маленькие кружочки, свойство appearance обязательно прописываем с вендорными префиксами.
.radio_input {
-webkit-appearance: none;/* Chrome */
-moz-appearance: none;/* Firefox */
appearance: none;/* убираем стандартные кружочки */
position: absolute;
}
Стилизуем текст внутри тега label.
.radio_label {
padding-left: 25px;/* отступ слева */
font-size: 1rem;
color: #444;
cursor: pointer; /* курсор рука */
}
Создадим два состояния radio кнопок, с помощью псевдоэлементов before+after. Стилизуем before, как пустой белый кружок, after – кружок с цветным фоном, изображающий отмеченное состояние. На деле, круг с меньшим диаметром after, будет находиться внутри круга с большим диаметром before.
Стилизуем псевдоэлемент before
.radio_label:before {
content: "";
display: block; /* не в строку */
width: 16px; /* ширина блока */
height: 16px;/* высота блока */
border: 1px solid #ccc;/* рамка */
background-color: #fff; /* цвет фона */
border-radius: 50%;/* получаем круг */
position: absolute;/* расположен точно в родителе */
top: 0; /* расстояние от верха родителя */
left: 0;/* расстояние слева от родителя */
z-index: 1; /* на нижнем слое */
transition: border .1s linear;/* плавный переход для border */
}
Стилизуем псевдоэлемент after
.radio_label:after {
content: "";
display: block;
width: 12px;
height: 12px;
background-color: #49d120;
border-radius: 50%;
opacity: 0; /* полностью прозрачный */
position: absolute;
top: 3px;
left: 3px;
z-index: 2;/* на верхнем слое */
transition: opacity .1s linear; /* плавный переход для opacity */
}
Нам, нужно менять вид кружка, только при отмеченном состоянии (checked). Когда пользователь кликает в поле input, рамка у before меняет свой цвет.
.radio_input:checked + .radio_label:before {
border-color: #319612;
}
А у after, прозрачный фон, становится непрозрачным, кружок окрашивается в зеленый цвет.
.radio_input:checked + .radio_label:after {
opacity: 1;
}
Таким образом, в неотмеченном состоянии, поле input – белое. А в отмеченном состоянии – зелёное.
Мы получили стилизованные radio кнопки на чистом CSS.
Демонстрация примера
-
Создано 24.05.2019 10:19:43 -
Михаил Русаков
Предыдущая статья Следующая статья
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
-
Кнопка:
<a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>Она выглядит вот так:
-
Текстовая ссылка:
<a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>Она выглядит вот так: Как создать свой сайт
- BB-код ссылки для форумов (например, можете поставить её в подписи):
[URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]
77 Radio Buttons CSS
Коллекция переключателей HTML и CSS Примеры кода : custom, multiple и radio button group . Обновление коллекции за февраль 2019 г. 11 новинок.
- Кнопки радио начальной загрузки
- Флажки CSS
- Тумблеры CSS
Автор
- Джон Кантнер
О коде
Радиокнопки из мрамора и дерева
Взаимодействие с переключателями в виде китайских шашек на деревянной доске.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
адаптивный: да
Зависимости: —
О коде
Нейморфное радио
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Джон Кантнер
О коде
Радио прыжки
При выборе различных параметров наблюдайте, как точка-червь перескакивает с предыдущего на текущее.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
адаптивный: да
Зависимости: —
Автор
- Аарон Икер
О коде
2020 Переключение
Совместимые браузеры: Chrome, Firefox, Opera, Safari
адаптивный: да
Зависимости: —
О коде
Bulgy Радио
Еще одна чрезмерно проработанная радио-анимация.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Дин Хидри
О коде
Переключатель тем для карточек
Вот взаимодействие, которое позволяет вам изменить тему вашей карты. Мы сосредоточились на двух простых микро-анимациях, которые указывают на то, что произошла замена карты, что является довольно радостным моментом для большинства пользователей.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Абубакер Саид
О коде
Пользовательские кнопки радио
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Иван Гроздич
О коде
Радиокнопки на чистом CSS (Темный / Светлый)
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
адаптивный: да
Зависимости: bootstrap.css, unicons.css
Автор
- Брэндон МакКоннелл
О коде
Готовься
Брэндон МакКоннелл
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Андрей Шарапов
О коде
Анимированные кнопки радио в формате SVG
Анимированные переключатели SVG с использованием CSS.
Совместимые браузеры: Chrome, Firefox, Opera, Safari
Адаптивный: нет
Зависимости: —
Автор
- Микаэль Айналем
О коде
Подземные радиокнопки
Выделение радиокнопки перемещается под землю.
Совместимые браузеры: Chrome, Edge, Firefox, Opera, Safari
адаптивный: да
Зависимости: —
.
БЕСПЛАТНЫХ Shoutcast !!!
Бесплатные продукты
Radio Streaming Shoutcast или Icecast
В каждую учетную запись входит:
- Личная страница и личный поддомен
- Shoutbox, блог и галерея
- До 5000 слушателей без потери качества
- Проигрыватель Flash и проигрыватель Windows Media
- Поддерживается Ads
- 3 расположения серверов и мгновенная настройка
ЗАПИСАТЬСЯ СЕЙЧАС
Потоковое видео Flash (протокол RTMP)
В каждую учетную запись входит:
- Личная страница и личный поддомен
- Shoutbox, блог и галерея
- До 1000 зрителей без снижения качества
- Флеш-плеер
- Поддерживается Ads
- Мгновенная настройка
ЗАПИСАТЬСЯ СЕЙЧАС
Хостинг сайтов Хостинг PHP
В каждую учетную запись входит:
- Расширенная панель — Cpanel
- 500 МБ хранилища
- Пропускная способность 1000 МБ
- Поддержка PHP, SQL и др..
- Нет рекламы на вашем сайте
- Мгновенная настройка
СКОРО В НАЛИЧИИ
Продукты Премиум
Radio Streaming Shoutcast 1 или Shoutcast 2 или Icecast 2
В каждую учетную запись входит:
- Панель управления Centova Cast
- Неограниченная пропускная способность
- 5 ГБ памяти для автоматического DJ
- Современный органайзер для списков воспроизведения
- Порт 80 Потоковая передача
- Проигрыватель Flash и проигрыватель Windows Media
- Стартовая страница и фрагменты кода
- Подробный анализ и статистика
- Множественная высокоскоростная сеть
- 99.9% Время работы
- 24/7 онлайн-поддержка
- 3 расположения серверов (США, Великобритания, Германия)
- Мгновенная настройка
ЗАКАЗАТЬ СЕЙЧАС
Потоковое видео Flash или Windows
В каждую учетную запись входит:
- Панель администратора
- Качество HD и SD до 1700 Кбит / с
- Поддержка H.264 и VP6
- Неограниченная пропускная способность
- Flash Player
- Live
- Широко совместимый, включая iPhone
- Подробный анализ и статистика
- Множественная высокоскоростная сеть
- 99.9% Время работы
- 24/7 онлайн-поддержка
- Лучшее предложение в Интернете
- Мгновенная настройка
ЗАКАЗАТЬ СЕЙЧАС
Хостинг веб-сайтов Хостинг для Linux или Windows
В каждую учетную запись входит:
- Панель управления cPanel / Plesk
- Конструктор сайтов с 700 шаблонами (rvbuilder)
- Автоустановщик из 149 скриптов (softaculous)
- Неограниченная пропускная способность
- Неограниченное количество писем
- Безлимитный MySQL
- Неограниченный поддомен
- Статистика сайта
- Бесплатный домен для полугодового заказа
- Множественная высокоскоростная сеть
- 99.9% Время работы
- 24/7 онлайн-поддержка
- Мгновенная настройка
ЗАКАЗАТЬ СЕЙЧАС
Другие продукты
- Nullsoft Shoutcast
- Sam Broadcaster
- Nicecast
- MIXXX
- Виртуальный диджей
- Flash Media Live Encoder
Проверить сейчас
- Настраиваемый проигрыватель Flash / HTML5
- Player Поддержка AAC + Играет !!!
- Заказ песни Amazon и iTunes
- Изображение художника и краткое описание
- Настраиваемый виджет последних песен
- Интеграция Twitter и TuneIn API
Попробовать сейчас
.
Добавить комментарий