Blogger Dersleri ile ilgili içeriklerimize bir süredir ara vermiş idik. Bu süreç içerisinde sizler için modern görünümlü, sade tasarıma sahip olan son yazılar eklentisi hazırladım. İlgili eklenti oldukça hızlı çalışmakta olup, son yazılarınızı sidebar'ınızda listeleyebileceksiniz. Yapmanız gereken ise aslında hiçbir şey yok. Yalnızca kırmızı alanı kendi blogunuzun adı ile değiştirmeniz yeterli olacaktır. Aşağıdaki kodları ise dilediğiniz bölüme eklemeniz yeterli olacaktır. Hepsi bu kadar...

AYRICA: Blogger’da İlk Paragraftan Sonra Reklam Eklemek

Blogger için Modern Görünümlü Son Yazılar Eklentisi

<style>
.recent-posts-container {
font-family: 'Oswald', sans-serif;
font-size: 12px;
list-style-type: none;
display: inline-block;
width:260px;
}
ul.recent-posts-container:after {
content: '';
display: block;
clear: both;
}
ul.recent-posts-container li {
list-style-type: none;
font-size: 12px;
position: relative;
margin-top:3px;
}
ul.recent-posts-container {
counter-reset: countposts;
list-style-type: none;
padding: 0;
}
ul.recent-posts-container li:before {
content: counter(countposts, decimal);
counter-increment: countposts;
z-index: 1;
position:absolute;
left: 0px;
top: 0px;
font-size: 25px;
font-weight: normal;
color: #444;
background: #D9EDF7;
line-height: 72px;
height: 72px;
width: 180px;
text-align: center;
margin-top:3px;
}
.recent-posts-container a.image-holder {
width: 72px;
height: 72px;
float:right;
display: inline-block;
}
.recent-posts-container a {
text-decoration: none;
}
.recent-post-title {
margin-bottom: 5px;
}
.recent-post-title a {
font-size: 12px;
text-transform: uppercase;
color: #2aace3;
}
.recent-posts-details {
font-size: 15px;
padding: 10px;
text-align:center;
border-top:0px solid #ddd;
background: #f1f1f1;
line-height:1.7em;
margin-top:80px;
width:240px;
}
.recent-posts-details a {
color: #777;
}
</style>
<script type="text/javascript">
function showlatestpostswiththumbs(posts) {
document.write('<ul class="recent-posts-container">');
for (var e = 0; e < posts_no; e++) {
var r, post = posts.feed.entry[e],
i = post.title.$t;
if (e == posts.feed.entry.length)
break;
for (var o = 0; o < post.link.length; o++) {
if ("replies" == post.link[o].rel && "text/html" == post.link[o].type) var l = post.link[o].title,
m = post.link[o].href;
if ("alternate" == post.link[o].rel) {
r = post.link[o].href;
break
}
}
var postTitle = post.title.$t;
var url;
try {
url = post.media$thumbnail.url
} catch (h) {
s = post.content.$t, a = s.indexOf("<img"), b = s.indexOf('src="', a), c = s.indexOf('"', b + 5), d = s.substr(b + 5, c - b - 5), url = -1 != a && -1 != b && -1 != c && "" != d ? d : "https://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png"
}
var p = post.published.$t,
f = p.substring(0, 4),
g = p.substring(5, 7),
v = p.substring(8, 10),
w = new Array;
url = url.replace("s72", "s72");
if (w[1] = "Ocak", w[2] = "Şubat", w[3] = "Mart", w[4] = "Nisan", w[5] = "Mayıs", w[6] = "Haziran", w[7] = "Temmuz", w[8] = "Ağustos", w[9] = "Eylül", w[10] = "Ekim", w[11] = "Kasım", w[12] = "Aralık", document.write('<li class="recent-posts-list">'), 1 == showpoststhumbs && document.write('<a href="' + r + '" title="' + postTitle + '" style="background:url(' + url + ') 0 center no-repeat;background-size:cover;" class="image-holder"></a>'), "content" in post) var A = post.content.$t;
else if ("summary" in post) var A = post.summary.$t;
else var A = "";
var k = /<\S[^>]*>/g;
var _ = "",
$ = 0;
document.write('<div class="recent-posts-details">'), 1 == posts_date && (_ = _ + w[parseInt(g, 10)] + " " + v + " " + f, $ = 1), 1 == readmorelink && (1 == $ && (_ += "<br/>"), _ = _ + '<a href="' + r + '" class="url" target ="_top">Devamını Oku...</a>', $ = 1), 1 == showcommentslink && (1 == $ && (_ += " - "), "1 Comments" == l && (l = "1 Comment"), "0 Comments" == l && (l = "No Comments"), l = '<a href="' + m + '" target= "_top" > ' + l + "</a>", _ += l, $ = 1), document.write(_), document.write("</div>"), document.write("</li>")
}
document.write("</ul>")
}
</script>
<script type="text/javascript">
var posts_no = 3;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = false;
var post_summary = true;
var summary_chars = 40;
</script>
<script src="https://[blogunuzunadi].blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>


Not: Kırmızı alanı kendinize göre değiştirmeyi unutmayınız.

Örnek Görünüm