- Konuyu Başlatan
- AdminCP
- #1
- Katılım
- 9 Haziran 2018
- Konular
- 1,372
- Mesajlar
- 5,622
- Çözümler
- 1
- Reaksiyon puanı
- 1,730
- Puanları
- 113
- Konum
- Adana
- Web sitesi
- webadam.net
- Cinsiyet
- Erkek
Flatcast radyoları için hazırlamış olduğum HTML web radyo indexi. Index blogcu tarzı sitelere uyumludur aşağıdaki vermiş olduğum kodları kendinize göre düzenleyerek eklemeniz yeterlidir.
Demo Ön izleme => Radyo Adı
Ekran görüntüsü:
Index Kodları:
[CODE lang="html" title="Flatcast Radyo İndex Kodları"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Radyo Adı</title>
<meta name="description" content="Türkiye'nin en iyi flatcast web radyosu">
<meta name="keywords" content="Flatcast, radyo, flatcast web radyo, müzik, sohbet, eğlence.">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- İKONLAR -->
<link rel="icon" type="image/png" href="images/favicon.png" sizes="32x32"/>
<!-- FONT -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- CSS KODLARI -->
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="wrapper">
<div class="ust-icerik">
<div class="logo">
<!-- Buradaki logo örnektir genişliği 209px yüksekliği 42px kendi logonuzu eklemeniz gerekmektedir -->
<img src="https://webadam.net/styles/nulumia/xendark/xenforo/skin/webadamComTr-Logo.png" width="209" height="42" />
</div>
<div class="menu">
<ul>
<li><a href="http://www.flatcast.com/de/WizTakeOver.aspx">Dj Girişi</a></li>
<li><a href="https://www.flatcast.com/de/WizUsr.aspx" target="_blank">Nick Al</a></li>
<li><a href="https://download.flatcast.net/objects/FlatViewerSetup530.exe">Aktivex</a></li>
<li><a href="http://www.allaturkaa.de/radyo/sid.php?no=sidnoyaz" target="_blank">Rulete Sid Gönder</a></li>
<li><a href="https://webadam.net" target="_blank">Flatcast Destek Forumu</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="banner">
<div class="overlay"></div>
<div class="bubble-animate">
<div class="circle small square1"></div>
<div class="circle small square2"></div>
<div class="circle small square3"></div>
<div class="circle small square4"></div>
<div class="circle small square5"></div>
<div class="circle medium square1"></div>
<div class="circle medium square2"></div>
<div class="circle medium square3"></div>
<div class="circle medium square4"></div>
<div class="circle medium square5"></div>
<div class="circle large square1"></div>
<div class="circle large square2"></div>
<div class="circle large square3"></div>
<div class="circle large square4"></div>
</div>
<div class="djler-bar">
<div class="djler-yazi">
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="horizontal" scrollamount="6" scrolldelay="60" loop="99999">
<font>Gönüllerinize Taht Kuran Bir Birinden Değerli Djlerimiz:</font>
<font color="#ff0000">Dj Adanalı</font> ~ <font color="#b435f6">Dj deneme</font> ~
<font>Harika müzikler eşliğinde keyifli dinlemeler hoş sohbetler dileriz.</font>
</marquee>
</div>
</div>
</div>
<div class="wrapper">
<div class="radyo-icerik">
<div class="radyo-genislik">
<h3>Radyo Canlı Yayın / Hoş Geldiniz Keyifli Sohbetler Dileriz...</h3>
<div class="cizgi"></div>
<IFRAME height="600" width="1000" frameborder="0" scrolling="no" src="https://www.flatcast.com/Player.aspx?sid=sidnoyaz"></IFRAME>
</div>
</div>
</div>
<div class="footer">
<div class="kurallar-bar">
<div class="kurallar-yazi">
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="horizontal" scrollamount="6" scrolldelay="60" loop="99999">
Buraya Radyo kurallarınızı yazabilirsiniz
</marquee>
</div>
</div>
<div class="copyright">
<div class="wrapper">
<span><a href="https://webadam.net" target="_blank">© 2021 webadam.net.TR | Flatcast Destek Forumu |</a> Design By ADANALI</span>
</div>
</div>
</div>
<style>
* {
margin: 0px auto;
padding: 0px;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.7;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
font-size: 1.1rem;
background: #222831;
}
.header {
height: 80px;
width: 100%;
background: #384252;
}
.wrapper {
width: 1030px;
margin: 0 auto;
}
.ust-icerik {
line-height: 80px;
}
.logo {
float: left;
}
.logo img {
line-height: 80px !important;
margin: 18px 0px;
height: 42px;
width: 209px;
}
.menu {
float: right;
}
.menu ul {
list-style: none;
}
.menu ul li {
float: left;
}
.menu ul li a {
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 14px;
padding: 0 15px;
display: block;
}
.menu ul li a:hover {
background: #222831;
}
.banner {
background: url(https://i.pinimg.com/originals/5d/7d/73/5d7d733973f10d8f0f86171c982f40e9.jpg) no-repeat center -380px;
height: 450px;
width: 100%;
position: relative;
z-index: 1;
}
.banner .overlay {
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: rgba(46, 58, 120,0.1);
background: radial-gradient(circle, rgba(46, 58, 120,0.8) 0%, rgba(40, 47, 59,0.8) 100%);
width: 100%;
height: 100%;
}
.bubble-animate{position:absolute;left:0;top:0;width:100%;height:390px;overflow:hidden;z-index:10}
.bubble-animate .circle{background:#fff;border-radius:50%;bottom:0;position:absolute}
.bubble-animate .circle.small{width:20px;height:20px;opacity:0.7}
.bubble-animate .circle.small.square1{left:18%;top:100%;animation-name:smallBubble;animation-duration:3s;animation-iteration-count:infinite;animation-delay:1s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square2{left:36%;top:100%;animation-name:smallBubble;animation-duration:4s;animation-iteration-count:infinite;animation-delay:2s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square3{left:54%;top:100%;animation-name:smallBubble;animation-duration:5s;animation-iteration-count:infinite;animation-delay:1s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square4{left:72%;top:100%;animation-name:smallBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:4s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square5{left:90%;top:100%;animation-name:smallBubble;animation-duration:7s;animation-delay:5s;animation-timing-function:ease-in}
.bubble-animate .circle.medium{width:40px;height:40px;opacity:0.35}
.bubble-animate .circle.medium.square1{left:21%;top:100%;animation-name:mediumBubble;animation-duration:5s;animation-iteration-count:infinite;animation-delay:2s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square2{left:42%;top:100%;animation-name:mediumBubble;animation-duration:8s;animation-iteration-count:infinite;animation-delay:6s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square3{left:63%;top:100%;animation-name:mediumBubble;animation-duration:12s;animation-iteration-count:infinite;animation-delay:12s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square4{left:84%;top:100%;animation-name:mediumBubble;animation-duration:4s;animation-iteration-count:infinite;animation-delay:12s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square5{left:105%;top:100%;animation-name:mediumBubble;animation-duration:18s;animation-iteration-count:infinite;animation-delay:6s;animation-timing-function:ease-in}
.bubble-animate .circle.large{width:100px;height:100px;opacity:0.15}
.bubble-animate .circle.large.square1{left:21%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:6s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square2{left:42%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:3s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square3{left:63%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:13s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square4{left:84%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:9s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square5{left:105%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:13s;animation-timing-function:ease-in}@-webkit-keyframes smallBubble{0%{top:100%;margin-left:10px}25%{margin-left:-10px}50%{margin-left:10px}75%{margin-left:-10px}100%{top:0%;opacity:0;margin-left:0px}}@keyframes smallBubble{0%{top:100%;margin-left:10px}25%{margin-left:-10px}50%{margin-left:10px}75%{margin-left:-10px}100%{top:0%;opacity:0;margin-left:0px}}@-webkit-keyframes mediumBubble{0%{top:100%;margin-left:15px}25%{margin-left:-15px}50%{margin-left:15px}75%{margin-left:-15px}100%{top:0%;opacity:0;margin-left:0px}}@keyframes mediumBubble{0%{top:100%;margin-left:15px}25%{margin-left:-15px}50%{margin-left:15px}75%{margin-left:-15px}100%{top:0%;opacity:0;margin-left:0px}}@-webkit-keyframes bigBubble{0%{top:100%;margin-left:20px}25%{margin-left:-20px}50%{margin-left:20px}75%{margin-left:-20px}100%{top:0%;opacity:0;margin-left:0px}}@keyframes bigBubble{0%{top:100%;margin-left:20px}25%{margin-left:-20px}50%{margin-left:20px}75%{margin-left:-20px}100%{top:0%;opacity:0;margin-left:0px}}
.djler-bar {
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.5);
height: 60px;
width: 100%;
left: 0px;
z-index: 3;
}
.djler-yazi {
color: #fff;
line-height: 60px;
font-size: 22px;
}
.radyo-icerik {
background: rgba(56, 66, 82,0.3);
margin: 50px auto;
padding: 10px 0px;
}
.radyo-genislik {
width: 1000px;
}
.radyo-icerik h3 {
font-weight: 300;
font-size: 17px;
}
.cizgi {
width: 100%;
height: 1px;
background: rgba(56, 66, 82,0.5);
border-top: solid 1px #222831;
margin: 7px auto;
}
.footer {
width: 100%;
z-index: 1;
}
.kurallar-bar {
background: rgba(56, 66, 82,0.3);
height: 60px;
width: 100%;
left: 0px;
z-index: 3;
}
.kurallar-yazi {
color: #fff;
line-height: 60px;
font-size: 22px;
}
.copyright {
background: rgba(56, 66, 82,0.1);
height: 30px;
}
.copyright span {
font-size: 13px;
float: right;
line-height: 30px;
position: relative;
z-index: 99;
}
.copyright a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
}
</style>
</body>
</html>
[/CODE]
Demo Ön izleme => Radyo Adı
Ekran görüntüsü:

Index Kodları:
[CODE lang="html" title="Flatcast Radyo İndex Kodları"]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Radyo Adı</title>
<meta name="description" content="Türkiye'nin en iyi flatcast web radyosu">
<meta name="keywords" content="Flatcast, radyo, flatcast web radyo, müzik, sohbet, eğlence.">
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<!-- İKONLAR -->
<link rel="icon" type="image/png" href="images/favicon.png" sizes="32x32"/>
<!-- FONT -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<!-- CSS KODLARI -->
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="header">
<div class="wrapper">
<div class="ust-icerik">
<div class="logo">
<!-- Buradaki logo örnektir genişliği 209px yüksekliği 42px kendi logonuzu eklemeniz gerekmektedir -->
<img src="https://webadam.net/styles/nulumia/xendark/xenforo/skin/webadamComTr-Logo.png" width="209" height="42" />
</div>
<div class="menu">
<ul>
<li><a href="http://www.flatcast.com/de/WizTakeOver.aspx">Dj Girişi</a></li>
<li><a href="https://www.flatcast.com/de/WizUsr.aspx" target="_blank">Nick Al</a></li>
<li><a href="https://download.flatcast.net/objects/FlatViewerSetup530.exe">Aktivex</a></li>
<li><a href="http://www.allaturkaa.de/radyo/sid.php?no=sidnoyaz" target="_blank">Rulete Sid Gönder</a></li>
<li><a href="https://webadam.net" target="_blank">Flatcast Destek Forumu</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="banner">
<div class="overlay"></div>
<div class="bubble-animate">
<div class="circle small square1"></div>
<div class="circle small square2"></div>
<div class="circle small square3"></div>
<div class="circle small square4"></div>
<div class="circle small square5"></div>
<div class="circle medium square1"></div>
<div class="circle medium square2"></div>
<div class="circle medium square3"></div>
<div class="circle medium square4"></div>
<div class="circle medium square5"></div>
<div class="circle large square1"></div>
<div class="circle large square2"></div>
<div class="circle large square3"></div>
<div class="circle large square4"></div>
</div>
<div class="djler-bar">
<div class="djler-yazi">
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="horizontal" scrollamount="6" scrolldelay="60" loop="99999">
<font>Gönüllerinize Taht Kuran Bir Birinden Değerli Djlerimiz:</font>
<font color="#ff0000">Dj Adanalı</font> ~ <font color="#b435f6">Dj deneme</font> ~
<font>Harika müzikler eşliğinde keyifli dinlemeler hoş sohbetler dileriz.</font>
</marquee>
</div>
</div>
</div>
<div class="wrapper">
<div class="radyo-icerik">
<div class="radyo-genislik">
<h3>Radyo Canlı Yayın / Hoş Geldiniz Keyifli Sohbetler Dileriz...</h3>
<div class="cizgi"></div>
<IFRAME height="600" width="1000" frameborder="0" scrolling="no" src="https://www.flatcast.com/Player.aspx?sid=sidnoyaz"></IFRAME>
</div>
</div>
</div>
<div class="footer">
<div class="kurallar-bar">
<div class="kurallar-yazi">
<marquee onmouseover="this.stop()" onmouseout="this.start()" direction="horizontal" scrollamount="6" scrolldelay="60" loop="99999">
Buraya Radyo kurallarınızı yazabilirsiniz
</marquee>
</div>
</div>
<div class="copyright">
<div class="wrapper">
<span><a href="https://webadam.net" target="_blank">© 2021 webadam.net.TR | Flatcast Destek Forumu |</a> Design By ADANALI</span>
</div>
</div>
</div>
<style>
* {
margin: 0px auto;
padding: 0px;
}
body {
font-family: 'Poppins', sans-serif;
line-height: 1.7;
color: rgba(255, 255, 255, 0.5);
font-weight: 400;
font-size: 1.1rem;
background: #222831;
}
.header {
height: 80px;
width: 100%;
background: #384252;
}
.wrapper {
width: 1030px;
margin: 0 auto;
}
.ust-icerik {
line-height: 80px;
}
.logo {
float: left;
}
.logo img {
line-height: 80px !important;
margin: 18px 0px;
height: 42px;
width: 209px;
}
.menu {
float: right;
}
.menu ul {
list-style: none;
}
.menu ul li {
float: left;
}
.menu ul li a {
text-decoration: none;
color: rgb(255, 255, 255);
font-size: 14px;
padding: 0 15px;
display: block;
}
.menu ul li a:hover {
background: #222831;
}
.banner {
background: url(https://i.pinimg.com/originals/5d/7d/73/5d7d733973f10d8f0f86171c982f40e9.jpg) no-repeat center -380px;
height: 450px;
width: 100%;
position: relative;
z-index: 1;
}
.banner .overlay {
position: absolute;
top: 0;
left: 0;
z-index: 2;
background: rgba(46, 58, 120,0.1);
background: radial-gradient(circle, rgba(46, 58, 120,0.8) 0%, rgba(40, 47, 59,0.8) 100%);
width: 100%;
height: 100%;
}
.bubble-animate{position:absolute;left:0;top:0;width:100%;height:390px;overflow:hidden;z-index:10}
.bubble-animate .circle{background:#fff;border-radius:50%;bottom:0;position:absolute}
.bubble-animate .circle.small{width:20px;height:20px;opacity:0.7}
.bubble-animate .circle.small.square1{left:18%;top:100%;animation-name:smallBubble;animation-duration:3s;animation-iteration-count:infinite;animation-delay:1s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square2{left:36%;top:100%;animation-name:smallBubble;animation-duration:4s;animation-iteration-count:infinite;animation-delay:2s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square3{left:54%;top:100%;animation-name:smallBubble;animation-duration:5s;animation-iteration-count:infinite;animation-delay:1s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square4{left:72%;top:100%;animation-name:smallBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:4s;animation-timing-function:ease-in}
.bubble-animate .circle.small.square5{left:90%;top:100%;animation-name:smallBubble;animation-duration:7s;animation-delay:5s;animation-timing-function:ease-in}
.bubble-animate .circle.medium{width:40px;height:40px;opacity:0.35}
.bubble-animate .circle.medium.square1{left:21%;top:100%;animation-name:mediumBubble;animation-duration:5s;animation-iteration-count:infinite;animation-delay:2s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square2{left:42%;top:100%;animation-name:mediumBubble;animation-duration:8s;animation-iteration-count:infinite;animation-delay:6s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square3{left:63%;top:100%;animation-name:mediumBubble;animation-duration:12s;animation-iteration-count:infinite;animation-delay:12s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square4{left:84%;top:100%;animation-name:mediumBubble;animation-duration:4s;animation-iteration-count:infinite;animation-delay:12s;animation-timing-function:ease-in}
.bubble-animate .circle.medium.square5{left:105%;top:100%;animation-name:mediumBubble;animation-duration:18s;animation-iteration-count:infinite;animation-delay:6s;animation-timing-function:ease-in}
.bubble-animate .circle.large{width:100px;height:100px;opacity:0.15}
.bubble-animate .circle.large.square1{left:21%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:6s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square2{left:42%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:3s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square3{left:63%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:13s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square4{left:84%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:9s;animation-timing-function:ease-in}
.bubble-animate .circle.large.square5{left:105%;top:100%;animation-name:bigBubble;animation-duration:6s;animation-iteration-count:infinite;animation-delay:13s;animation-timing-function:ease-in}@-webkit-keyframes smallBubble{0%{top:100%;margin-left:10px}25%{margin-left:-10px}50%{margin-left:10px}75%{margin-left:-10px}100%{top:0%;opacity:0;margin-left:0px}}@keyframes smallBubble{0%{top:100%;margin-left:10px}25%{margin-left:-10px}50%{margin-left:10px}75%{margin-left:-10px}100%{top:0%;opacity:0;margin-left:0px}}@-webkit-keyframes mediumBubble{0%{top:100%;margin-left:15px}25%{margin-left:-15px}50%{margin-left:15px}75%{margin-left:-15px}100%{top:0%;opacity:0;margin-left:0px}}@keyframes mediumBubble{0%{top:100%;margin-left:15px}25%{margin-left:-15px}50%{margin-left:15px}75%{margin-left:-15px}100%{top:0%;opacity:0;margin-left:0px}}@-webkit-keyframes bigBubble{0%{top:100%;margin-left:20px}25%{margin-left:-20px}50%{margin-left:20px}75%{margin-left:-20px}100%{top:0%;opacity:0;margin-left:0px}}@keyframes bigBubble{0%{top:100%;margin-left:20px}25%{margin-left:-20px}50%{margin-left:20px}75%{margin-left:-20px}100%{top:0%;opacity:0;margin-left:0px}}
.djler-bar {
position: absolute;
bottom: 0px;
background: rgba(0,0,0,0.5);
height: 60px;
width: 100%;
left: 0px;
z-index: 3;
}
.djler-yazi {
color: #fff;
line-height: 60px;
font-size: 22px;
}
.radyo-icerik {
background: rgba(56, 66, 82,0.3);
margin: 50px auto;
padding: 10px 0px;
}
.radyo-genislik {
width: 1000px;
}
.radyo-icerik h3 {
font-weight: 300;
font-size: 17px;
}
.cizgi {
width: 100%;
height: 1px;
background: rgba(56, 66, 82,0.5);
border-top: solid 1px #222831;
margin: 7px auto;
}
.footer {
width: 100%;
z-index: 1;
}
.kurallar-bar {
background: rgba(56, 66, 82,0.3);
height: 60px;
width: 100%;
left: 0px;
z-index: 3;
}
.kurallar-yazi {
color: #fff;
line-height: 60px;
font-size: 22px;
}
.copyright {
background: rgba(56, 66, 82,0.1);
height: 30px;
}
.copyright span {
font-size: 13px;
float: right;
line-height: 30px;
position: relative;
z-index: 99;
}
.copyright a {
text-decoration: none;
color: rgba(255, 255, 255, 0.5);
}
</style>
</body>
</html>
[/CODE]
Son düzenleme: