Blogger Dörtlü Owl Carousel tarzı Slider (Manşet) Widget
Blogger panelinde Düzen > HTML/JavaScript Ekle kısmına aşağıdaki kodun tamamını yapıştır:
<link href='https://fonts.googleapis.com/css?family=Oswald:400,700|Roboto:400,700' rel='stylesheet' type='text/css'/>
<style>
/* Ana Konteynır - 1 Büyük + 3 Küçük Düzeni */
#np-grid-wrapper {
display: grid;
grid-template-columns: 2fr 1fr; /* Sol taraf 2 kat daha geniş */
grid-template-rows: repeat(3, 130px); /* Sağdaki 3 kutunun yüksekliği */
gap: 4px;
margin: 20px 0;
width: 100%;
height: 400px; /* Toplam yükseklik */
box-sizing: border-box;
}
/* İlk Yazı (Büyük Olan) */
.np-grid-item:first-child {
grid-column: 1 / 2;
grid-row: 1 / 4; /* 3 satır boyunca uzanır */
}
/* Ortak Kutu Stilleri */
.np-grid-item {
position: relative;
overflow: hidden;
background: #222;
}
.np-grid-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: all 0.5s ease;
}
.np-grid-item:hover img {
transform: scale(1.08);
}
/* Yazı Bilgileri Overlay */
.np-grid-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 15px;
background: linear-gradient(transparent, rgba(0,0,0,0.85));
z-index: 2;
pointer-events: none;
}
/* Kategori Etiketi */
.np-grid-cat {
background: #e74c3c;
color: #fff;
font-size: 10px;
font-family: 'Oswald', sans-serif;
padding: 2px 6px;
text-transform: uppercase;
display: inline-block;
margin-bottom: 5px;
}
/* Başlık Stili */
.np-grid-title {
color: #fff;
font-family: 'Oswald', sans-serif;
font-weight: 700;
text-transform: uppercase;
text-decoration: none;
display: block;
}
/* Büyük Kutu Fontu */
.np-grid-item:first-child .np-grid-title { font-size: 22px; }
/* Küçük Kutu Fontu */
.np-grid-item:not(:first-child) .np-grid-title { font-size: 14px; line-height: 1.2; }
/* Mobil Uyumluluk */
@media (max-width: 768px) {
#np-grid-wrapper {
display: block; /* Mobilde alt alta dizer */
height: auto;
}
.np-grid-item { height: 250px; margin-bottom: 4px; }
}
</style>
<div id="np-grid-wrapper">
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: '/feeds/posts/default?alt=json&max-results=4',
type: 'get',
dataType: 'jsonp',
success: function(json) {
var html = '';
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var title = entry.title.$t;
var link = entry.link.find(l => l.rel === 'alternate').href;
var thumb = entry.media$thumbnail ? entry.media$thumbnail.url.replace('s72-c', 's1600') : 'https://via.placeholder.com/600x400';
var cat = entry.category ? entry.category[0].term : "Haber";
html += '<div class="np-grid-item">' +
'<a href="' + link + '">' +
'<img src="' + thumb + '" alt="' + title + '"/>' +
'<div class="np-grid-info">' +
'<span class="np-grid-cat">' + cat + '</span>' +
'<span class="np-grid-title">' + title + '</span>' +
'</div>' +
'</a>' +
'</div>';
}
$('#np-grid-wrapper').html(html);
}
});
});
</script>
0 Yorum:
Yorum Gönder