HTML ile Blogger'da Kayan Yazı Şeridi Yapımı (Son Yazılar)

 İşte Blogger blogunuza ekleyebileceğiniz, kayan son yazılar için bir HTML, CSS ve JavaScript kodu örneği:

Yöntem: HTML, CSS ve JavaScript Kullanarak Kayan Son Yazılar

Bu yöntem, blogunuzun yayın akışını (feed) kullanarak son yazı başlıklarını alır ve bunları kayan bir şerit üzerinde gösterir.

<style>
.ticker-container {
    width: 100%;
    overflow: hidden;
    background: #3498db;
    color: white;
    padding: 5px;
    border-radius: 5px;
}

.ticker-wrapper {
    display: flex;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.ticker-content {
    display: flex;
    gap: 20px;
    white-space: nowrap;
    animation: ticker-scroll 20s linear infinite;
    min-width: max-content;
}

@keyframes ticker-scroll {
    from { transform: translateX(15%); }
    to { transform: translateX(-100%); }
}

.ticker-content a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.ticker-content a:hover {
    text-decoration: underline;
}
</style>

<div class="ticker-container" onmouseover="pauseTicker()" onmouseout="resumeTicker()">
    <div class="ticker-wrapper">
        <div class="ticker-content" id="latest-posts"></div>
    </div>
</div>

<script>
function fetchLatestPosts() {
    let feedUrl = "https://YOURBLOG.blogspot.com/feeds/posts/default?alt=json";
    
    fetch(feedUrl)
    .then(response => response.json())
    .then(data => {
        let posts = data.feed.entry.slice(0, 7); // 10 yazı çekiyoruz
        let tickerDiv = document.getElementById("latest-posts");

        posts.forEach((post, index) => {
            let link = post.link.find(l => l.rel === "alternate").href;
            let title = post.title.$t;
            tickerDiv.innerHTML += `<a href="${link}" target="_blank">${title}</a>`;
            if (index < posts.length - 1) {
                tickerDiv.innerHTML += ' ⚡ ';
            }
        });
    })
    .catch(error => console.error("RSS yükleme hatası:", error));
}

fetchLatestPosts();

let ticker = document.querySelector(".ticker-content");

function pauseTicker() {
    ticker.style.animationPlayState = "paused";
}

function resumeTicker() {
    ticker.style.animationPlayState = "running";
}
</script>