Получаем код плеера с помощью Рамочника

Суббота, 21 Июля 2012 г. 08:11 + в цитатник

Цитата сообщения Лариса_Гурьянова

Прочитать целиком В свой цитатник или сообщество!

Получаем код плеера с помощью Рамочника

Урок годится только для ЛиРу. Как сделать это на Мейле, смотрим ЗДЕСЬ.

Сегодня Леночка - Elena505 подсказала мне, как получить код плеера любого размера в Рамочнике.
Оказывается, в нем можно делать не только рамки, но и вот такие чудесные вещи,
не заморачиваясь с кодами..))

 <div align="center"> <table width="400" height="211" style="border:0px none #000000" background="//img-fotki.yandex.ru/get/6503/136160416.67/0_8e3bb_8b333e54_L.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"><br /><br /><br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fpostovoj.ru%2Fjwplayer.swf%3Fwidth%3D250%26height%3D18%26file%3D%2F%2Fimg0.liveinternet.ru%2Fimages%2Fattach%2Fc%2F6%2F%2F3974%2F3974284__bg___ingrid_cup__i_will_not_di.mp3%26backcolor%3DAAAAAA%26frontcolor%3D000000%26link%3D%2F%2Fwww.nadobuhat.ru%2F%26skin%3D%2F%2Fpostovoj.ru%2Fskins%2F0%2F0.swf%26backcolor%3DFF6666%26frontcolor%3DFFFFFF%26lightcolor%3DFFFFFF%26screencolor%3DFFFFFF&flash_width=250&flash_height=18&style=" width=250 height=18 style="width:250;height:18; border:0px outset;" scrolling="no" frameborder="0"></iframe></span> <p align="center"> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/mail/gou2098/" target="_blank"><img src="//img-fotki.yandex.ru/get/5807/136160416.66/0_8c609_706117b9_XS.jpg" border="0" /></a> </p></td></tr></table></div>

<div align="center"> <table width="400" height="211" style="border:0px none #000000" background="//img-fotki.yandex.ru/get/6501/136160416.67/0_8e3c3_986349f0_L.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"><br /><br /> <br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fpostovoj.ru%2Fjwplayer.swf%3Fwidth%3D250%26height%3D18%26file%3D%2F%2Fimg0.liveinternet.ru%2Fimages%2Fattach%2Fc%2F6%2F%2F3974%2F3974286_____vega__.mp3%26backcolor%3DAAAAAA%26frontcolor%3D000000%26link%3D%2F%2Fwww.nadobuhat.ru%2F%26skin%3D%2F%2Fpostovoj.ru%2Fskins%2F0%2F0.swf%26backcolor%3DFFFF00%26frontcolor%3D009900%26lightcolor%3D009900%26screencolor%3D009900&flash_width=250&flash_height=18&style=" width=250 height=18 style="width:250;height:18; border:0px outset;" scrolling="no" frameborder="0"></iframe> </span> <p align="center"> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/mail/gou2098/" target="_blank"><img src="//img-fotki.yandex.ru/get/5807/136160416.66/0_8c609_706117b9_XS.jpg" border="0" /></a> </p></td></tr></table></div>

 <div align="center"> <table width="400" height="211" style="border:0px none #000000" background="//img-fotki.yandex.ru/get/6500/136160416.67/0_8e3c0_c2c3bab5_L.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"><br /><br /><br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fpostovoj.ru%2Fjwplayer.swf%3Fwidth%3D250%26height%3D18%26file%3D%2F%2Fimg0.liveinternet.ru%2Fimages%2Fattach%2Fc%2F6%2F%2F3974%2F3974287_enigma__mmx_the_social_song.mp3%26backcolor%3DAAAAAA%26frontcolor%3D000000%26link%3D%2F%2Fwww.nadobuhat.ru%2F%26skin%3D%2F%2Fpostovoj.ru%2Fskins%2F0%2F0.swf%26backcolor%3D0000CC%26frontcolor%3DFFFFFF%26lightcolor%3DFFFFFF%26screencolor%3DFFFFFF&flash_width=250&flash_height=18&style=" width=250 height=18 style="width:250;height:18; border:0px outset;" scrolling="no" frameborder="0"></iframe></span> <p align="center"> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/mail/gou2098/" target="_blank"><img src="//img-fotki.yandex.ru/get/5807/136160416.66/0_8c609_706117b9_XS.jpg" border="0" /></a> </p></td></tr></table><br />
