Değişik ve şık bir son yazılar eklentisi kodu

 

Blogunuz İçin Modern ve Şık "Son Yazılar" kodu

Yazar: Murat Marti

Tarih: 07.03.2026 18:18:40

40 kelime – tahmini okuma süresi: 1 dakika

Blogunuz İçin Modern ve Şık "Son Yazılar" kodu. Blog sitenizin tasarımını bir üst seviyeye taşımak için standart, sıkıcı liste görünümlerinden kurtulmanın vakti geldi. Okuyucuların dikkatini çekmek ve sitede kalma süresini artırmak için modern ve tamamen duyarlı bir "Son Yazılar" kodu...

Bu yazı 105 kişi tarafından okundu.

<div class="son-yazilar-kutu">
<div class="baslik">✏️ Konular</div>
<ul id="sonYazilar"></ul>
</div>

<style>
.son-yazilar-kutu{
width:300px;
border:1px solid #ddd;
border-radius:8px;
overflow:hidden;
font-family:Arial;
background:#f9f9f9;
}

.baslik{
background:#f28c00;
color:#fff;
padding:10px;
font-weight:bold;
font-size:16px;
}

#sonYazilar{
list-style:none;
margin:0;
padding:0;
max-height:320px;
overflow-y:auto;
}

#sonYazilar li{
border-bottom:1px solid #e5e5e5;
}

#sonYazilar li a{
display:block;
padding:8px 10px;
color:#3a6d00;
text-decoration:none;
font-size:14px;
}

#sonYazilar li a:hover{
background:#f1f1f1;
}
</style>

<script>
function sonYazilar(json){
var html='';
for(var i=0;i<10;i++){
var baslik=json.feed.entry[i].title.$t;
var link;
for(var j=0;j<json.feed.entry[i].link.length;j++){
if(json.feed.entry[i].link[j].rel=='alternate'){
link=json.feed.entry[i].link[j].href;
break;
}
}
html+='<li><a href="'+link+'">▸ '+baslik+'</a></li>';
}
document.getElementById("sonYazilar").innerHTML=html;
}
</script>

<script src="/feeds/posts/default?alt=json-in-script&callback=sonYazilar&max-results=10"></script>

2. Versiyon, Başlık altına bir ,iki satır açıklama eklenmiştir...

<div class="son-yazilar-kutu">
<div class="baslik">✏️ Konular</div>
<ul id="sonYazilar"></ul>
</div>

<style>
.son-yazilar-kutu{
width:300px;
border:1px solid #ddd;
border-radius:8px;
overflow:hidden;
font-family:Arial;
background:#f9f9f9;
}

.baslik{
background:#f28c00;
color:#fff;
padding:10px;
font-weight:bold;
font-size:16px;
}

#sonYazilar{
list-style:none;
margin:0;
padding:0;
max-height:320px;
overflow-y:auto;
}

#sonYazilar li{
border-bottom:1px solid #e5e5e5;
padding:8px 10px;
}

#sonYazilar li a{
display:block;
color:#3a6d00;
text-decoration:none;
font-size:14px;
font-weight:bold;
margin-bottom:4px;
}

.ozet{
font-size:12px;
color:#666;
line-height:1.4;
}

#sonYazilar li:hover{
background:#f1f1f1;
}
</style>

<script>
function sonYazilar(json){
var html='';
for(var i=0;i<10;i++){

var baslik=json.feed.entry[i].title.$t;

var link;
for(var j=0;j<json.feed.entry[i].link.length;j++){
if(json.feed.entry[i].link[j].rel=='alternate'){
link=json.feed.entry[i].link[j].href;
break;
}
}

var icerik="";
if("summary" in json.feed.entry[i]){
icerik=json.feed.entry[i].summary.$t;
}else if("content" in json.feed.entry[i]){
icerik=json.feed.entry[i].content.$t;
}

icerik=icerik.replace(/<[^>]*>/g,"");
icerik=icerik.substring(0,90)+"...";

html+='<li>';
html+='<a href="'+link+'">▸ '+baslik+'</a>';
html+='<div class="ozet">'+icerik+'</div>';
html+='</li>';

}

document.getElementById("sonYazilar").innerHTML=html;
}
</script>

<script src="/feeds/posts/default?alt=json-in-script&callback=sonYazilar&max-results=10"></script>