<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;">Sözcü Ekonomi 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; } .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() { var feedContainer = $('#feed-container'); var rssUrl = "https://www.sozcu.com.tr/feeds-rss-category-ekonomi"; var apiUrl = "https://api.rss2json.com/v1/api.json?rss_url=" + encodeURIComponent(rssUrl); $.getJSON(apiUrl, function(data) { $('#loading').remove(); if (!data.items || data.items.length === 0) { feedContainer.html('<p class="text-center text-danger">Haber bulunamadı.</p>'); return; } var output = '<ul class="media-list main-list" style="border-top: 2px solid red;">'; $.each(data.items, function(i, e) { var title = e.title; var link = e.link; var description = e.description; var imageUrl = (e.enclosure && e.enclosure.link) ? e.enclosure.link : 'https://placehold.co/150x100/A8D8EA/37474F?text=Resim+Yok'; // Yayın tarihi formatlama var pubDate = new Date(e.pubDate); var formattedDate = pubDate.toLocaleString("tr-TR", { day: "2-digit", month: "long", year: "numeric", hour: "2-digit", minute: "2-digit" }); 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} (<span style="color:blue">Publish: ${formattedDate}</span>)</h4> <p class="haber-description by-author">${description}</p> <div class="btn-toolbar" style="margin-top:10px;"> <a href="${link}" style="font-size:20px" 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() { $('#loading').remove(); feedContainer.html('<p class="text-center text-danger">Haberler yüklenirken bir sorun oluştu. Lütfen daha sonra tekrar deneyin.</p>'); }); });