- Uyumlu XF 2 Sürümleri
Öncelikle yapmamız gerekenler ekteki dosyaları ftp ile yüklüyoruz... Daha sonra temamızın şablonlarına gelip yeni şablon oluştur diyoruz ve "radyo_macros"
adında bir şablon oluşturup alttaki kodları içine ekleyip kaydediyoruz...
<xf:css src="radyo.less" />
<xf:js src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></xf:js>
<!-- and new libraries to use lastfm -->
<xf:js type="text/javascript" src="lastfm.api.md5.js"></xf:js> <xf:js type="text/javascript" src="lastfm.api.js"></xf:js>
<xf:js type="text/javascript" src="lastfm.api.cache.js"></xf:js>
<!-- and new libraries to use lastfm -->
<xf:js type="text/javascript" src="swfobject.js"></xf:js>
<xf:js src="jquery.mousewheel.min.js" type="text/javascript"></xf:js>
<xf:js src="jquery.touchSwipe.min.js" type="text/javascript"></xf:js>
<xf:js src="audio5_html5.js" type="text/javascript"></xf:js>
<xf:js src="rtema.js" type="text/javascript"></xf:js> <div class="audio5_html5_sticky">
<div class="audio5_html5" > <audio id="audio5_html5_white" >
<div class="xaudioplaylist"> <ul>
<li class="xradiostream">https://21253.live.streamtheworld.com/SC028_SO1AAC.aac</li>
<li class="xstation">Joy Hit's - Tüm Zamanların En İyileri </li> <li class="xcategory">Bahisboard - Tavsiye</li> </ul>
<ul> <li class="xradiostream">https://18463.live.streamtheworld.com/JOY_TURKAAC.aac</li>
<li class="xstation">Joy Türk - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://17753.live.streamtheworld.com/JOYTURK_ROCK128AAC.aac</li>
<li class="xstation">Joy Türk Rock - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://21253.live.streamtheworld.com/SC004_SO1AAC.aac</li>
<li class="xstation">Joy Türk Akustik - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://17753.live.streamtheworld.com/SUPER_FM128AAC.aac</li>
<li class="xstation">Süper FM - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://17773.live.streamtheworld.com/SUPER2128AAC.aac</li>
<li class="xstation">Süper2 FM - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://22653.live.streamtheworld.com/SC016_SO1AAC.aac</li>
<li class="xstation">Mydonose Türk - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://17773.live.streamtheworld.com/BASKA.mp3</li>
<li class="xstation">Başka FM - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://17773.live.streamtheworld.com/RETROTURK128AAC.aac</li>
<li class="xstation">Retro Türk - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://17733.live.streamtheworld.com/KISS_TURK128AAC.aac</li>
<li class="xstation">Kiss Türk - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://17753.live.streamtheworld.com/BORUSAN_KLASIK.mp3</li>
<li class="xstation">Borusan Radyo - Klasikler - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://20423.live.streamtheworld.com/SC008_SO1AAC.aac</li>
<li class="xstation">Efkar Radyo - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://18463.live.streamtheworld.com/POP90128AAC.aac</li>
<li class="xstation">Pop 90 - Bahisboard</li> <li class="xcategory">Bahisboard Türkçe Radyo Listeleri</li> </ul>
<ul> <li class="xradiostream">https://22653.live.streamtheworld.com/SC045_SO1AAC.aac</li>
<li class="xstation">-.- Suçlu Zevkler -.- </li> <li class="xcategory">Bahisboard - Tavsiye</li> </ul><ul>
<li class="xradiostream">https://22653.live.streamtheworld.com/SC018_SO1AAC.aac</li>
<li class="xstation">Dertli Şarkılar - Bahisboard</li> <li class="xcategory">Bahisboard - Tavsiye</li> </ul>
<ul> <li class="xradiostream">https://22713.live.streamtheworld.com/SC025_SO1AAC.aac</li>
<li class="xstation">Makam - Bahisboard</li> <li class="xcategory">Bahisboard - Tavsiye</li> </ul><ul>
<li class="xradiostream">https://21253.live.streamtheworld.com/SC046_SO1AAC.aac</li>
<li class="xstation">Bol Köpüklü Şarkılar ::..::..:: Bir Fincan Dolusu Keyif - Bahisboard</li>
<li class="xcategory">Bahisboard - Tavsiye</li> </ul><ul>
<li class="xradiostream">https://22193.live.streamtheworld.com/SC020_SO1AAC.aac</li>
<li class="xstation">Gönülden Gönüle Bir Yol Vardır Görünmez... Türküler - Bahisboard</li>
<li class="xcategory">Bahisboard - Tavsiye</li> </ul><ul>
<li class="xradiostream">https://20043.live.streamtheworld.com/SC075_SO1AAC.aac</li>
<li class="xstation">Ben de Özledim, Ben de...): - Bahisboard</li>
<li class="xcategory">Bahisboard - Tavsiye</li> </ul>
<ul> <li class="xradiostream">https://22653.live.streamtheworld.com/SC067_SO1AAC.aac</li>
<li class="xstation">En Keyifli Dönemler - Bahisboard</li> <li class="xcategory">Bahisboard - Tavsiye</li> </ul>
<ul> <li class="xradiostream">https://22653.live.streamtheworld.com/SC087_SO1AAC.aac</li>
<li class="xstation">Hangi ara bu kadar eskidi zaman? 2000'ler - Bahisboard</li>
<li class="xcategory">Bahisboard - Tavsiye</li> </ul>
</div> Browserınız radyomuzu desteklememektedir. Lütfen <a href="https://www.google.com/intl/en/chrome/browser/">Chrome Browser Kullanın!</a> </audio> </div> <br style="clear:both;"> <div class="audio5_html5_min audio5_html5_arrow_down"></div> </div>
Daha sonra yine bir şablon oluşturup ismini "radyo.less" yapıyoruz ve alttaki kodları ekliyoruz...
.audio5_html5
{ -webkit-transition:none 0s;transition:none 0s;margin:0!important;padding:0!important;border:none!important}
.audio5_html5 *{-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box}
.audio5_html5_sticky{width:100%;position:fixed;z-index:999999;bottom:1px;left:0;margin-left:0}
.audio5_html5_min{position:absolute;right:10px;bottom:10px;z-index:9999999;cursor:pointer}
.audio5_html5_arrow_down{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px solid #000}
.audio5_html5_arrow_up{width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #000}
.xaudioplaylist{display:none}.ui-slider-handle{position:absolute;z-index:2;display:block;margin-left:-0.6em;cursor:default;outline:0}
.ui-slider-range{display:block;width:100%;height:100%;left:0;bottom:0;border:0 none;position:absolute;z-index:1}
.ui-progressbar-value{height:100%}
.audio5_html5.blackControllers{float:left;position:relative;font-size:11px!important;font-family:Arial,Helvetica,sans-serif!important;color:#FFF;margin:0;padding:0}
.audio5_html5.blackControllers .AudioControls{width:100%;margin:0;padding:0}.audio5_html5.blackControllers .FrameBehindPlayer{position:absolute;width:100%;height:20px;margin:0;padding:0}
.audio5_html5.blackControllers .FrameBehindPlayerText{position:absolute;width:100%;margin:0;padding:0;backdrop-filter:blur(2px)}.audio5_html5.blackControllers .ximage{position:absolute;z-index:2;width:80px;height:80px;border-radius:150px;border-style:solid;-webkit-border-radius:150px;-moz-border-radius:150px;background:url(bahisboardradyo.png) no-repeat;background-size:cover}.audio5_html5.blackControllers .AudioFacebook{position:absolute;cursor:pointer;display:none;margin:0;padding:0;z-index:1;width:7px;height:14px;background:url(controllers/blackControllers/facebook-off.png) no-repeat}.audio5_html5.blackControllers .AudioFacebook:hover{background:url(controllers/blackControllers/facebook-on.png) no-repeat}.audio5_html5.blackControllers .AudioTwitter{position:absolute;cursor:pointer;display:none;margin:0;padding:0;z-index:1;width:14px;height:14px;background:url(controllers/blackControllers/twitter-off.png) no-repeat}.audio5_html5.blackControllers .AudioTwitter:hover{background:url(controllers/blackControllers/twitter-on.png) no-repeat}
.audio5_html5.blackControllers .AudioPlay{position:relative;z-index:100;cursor:pointer;display:block;margin:0;padding:0;width:43px;height:61px;background:
url(controllers/blackControllers/play-off.png) no-repeat}
.audio5_html5.blackControllers .AudioPlay:hover{background:url(controllers/blackControllers/play-on.png) no-repeat}
.audio5_html5.blackControllers .AudioPause{position:relative;cursor:pointer;display:block;margin:0;padding:0;width:43px;height:61px;background:url(controllers/blackControllers/pause-off.png) no-repeat}.audio5_html5.blackControllers .AudioPause:hover{background:url(controllers/blackControllers/pause-on.png) no-repeat}.audio5_html5.blackControllers .AudioPrev{position:absolute;cursor:pointer;display:block;margin:0;padding:0;width:40px;height:41px;background:url(controllers/blackControllers/prev-off.png) no-repeat}.audio5_html5.blackControllers .AudioPrev:hover{background:url(controllers/blackControllers/prev-on.png) no-repeat}.audio5_html5.blackControllers .AudioNext{position:absolute;cursor:pointer;display:block;margin:0;padding:0;width:40px;height:41px;background:url(controllers/blackControllers/next-off.png) no-repeat}.audio5_html5.blackControllers .AudioNext:hover{background:url(controllers/blackControllers/next-on.png) no-repeat}.audio5_html5.blackControllers .headphone{position:absolute;display:block;margin:0;padding:0;width:108px;height:56px;background:url(controllers/blackControllers/headphone_accessory.png) no-repeat}.audio5_html5.blackControllers .AudioShowHidePlaylist{position:absolute;cursor:pointer;display:block;margin:0;padding:0;z-index:1;width:12px;height:14px;background:url(controllers/blackControllers/showhideplaylist-off.png) no-repeat}.audio5_html5.blackControllers .AudioShowHidePlaylist:hover{background:url(controllers/blackControllers/showhideplaylist-on.png) no-repeat}.audio5_html5.blackControllers .VolumeButton{position:absolute;cursor:pointer;display:block;margin:0;padding:0;width:7px;height:10px;background:url(controllers/blackControllers/volume-off.png) no-repeat}.audio5_html5.blackControllers .VolumeButton:hover{background:url(controllers/blackControllers/volume-on.png) no-repeat}.audio5_html5.blackControllers .VolumeButtonMuted{background:url(controllers/blackControllers/volumeMute-off.png) no-repeat}.audio5_html5.blackControllers .VolumeButtonMuted:hover{background:url(controllers/blackControllers/volumeMute-on.png) no-repeat}.audio5_html5.blackControllers .VolumeSlider{position:absolute;cursor:pointer;display:block;margin:0;padding:0;width:70px;height:4px}.audio5_html5.blackControllers .VolumeSlider .ui-slider-handle{display:none}.audio5_html5.blackControllers .VolumeSlider .ui-slider-range{position:relative;height:4px}.audio5_html5.blackControllers .AudioBuffer{position:absolute;cursor:pointer;display:block;height:4px;margin:0;padding:0}.audio5_html5.blackControllers .AudioSeek{cursor:pointer;position:absolute;height:4px;margin:0;padding:0}.audio5_html5.blackControllers .AudioSeek .ui-slider-handle{display:none}.audio5_html5.blackControllers .AudioSeek .ui-slider-range{height:4px}.audio5_html5.blackControllers .songTitle{position:absolute;float:left;display:block;overflow:hidden;height:14px;margin:0;padding:0;line-height:1;font-weight:normal}.audio5_html5.blackControllers .songTitleInside{position:absolute;white-space:nowrap;width:auto;text-align:center;font-size:11px!important;font-family:Arial,Helvetica,sans-serif!important;display:none}.audio5_html5.blackControllers .radioStation{position:absolute;float:left;display:block;overflow:hidden;height:12px;margin:0;padding:0;line-height:1;font-weight:normal;text-align:center;font-size:11px!important;font-family:Arial,Helvetica,sans-serif!important}.audio5_html5.blackControllers .selectedCategDiv{cursor:pointer;margin:0;padding:0;text-align:center;background-image:url(controllers/blackControllers/categories_arrow_bg.png);background-repeat:no-repeat}.audio5_html5.blackControllers .innerSelectedCategDiv{cursor:pointer;overflow:hidden;height:25px;box-sizing:content-box;width:80%;margin:0;padding:0 10%;text-align:center;font-size:13px;line-height:1.9;font-weight:bold;background-image:url(controllers/blackControllers/categories_arrow_bg.png);background-repeat:no-repeat}.audio5_html5.blackControllers .searchDiv{margin:0;padding:0;background-image:url(controllers/blackControllers/search_icon.png);background-repeat:no-repeat;background-position:10px 50%}.audio5_html5.blackControllers .search_term{background-color:#FFF;border:1px solid #333;color:#000;font:11px Arial,Helvetica,sans-serif;margin:3px 30px!important;padding:1px}.audio5_html5.blackControllers .thumbsHolderWrapper{position:absolute;height:100%;margin-top:0;overflow:hidden;z-index:100;backdrop-filter:blur(2px)}.audio5_html5.blackControllers .thumbsHolderVisibleWrapper{position:relative;height:100%;overflow:hidden;clear:both}.audio5_html5.blackControllers .thumbsHolder{position:absolute;text-align:left}.audio5_html5.blackControllers .thumbsHolder_ThumbOFF{display:block;height:30px;cursor:pointer;background:#0e151c;overflow:hidden;border-bottom:1px solid #000;line-height:2.5em}.audio5_html5.blackControllers .thumbsHolder_ThumbOFF .padding{padding:2px 10px 10px 10px!important;font-size:11px!important;font-family:Arial,Helvetica,sans-serif!important}.audio5_html5.blackControllers .slider-vertical{display:none;position:absolute;width:9px;z-index:99999}.audio5_html5.blackControllers .slider-vertical.ui-slider{position:relative}.audio5_html5.blackControllers .slider-vertical.ui-slider .ui-slider-handle{position:absolute;z-index:2;width:9px;height:16px;cursor:pointer;background:url(controllers/blackControllers/scrollerFaceOFF.png) 0 0 no-repeat}.audio5_html5.blackControllers .slider-vertical.ui-slider .ui-slider-handle:hover{background:url(controllers/blackControllers/scrollerFaceON.png) 0 0 no-repeat}.audio5_html5.blackControllers .slider-vertical.ui-slider .ui-slider-range{position:absolute;z-index:1;display:block;border:0}.audio5_html5.blackControllers .slider-vertical.ui-slider-vertical{width:9px;height:100px}.audio5_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-handle{left:0;margin-left:0;margin-bottom:-16px!important;border:0}.audio5_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-range{left:0;width:100%}.audio5_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-range-min{bottom:0}
.audio5_html5.blackControllers .slider-vertical.ui-slider-vertical .ui-slider-range-max{top:0}
Son olarak Page_container şablonuna radyomuzu eklemek için bu kodu buluyoruz:
</body>
Hemen üstüne yapıştırıyoruz:
<xf:include template="radyo_macros" />
Hepsi bu kadar...
Renk düzenlemeleri için radyo.less şablonunu kullanabilirsiniz...
Radyo Kanalı Eklemek için ise radyo_macros şablonunda herhangi bir </ul> kodunun sonrasına bu kodu düzenleyerek ekleyebilirsiniz:
<ul>
<li class="xradiostream">Radyo Linki</li>
<li class="xstation">Kanal adı (Örn; Joytürk Akustik)</li>
<li class="xcategory">Kategori (İstemezseniz bu satırı silebilirsiniz, Ya da birden fazla kategoride görünmesini isterseniz virgül ile ayırabilirsiniz.. Örn; "Pop Şarkılar, Türkçe Şarkılar"</li>
</ul>
Sadece güvenli bağlantıları ekleyebilirsiniz...
Yani http uzantılı bir radyo istasyonunu kabul etmeyecek ve çalmayacaktır..
Yalnızca https link kullanmalısınız...