</div>

 <div align="center"> <table width="400" height="211" style="border:0px none #000000" background="//img-fotki.yandex.ru/get/6603/136160416.67/0_8e3c1_a06787f8_L.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"><br /><br /><br/><IFRAME src="//flashframe.li.ru/showflash.html?tag_value=%2F%2Fpostovoj.ru%2Fjwplayer.swf%3Fwidth%3D250%26height%3D18%26file%3D%2F%2Fimg0.liveinternet.ru%2Fimages%2Fattach%2Fc%2F6%2F%2F3974%2F3974288_giovanni_marradi__paris_nights.mp3%26backcolor%3DAAAAAA%26frontcolor%3D000000%26link%3D%2F%2Fwww.nadobuhat.ru%2F%26skin%3D%2F%2Fpostovoj.ru%2Fskins%2F0%2F0.swf%26backcolor%3DFFFF00%26frontcolor%3DFFFFFF%26lightcolor%3DFFFFFF%26screencolor%3DFFFFFF&flash_width=250&flash_height=18&style=" width=250 height=18 style="width:250;height:18; border:0px outset;" scrolling="no" frameborder="0"></iframe></span> <p align="center"> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=http://blogs.mail.ru/mail/gou2098/" target="_blank"><img src="//img-fotki.yandex.ru/get/5807/136160416.66/0_8c609_706117b9_XS.jpg" border="0" /></a> </p></td></tr></table><br />
</div>

Делаем в фотошопе любой, какой захотите, плеер. Я открыла новый прозрачный файл размером 400 Х 250 пикселей и нарисовала инструментом "Прямоугольник со скругленными углами" радиусом 50-60 пикселей основу для плеера.
Я старалась расположить плеер ровно посередине, чтобы музыка потом встала ровно.

Залив плеер градиентом, применив тиснение, сделав обводку и добавив на плеер любой клипарт, подписала свою работу.
Все, наш плеер готов.

(Если вдруг кто-то вообще не умеет делать плееры, научиться можно ЗДЕСЬ)

Сохраняем его для Веб устройств... с такими параметрами:

Теперь нам надо вставить его в блог и добавить в плеер музыку.

Для начала, загрузим картинку нашего плеера на Яндекс-Фотки. Как это сделать, читаем ЗДЕСЬ.

Оттуда нам нужно будет взять всего два параметра:
1. размеры плеера
2. ссылку на плеер

А затем начинается самое интересное. Идем в РАМОЧНИК и четко действуем по скринам:

Вот, мы получили код и вставили в свой дневник в простой текстовой редактор:

 <table width="400" height="211" style="border:0px none #000000" background="//img-fotki.yandex.ru/get/6501/136160416.67/0_8e3c3_986349f0_L.jpg" cellspacing="0" cellpadding="0"><tr><td style="padding:20px" zzz="zzz" align="center"><span style="color:#000000;font-size:20px"><b>ВАША МУЗЫКА</b></span></td></tr></table>

Казалось бы, что все! Ан, нет...))
Не забудьте поставить перед началом кода тег, который выравнивает плеер по центру:

 <div align="center"></div>

И сразу - после слов ВАША МУЗЫКА - ссылку на ваш дневник:

Мне не очень нравится кликабельная ссылка на НИК, плер-то и так вами подписан, поэтому я сделала кликабельную картинку (звездочку) по такой формуле (может она вам тоже понравится):

  <p align="center"> <a href="//www.liveinternet.ru/journal_proc.php?action=redirect&url=АДРЕС ВАШЕГО БЛОГА" target="_blank"><img src="//img-fotki.yandex.ru/get/5807/136160416.66/0_8c609_706117b9_XS.jpg" border="0" /></a></p>

Если, вдруг, слова ВАША МУЗЫКА "уплывут" наверх, то поставьте перед ними один - два раза тег , и они встанут на место.

Все! Наконец, основа нашего плеера готова.

ВАША МУЗЫКА

Осталось только вставить музыку. Для этого, вместо слов ВАША МУЗЫКА, надо вставить плеер.
Как это сделать, читайте ЗДЕСЬ.

После всех процедур получаеи вот такой плеер:

Жмем на ПРЕДПРОСМОТР и, если все вас устроит, СОХРАНЯЕТЕ.
Удачи вам!!!
для вас Лариса Гурьянова

Серия сообщений "Плееры":

Часть 1 - Как вставить музыку с сайта «privet.ru»?
Часть 2 - Прозрачные плееры с кодами
...
Часть 11 - КАК ВСТАВИТЬ В ДНЕВНИК MP3-ПЛЕЕР
Часть 12 - Моя работа
Часть 13 - Получаем код плеера с помощью Рамочника
Часть 14 - Музыкальная открытка "Гроза"
Часть 15 - Музыкальная открытка "Балет"
Часть 16 - Учимся делать музыкальную открытку

