Blogger Owl Carousel tarzı Slider (Manşet) Widget

Yazı Boyutu Ayarla büyüt (A+) (A-) küçült

Blogger panelinde Düzen > HTML/JavaScript Ekle kısmına aşağıdaki kodun tamamını yapıştır:
blogger,slider,carousel

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">

<style>
/* NewsPro Carousel Stil Uygulaması */
#newspro-slider-container {
    padding: 20px 0;
    background: #111; /* Koyu arka plan */
    margin-bottom: 30px;
}
.owl-item { padding: 0 5px; } /* Kutular arası boşluk */

.np-item {
    position: relative;
    overflow: hidden;
    height: 250px;
    background: #222;
}
.np-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
}
.np-item:hover img {
    transform: scale(1.1);
    opacity: 0.7;
}
.np-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
    z-index: 2;
}
.np-category {
    display: inline-block;
    background: #e74c3c; /* NewsPro Kırmızısı */
    color: #fff;
    font-size: 10px;
    text-transform: uppercase;
    padding: 3px 8px;
    margin-bottom: 8px;
    font-family: 'Oswald', sans-serif;
}
.np-title {
    color: #fff;
    font-family: 'Oswald', sans-serif;
    font-size: 16px;
    line-height: 1.3;
    display: block;
    text-decoration: none;
    font-weight: 700;
}
/* Ok Butonları */
.owl-nav button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(231, 76, 60, 0.8) !important;
    color: white !important;
    width: 30px;
    height: 30px;
    font-size: 20px !important;
}
.owl-prev { left: -15px; }
.owl-next { right: -15px; }
</style>

<div id="newspro-slider-container">
    <div id="newsProCarousel" class="owl-carousel">
        </div>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
$(document).ready(function() {
    // Blogger Feed Çekme
    $.ajax({
        url: '/feeds/posts/default?alt=json&max-results=4',
        type: 'get',
        dataType: 'jsonp',
        success: function(data) {
            var html = '';
            for (var i = 0; i < data.feed.entry.length; i++) {
                var entry = data.feed.entry[i];
                var title = entry.title.$t;
                var link = "";
                for (var k = 0; k < entry.link.length; k++) {
                    if (entry.link[k].rel == 'alternate') {
                        link = entry.link[k].href;
                        break;
                    }
                }
                var category = entry.category ? entry.category[0].term : "Yazı";
                var thumb = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's1600') : 'https://via.placeholder.com/400x250';

                html += '<div class="np-item">' +
                        '<a href="' + link + '">' +
                        '<img src="' + thumb + '" alt="' + title + '">' +
                        '<div class="np-overlay">' +
                        '<span class="np-category">' + category + '</span>' +
                        '<span class="np-title">' + title + '</span>' +
                        '</div>' +
                        '</a>' +
                        '</div>';
            }
            $('#newsProCarousel').html(html);

            // Carousel'i Başlat
            $('#newsProCarousel').owlCarousel({
                loop: true,
                margin: 0,
                nav: true,
                dots: false,
                autoplay: true,
                autoplayTimeout: 4000,
                responsive: {
                    0: { items: 1 },
                    600: { items: 2 },
                    1000: { items: 3 },
                    1200: { items: 4 } // Yan yana 4 tane gösterir
                }
            });
        }
    });
});
</script>


Diğer Başlıklar
Etiket: , ,

0 Yorum:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)