HOŞ GELDİNİZ!

Burayı Görünüm ve Diller altında bulunan Tema özellikleri > [-MD-] Ziyaretçi Paneli alanından düzenleyebilirsiniz.

Flatcast Html Web Radyo Indexi

Adanalı

Administrator
14
WA RANK
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ü:
flatcasthtmlindexjpey8.jpg


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">&copy; 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:
Emeklerinize saglik ..
 
Emeğine Yüreğine Sağlık Kardeşim Güzel çalışma Paylaşımın için :tesekkurler:(y):coffee:
 
Emeğine sağlık Kardeşim Teşekkür ederim ..
 

Konuyu toplam 0 üye okuyor. (0 Kayıtlı üye ve 0 Misafir)

Sitemiz bir forum sitesi olduğu için kullanıcılar her türlü görüşlerini önceden onay olmadan anında siteye yazabilmektedir. 5651 sayılı yasaya göre bu yazılardan dolayı doğabilecek her türlü sorumluluk yazan kullanıcılara aittir. 5651 sayılı yasaya göre sitemiz mesajları kontrolle yükümlü olmayıp, yasaya aykırı yada telif hakkı içeren paylaşımlar BURADAN bize ulaşıldığı taktirde, ilgili konu en geç 48 saat içerisinde kaldırılacaktır. Sitemizde Bulunan Videolar YouTube, Facebook, Dailymotion, v.b. video paylaşım sitelerinden alınmaktadır. Telif hakları sorumluluğu bu sitelere aittir. Videoların hiç biri sunucularımızda bulunmamaktadır.
İp ucu 1
  • Geri
    Üst