Серия сообщений "Для ЛиРу":
Часть 1 - Еще один вид плеера для вас
Часть 2 - УРОКИ Веб-графика...
...
Часть 24 - КАК ВСТАВИТЬ В ДНЕВНИК MP3-ПЛЕЕР
Часть 25 - Учимся делать музыкальную открытку
Часть 26 - Получаем код плеера с помощью Рамочника
Часть 27 - Как к посту прикрепить несколько вложений с файлами
Часть 28 - Как поставить файл из Вложения в пост.
...
Часть 36 - Формулы таблиц
Часть 37 - Урок"Фон под запись с обводкой и картинкой в разрыве.
Часть 38 - Дополнение к уроку " Рамка с разрывом."

Рубрики:

Для дневника

<a href="https://www.liveinternet.ru/users/talanat/post228662922/">РџРѕР»СѓС‡Р°РµРј РєРѕРґ РїР»РµРµСЂР° СЃ РїРѕРјРѕС‰СЊСЋ Р Р°РјРѕС‡РЅРёРєР°</a><br/>РџРѕР»СѓС‡Р°РµРј РєРѕРґ РїР»РµРµСЂР° СЃ РїРѕРјРѕС‰СЊСЋ Р Р°РјРѕС‡РЅРёРєР°

РЈСЂРѕРє РіРѕРґРёС‚СЃСЏ С‚РѕР»СЊРєРѕ РґР»СЏ Р›РёР Сѓ. РљР°Рє СЃРґРµР»Р°С‚СЊ СЌС‚Рѕ РЅР° РњРµР№Р»Рµ, СЃРјРѕС‚СЂРёРј Р—Р”Р•РЎР¬.

РЎРµРіРѕРґРЅСЏ Р›РµРЅРѕС‡РєР° - Elena505  РїРѕРґСЃРєР°Р·Р°Р»Р° РјРЅРµ, РєР°Рє РїРѕР»СѓС‡РёС‚СЊ РєРѕРґ  РїР»РµРµСЂР° Р»СЋР±РѕРіРѕ СЂР°Р·РјРµСЂР° РІ Р Р°РјРѕС‡РЅРёРєРµ.
РћРєР°Р·С‹РІР°РµС‚СЃСЏ, РІ РЅРµРј РјРѕР¶РЅРѕ РґРµР»Р°С‚СЊ РЅРµ С‚РѕР»СЊРєРѕ СЂР°РјРєРё, РЅРѕ Рё РІРѕС‚ С‚Р°РєРёРµ С‡СѓРґРµСЃРЅС‹Рµ РІРµС‰Рё, 
РЅРµ Р·Р°РјРѕСЂР°С‡РёРІР°СЏСЃСЊ СЃ РєРѕРґР°РјРё..))

Р”РµР»Р°РµРј РІ С„РѕС‚РѕС€РѕРїРµ Р»СЋР±РѕР№, РєР°РєРѕР№ Р·Р°С…РѕС‚РёС‚Рµ, РїР»РµРµСЂ.  РЇ РѕС‚РєСЂС‹Р»Р° РЅРѕРІС‹Р№ РїСЂРѕР·СЂР°С‡РЅС‹Р№ С„Р°Р№Р» СЂР°Р·РјРµСЂРѕРј 400 РҐ 250 РїРёРєСЃРµР»РµР№ Рё РЅР°СЂРёСЃРѕРІР°Р»Р° РёРЅСЃС‚СЂСѓРјРµРЅС‚РѕРј "РџСЂСЏРјРѕСѓРіРѕР»СЊРЅРёРє СЃРѕ СЃРєСЂСѓРіР»РµРЅРЅС‹РјРё СѓРіР»Р°РјРё"  СЂР°РґРёСѓСЃРѕРј 50-60 РїРёРє... <a href="https://www.liveinternet.ru/users/talanat/post228662922/">Р§РёС‚Р°С‚СЊ РґР°Р»РµРµ...</a>

Комментировать

« Пред. запись — К дневнику — След. запись »

Страницы: [1] [Новые]

LiveInternetLiveInternet

-Цитатник

-Метки

-Рубрики

-Приложения

-Музыка

-Всегда под рукой

-Поиск по дневнику

-Интересы

-Друзья

-Постоянные читатели

-Сообщества

-Статистика

Получаем код плеера с помощью Рамочника