İster bilgisayarınızda çalıştırmaak, ister flash disklerinizde bulundurmak istersenizde web sitenizde yayınlamak için sadece javascript kodundan oluşan rss reader kodları aşağıda. Örnek sayfa şurada.
Aşağıdaki kodu bilgisayarınızd ayada flsh diskte bulunduracaksanız çalışması için notepad'i açın. Kodları yapıştırın. uzantısı .html olacak şekilde istediğiniz isimle kaydedin. Örnek kod blogger tabanlı sitede yer almaktadır.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<meta charset='UTF-8'/>
<meta content='width=device-width, initial-scale=1.0' name='viewport'/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' name='viewport'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' name='twitter:image:src'/>
</b:if>
</b:if>
<title>RSS Okuyucu - Haberler ve Son Dakika</title>
<meta content='RSS Okuyucu ile favori haber sitelerinizden gelen son haberleri kolayca takip edin.' name='description'/>
<meta content='RSS okuyucu, haber, son dakika, teknoloji, ekonomi, politika' name='keywords'/>
<meta content='index, follow' name='robots'/>
<meta content='Erol Dizdar' name='author'/>
<link href='https://rssokuyucu.blogspot.com' rel='canonical'/>
<meta content='RSS Okuyucu - Haberler ve Son Dakika' property='og:title'/>
<meta content='RSS Okuyucu ile favori haber sitelerinizden gelen son haberleri kolayca takip edin.' property='og:description'/>
<meta content='website' property='og:type'/>
<meta content='https://rssokuyucu.blogspot.com' property='og:url'/>
<meta content='https://rssokuyucu.blogspot.com/rssokuyucu.jpg' property='og:image'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='RSS Okuyucu - Haberler ve Son Dakika' name='twitter:title'/>
<meta content='RSS Okuyucu ile favori haber sitelerinizden gelen son haberleri kolayca takip edin.' name='twitter:description'/>
<meta content='https://rssokuyucu.blogspot.com/rssokuyucu.jpg' name='twitter:image'/>
<meta content='@YourTwitterHandle' name='twitter:site'/>
<meta content='@YourTwitterHandle' name='twitter:creator'/>
<meta content='RSS Okuyucu' property='og:site_name'/>
<meta content='RSS Okuyucu' name='application-name'/>
<meta content='#ffffff' name='msapplication-TileColor'/>
<meta content='/ms-icon-144x144.png' name='msapplication-TileImage'/>
<meta content='#ffffff' name='theme-color'/>
<style>
/* CSS Kodları */
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
margin: 0;
}
/* Üstteki sabit başlık (header) */
#header {
background-color: #FF9900;
color: #000;
text-align: center;
padding: 5px 0;
width: 100%;
position: fixed;
top: 0;
z-index: 1001;
font-size: 20px; /* Başlık boyutunu küçültmek için */
}
#header h1 {
margin: 0;
font-size: 1rem; /* Mobil cihazlar için başlık boyutu */
}
/* Sol taraftaki menü (sidebar) */
#sidebar {
width: 200px;
background-color: #f4f4f4;
padding: 10px;
box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
position: fixed;
top: 60px;
left: 0;
height: calc(100vh - 60px);
overflow-y: auto;
transition: transform 0.3s ease-in-out;
transform: translateX(-100%);
}
#sidebar.open {
transform: translateX(0);
}
#sidebar ul {
list-style-type: none;
padding: 0;
}
#sidebar ul li {
margin: 5px 0;
}
#sidebar ul li a {
text-decoration: none;
color: #333;
cursor: pointer;
display: block;
padding: 5px 10px;
}
.category {
cursor: pointer;
font-weight: bold;
}
.links {
display: none;
padding-left: 20px;
}
.links li a {
cursor: pointer;
}
/* İçerik Alanı (content) */
#content {
margin-left: 210px;
padding: 50px 20px 20px 20px; /* Üstteki sabit başlık için padding-top artırıldı */
max-width: 800px;
width: 800px;
}
/* Mobil Cihazlar İçin */
@media only screen and (max-width: 800px) {
body {
flex-direction: column;
align-items: center;
}
#header {
font-size: 16px; /* Mobilde başlık boyutunu daha da küçültmek için */
}
#header h1 {
font-size: 0.9rem; /* Mobil cihazlar için başlık boyutu */
}
#sidebar {
width: 80%;
max-width: 250px;
position: fixed;
top: 60px;
left: 0;
height: auto;
box-shadow: none;
margin-bottom: 8px;
z-index: 1000;
transform: translateX(-100%);
}
#content {
width: 100%;
padding: 70px 5px 5px 5px; /* Başlık ve menü için daha fazla padding-top */
max-width: 100%;
margin-left: 8px;
}
}
.menu-button {
position: fixed;
top: 30px;
left: 10px;
background-color: #000000;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
z-index: 1002;
}
</style>
<b:skin><![CDATA[ ]]></b:skin>
</head>
<body>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'/>
<div id='header'>
<h1>RSS Okuyucu - Son Dakika En Güncel Haberler Ve Bilgiler</h1>
</div>
<button class='menu-button' onclick='toggleMenu()'>Menu</button>
<div id='sidebar'>
<ul id='rss-list'>
<li class='category' data-category='haberler'>Haberler</li>
<ul class='links' data-category='haberler'>
<li><a data-url='https://www.sozcu.com.tr/feeds-rss-category-gundem' href='#'>Sözcü</a></li>
<li><a data-url='https://tr.euronews.com/rss' href='#'>Euronews</a></li>
<li><a data-url='https://feeds.bbci.co.uk/turkce/rss.xml' href='#'>BBC</a></li>
<li><a data-url='https://www.internethaber.com/rss' href='#'>İnternet Haber</a></li>
<li><a data-url='https://www.aa.com.tr/tr/rss/default?cat=guncel' href='#'>Anadolu Ajansı</a></li>
<li><a data-url='https://onedio.com/Publisher/publisher-gundem.rss' href='#'>Onedio</a></li>
<li><a data-url='https://www.odatv.com/export/rss' href='#'>Oda TV</a></li>
<li><a data-url='https://www.mynet.com/haber/rss/gununozeti/' href='#'>Mynet Günün Özeti</a></li>
</ul>
<li class='category' data-category='teknoloji'>Teknoloji</li>
<ul class='links' data-category='teknoloji'>
<li><a data-url='https://feeds.feedburner.com/eroldizdar' href='#'>Erol Dizdar</a></li>
<li><a data-url='https://feeds.feedburner.com/webteknocom' href='#'>WebTekno</a></li>
<li><a data-url='https://www.teknolojioku.com/rss' href='#'>Teknoloji Oku</a></li>
</ul>
<li class='category' data-category='habertv'>Haber Kanalları</li>
<ul class='links' data-category='habertv'>
<li><a data-url='https://www.ahaber.com.tr/rss/anasayfa.xml' href='#'>A Haber</a></li>
<li><a data-url='https://www.cnnturk.com/feed/rss/all/news' href='#'>CNN Türk</a></li>
<li><a data-url='http://www.trthaber.com/sondakika.rss' href='#'>TRT Haber</a></li>
<li><a data-url='http://www.haberturk.com/rss' href='#'>Haber Türk</a></li>
</ul>
</ul>
</div>
<div id='content'>
İçeriğini burada görüntülemek için soldan bir RSS beslemesi seçin.<br/> Deneme aşamasındadır. <br/>Tıkladığınız sitenin içeriklerinin yüklenmesi birkaç saniye sürebilmektedir. <br/>Zamanla adresler eklenecektir.<br/><br/>
<a href='https://www.eroldizdar.com/' target='_blank'>Erol Dizdar</a>
</div>
<script>
function toggleMenu() {
const sidebar = document.getElementById('sidebar');
sidebar.classList.toggle('open');
}
document.addEventListener('DOMContentLoaded', () => {
const categories = document.querySelectorAll('.category');
categories.forEach(category => {
category.addEventListener('click', () => {
const categoryName = category.getAttribute('data-category');
const links = document.querySelector(`.links[data-category='${categoryName}']`);
document.querySelectorAll('.links').forEach(linkList => {
if (linkList !== links) {
linkList.style.display = 'none';
}
});
links.style.display = links.style.display === 'block' ? 'none' : 'block';
});
});
const links = document.querySelectorAll('.links a');
links.forEach(link => {
link.addEventListener('click', async (event) => {
event.preventDefault();
const url = event.target.getAttribute('data-url');
const name = event.target.textContent;
try {
const response = await fetch(`https://api.allorigins.win/get?url=${encodeURIComponent(url)}`);
if (!response.ok) throw new Error('Network response was not ok');
const data = await response.json();
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(data.contents, "text/xml");
const items = xmlDoc.querySelectorAll("item");
let html = `<h2>${name} Haberleri</h2><ul>`;
items.forEach(item => {
const title = item.querySelector("title").textContent;
const link = item.querySelector("link").textContent;
const description = item.querySelector("description").textContent;
html += `<li>
<h3><a href='${link}' target='_blank'>${title}</a></h3>
<p>${description}</p>
</li>`;
});
html += '</ul>';
document.getElementById('content').innerHTML = html;
} catch (error) {
console.error('Error loading RSS feed:', error);
document.getElementById('content').innerHTML = `<p>${name} RSS feed could not be loaded. Please try again later.</p>`;
}
});
});
});
</script>
</body>
</html>
0 Yorumlar