"How to use RSS XML from any news source"
Bootstrap 3.1.0 Snippet by muhittinbudak

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <div class="container" style="font-family: 'Strait', sans-serif;"> <div class="row"> <h2 class="main-list" style="padding: 15px;">Milliyet Son Dakika Haberleri</h2> <div id="feed-container"> <div id="loading">Haberler yükleniyor...</div> </div> </div> </div>
body { background-color: #f3f4f6; font-family: 'Inter', sans-serif; padding-top: 20px; } .main-list { padding-left: .5em; background-color: #ffffff; border-radius: 15px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } .main-list .media { padding-bottom: 1.1em; border-bottom: 1px solid #D6D6D6; margin-top: 0; padding-top: 15px; } .main-list .media:last-child { border-bottom: none; } .habertext { border: 1px solid #D9534F; border-radius: 5px; font-size: 14px; font-weight: 500; } .media-heading { font-size: 18px; font-weight: bold; margin-top: 0; color: #333; } /* list item shortening a long sentence. */ .haber-description { overflow: hidden; width:100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: #555; font-size: 14px; } .image-container { width: 150px; height: 100px; overflow: hidden; position: relative; border-radius: 5px; } .image-container img { width: 100%; height: 100%; object-fit: cover; display: block; position: relative; } #loading { text-align: center; padding: 20px; color: #999; }
$(document).ready(function() { // CORS proxy servisi, aynı alan adı politikasını aşmak için var proxyUrl = 'https://api.allorigins.win/raw?url='; var rssUrl = 'https://www.milliyet.com.tr/rss/rssnew/sondakikarss.xml'; var feedContainer = $('#feed-container'); $.ajax({ url: proxyUrl + encodeURIComponent(rssUrl), type: 'GET', dataType: "xml" }).done(function(xml) { $('#loading').remove(); var items = $(xml).find("item"); if (items.length === 0) { feedContainer.html('<p class="text-center text-danger">Haber bulunamadı.</p>'); return; } // Tüm haberleri tutacak bir liste oluştur var output = '<ul class="media-list main-list" style="border-top: 2px solid red;">'; $.each(items, function(i, e) { var title = $(e).find("title").text().trim(); var link = $(e).find("link").text().trim(); var descriptionHtml = $(e).find("description").text().trim(); // Description HTML'ini jQuery ile parse et var parsedDescription = $(`<div>${descriptionHtml}</div>`); var imageUrl = parsedDescription.find('img').attr('src') || 'https://placehold.co/150x100'; var text = parsedDescription.find('p').first().text().trim() || 'Açıklama mevcut değil.'; // Liste öğesini oluştur output += ` <li class="media"> <a class="pull-left" href="${link}" target="_blank"> <div class="image-container"> <img class="media-object img-responsive img-rounded" src="${imageUrl}"> </div> </a> <div class="media-body"> <h4 class="media-heading">${title}</h4> <p class="haber-description by-author">${text}</p> <div class="btn-toolbar" style="margin-top:10px;"> <a href="${link}" style="font-size:18px" target="_blank" class="btn btn-lg btn-danger habertext"> Habere Git <span class="glyphicon glyphicon-chevron-right"></span> </a> </div> </div> </li> `; }); output += "</ul>"; feedContainer.html(output); }).fail(function(jqXHR, textStatus, errorThrown) { console.error("Hata:", textStatus, errorThrown); $('#loading').remove(); feedContainer.html('<p class="text-center text-danger">Haberler yüklenirken bir sorun oluştu. Lütfen daha sonra tekrar deneyin.</p>'); }); });

Related: See More


Questions / Comments: