Bu zamana kadar blogger eklentileri olarak birçok ders içeriği paylaştık. Şimdi ise düzenlemesini 4 günde tamamladığım, gerçekten çok beğendiğim bir eklentiyi sizlerle paylaşmak istiyorum. Etiket bazlı çalışan eklenti sayesinde, öne çıkan yayınlar alanı oluşturabileceksiniz. Böylelikle web sitenizde ilgi çekici, ziyaretçileriniz için farklı bir eklentiye sahip olacaksınız. Aşağıdaki adımları izlemeniz ise, eklentiyi kurmanız için yeterli olacaktır. Faydalı olmasını temenni ediyorum.

AYRICA: Blogger için Sayfa ile Kayan Menü Yapımı

HTML/JavaScript Ekle alanına aşağıdaki kodları ekleyin.

<style>
.recent-posts-container {
font-family: 'Oswald', sans-serif;
font-size: 12px;
list-style-type: none;
display: inline-block;
width:950px;
}
ul.recent-posts-container:after {
content: '';
display: block;
clear: both;
}
ul.recent-posts-container li {
list-style-type: none;
font-size: 12px;
float: left;
position: relative;
margin-right: 15px;
}
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: 20px;
font-weight: normal;
color: #fff;
background: #374760;
line-height: 72px;
height: 72px;
width: 72px;
text-align: center;
border-top:3px solid #fff;
}
.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: 12px;
padding: 10px;
text-align:center;
border-top:1px solid #ccc;
background: #eee;
line-height:1.7em;
margin-top:80px;
width:155px;
}
.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ı...</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 = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;
</script>
<script src="https://[blogunuzunadi].blogspot.com/feeds/posts/summary/-/Etiket?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>


Not: Kırmızı alanları kendinize göre değiştirebilirsiniz.

Bilgi: Yazı sayısını artırmak için "posts_no" parametresini artırabilirsiniz.

Örnek Görünüm