<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Banner Yönetim Paneli</title>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 20px auto; padding: 10px; }
.form-grup { margin-bottom: 15px; }
.form-grup input { padding: 8px; width: 80%; max-width: 300px; }
button { padding: 8px 15px; cursor: pointer; background-color: #2ecc71; color: white; border: none; border-radius: 4px; }
.btn-sil { background-color: #e74c3c; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
th { background-color: #f4f4f4; }
.banner-img { max-width: 200px; max-height: 60px; display: block; }
</style>
</head>
<body>
<h2>Banner Ekleme Paneli</h2>
<div class="form-grup">
<input type="text" id="bannerResim" placeholder="Banner Resim URL (örn: https://site.com/resim.jpg)">
</div>
<div class="form-grup">
<input type="text" id="bannerLink" placeholder="Gideceği Link URL (örn: https://hedefsite.com)">
</div>
<button onclick="bannerEkle()">Banner Ekle</button>
<hr>
<h3>Mevcut Bannerlar (Alt Alta)</h3>
<table id="bannerTablosu">
<thead>
<tr>
<th>Banner Görseli</th>
<th>Yönlendirilen Link</th>
<th>İşlem</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
function bannerEkle() {
var resimUrl = document.getElementById("bannerResim").value;
var linkUrl = document.getElementById("bannerLink").value;
if (resimUrl === "" || linkUrl === "") {
alert("Lütfen hem resim URL'sini hem de yönlenecek linki doldurun!");
return; // Alanlar boşsa fonksiyonu burada durdur
}
var tabloBody = document.getElementById("bannerTablosu").getElementsByTagName('tbody')[0];
var yeniSatir = document.createElement("tr");
var tdGorsel = document.createElement("td");
var tdLink = document.createElement("td");
var tdIslem = document.createElement("td");
var linkElementi = document.createElement("a");
linkElementi.href = linkUrl;
linkElementi.target = "_blank"; // Yeni sekmede açılması için
var imgElementi = document.createElement("img");
imgElementi.src = resimUrl;
imgElementi.className = "banner-img";
imgElementi.alt = "Banner";
linkElementi.appendChild(imgElementi); // Resmi linkin içine koyduk
tdGorsel.appendChild(linkElementi); // Linki de TD'nin içine koyduk
tdLink.innerHTML = `<a href="${linkUrl}" target="_blank">${linkUrl}</a>`;
var silButonu = document.createElement("button");
silButonu.innerText = "Sil";
silButonu.className = "btn-sil";
silButonu.onclick = function() {
yeniSatir.remove();
};
tdIslem.appendChild(silButonu);
yeniSatir.appendChild(tdGorsel);
yeniSatir.appendChild(tdLink);
yeniSatir.appendChild(tdIslem);
tabloBody.appendChild(yeniSatir);
document.getElementById("bannerResim").value = "";
document.getElementById("bannerLink").value = "";
}
</script>
</body>
</html>Evet aynısı yani burdan eklicem sitede görünecek alt alta bukadar
Babacim bana birde ee sil butonu ekleye bilirmisin örnek banneri silmek isticem nasıl aile bilirim birde bana üst tarafa bir boş bir site köşeye sadece o etiketleri içinde hoşgeldin yazıp sonra onu kodlarina ekleyebilirmisin verdiğin koddda banner anasayfa gelirmi deniyim tşkler harika bişey olmus
Yani
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Ana Sayfa</title>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 20px auto; text-align: center; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
td { padding: 10px; text-align: center; }
.banner-img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.logo { font-weight: bold; font-size: 24px; margin-bottom: 20px; }
</style>
</head>
<body>
<!-- İstediğin Logo ve Hoş Geldiniz Alanı -->
<table>
<tr>
<td class="logo">SİTE LOGOSU</td>
</tr>
</table>
<p>Hoş geldiniz</p>
<!-- Bannerların Alt Alta Listeleneceği Tablo -->
<table>
<tbody id="anaSayfaBannerAlan">
<!-- Panelden eklenen bannerlar buraya otomatik olarak TR ve TD şeklinde gelecek -->
</tbody>
</table>
<script>
// Sayfa açıldığında hafızadaki bannerları yükle
function bannerlariYukle() {
var bannerlar = JSON.parse(localStorage.getItem("siteBannerlari")) || [];
var tabloBody = document.getElementById("anaSayfaBannerAlan");
tabloBody.innerHTML = ""; // Önce temizle
bannerlar.forEach(function(banner) {
// Senin istediğin TR ve TD yapısında alt alta ekliyoruz
var tr = document.createElement("tr");
var td = document.createElement("td");
var link = document.createElement("a");
link.href = banner.linkUrl;
link.target = "_blank";
var img = document.createElement("img");
img.src = banner.resimUrl;
img.className = "banner-img";
img.alt = "Banner";
link.appendChild(img);
td.appendChild(link);
tr.appendChild(td);
tabloBody.appendChild(tr);
});
}
// Sayfa her yüklendiğinde çalıştır
window.onload = bannerlariYukle;
</script>
</body>
</html><!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Banner Yönetim Paneli</title>
<style>
body { font-family: sans-serif; max-width: 600px; margin: 20px auto; padding: 20px; border: 1px solid #ccc; }
.form-grup { margin-bottom: 15px; }
input { padding: 8px; width: 90%; }
button { padding: 8px 15px; cursor: pointer; background-color: #2ecc71; color: white; border: none; }
.btn-sil { background-color: #e74c3c; }
table { width: 100%; border-collapse: collapse; margin-top: 20px; }
td, th { border: 1px solid #ddd; padding: 10px; text-align: left; }
img { max-width: 150px; }
</style>
</head>
<body>
<h2>Banner Yönetim Paneli</h2>
<div class="form-grup">
<input type="text" id="panelResim" placeholder="Banner Resim URL girin">
</div>
<div class="form-grup">
<input type="text" id="panelLink" placeholder="Gideceği Site URL girin">
</div>
<button onclick="yeniBannerEkle()">Bannerı Siteye Ekle</button>
<h3>Mevcut Bannerlar ve Silme Alanı</h3>
<table>
<thead>
<tr>
<th>Görsel</th>
<th>İşlem</th>
</tr>
</thead>
<tbody id="panelTabloBody">
<!-- Eklenen bannerlar silme butonuyla buraya gelecek -->
</tbody>
</table>
<script>
// Hafızadan verileri çek veya boş dizi oluştur
var bannerListesi = JSON.parse(localStorage.getItem("siteBannerlari")) || [];
// Paneli ilk açtığımızda listeyi ekrana bas
function paneliListele() {
var tbody = document.getElementById("panelTabloBody");
tbody.innerHTML = "";
bannerListesi.forEach(function(banner, index) {
var tr = document.createElement("tr");
// Görsel hücresi
var tdGorsel = document.createElement("td");
tdGorsel.innerHTML = `<img src="${banner.resimUrl}" alt="banner">`;
// Silme butonu hücresi
var tdIslem = document.createElement("td");
var silButon = document.createElement("button");
silButon.innerText = "Bu Bannerı Sil";
silButon.className = "btn-sil";
// SİLME İŞLEMİ BURADA YAPILIYOR
silButon.onclick = function() {
bannerListesi.splice(index, 1); // Listeden o elemanı çıkartıyoruz
localStorage.setItem("siteBannerlari", JSON.stringify(bannerListesi)); // Hafızayı güncelliyoruz
paneliListele(); // Paneli yeniliyoruz
};
tdIslem.appendChild(silButon);
tr.appendChild(tdGorsel);
tr.appendChild(tdIslem);
tbody.appendChild(tr);
});
}
// Yeni banner ekleme fonksiyonu
function yeniBannerEkle() {
var resim = document.getElementById("panelResim").value;
var link = document.getElementById("panelLink").value;
if(resim === "" || link === "") {
alert("Lütfen alanları doldurun!");
return;
}
// Listeye yeni veriyi ekle
bannerListesi.push({ resimUrl: resim, linkUrl: link });
// Hafızaya kaydet
localStorage.setItem("siteBannerlari", JSON.stringify(bannerListesi));
// Alanları temizle ve listeyi yenile
document.getElementById("panelResim").value = "";
document.getElementById("panelLink").value = "";
paneliListele();
alert("Banner başarıyla eklendi! Ana sayfanızı yenileyerek kontrol edebilirsiniz.");
}
window.onload = paneliListele;
</script>
</body>
</html>Hocam son olarak banner sil butonu koyabilirmisin
Yani ekle var banneri kaldırmak istedim de sil butonu olabilirmi onunda yaparsan Süper olur
Hocam deneme yaptım tamam tşkler çok guzel oldu birde işte banner resim adı altada kişi banneri tıkladığında banneri tıklayıp o adrese gidicek degilmi
Evet tamda istediğiniz gibi banneri sil dediğinizde anasayfadan ve yönetim panelinden silecektir. Bannera, tıkladığında sizin gideceği url alanına girdiğiniz siteye yönlendirecektir.
