Blogger için JavaScript kullanarak mükemmel gadget'lar oluşturmak imkânsız değil. Blogger Dersleri sayfamızda da bu yönde dile getirdiğimiz içeriklerimize göz atabilirsiniz. Şimdi ise sizlerle öne çıkan son yazı eklentisini paylaşıyor olacağız. Etiket bazlı olan eklenti, ilgili etiket içerisindeki son yazıyı ekranda göstermektedir. Bunu web sitenizin en üstüne koyarak, farklı bir görünüm elde edebilirsiniz. Dilerseniz CSS kodlarını da kendinize göre değiştirebilirsiniz elbette.

AYRICA: Blogger’da Atıf Yazısını Gizleyelim

Aşağıdaki kodları HTML/JavaScript bölümüne ekleyebilirsiniz.

<div id="hlrpsa">
<script type="text/javascript">
function showrecentposts(t){for(var e=0;e<numposts;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var s=0;s<r.link.length;s++)if("alternate"==r.link[s].rel){n=r.link[s].href;break}i=i.link(n);var a="...",d=r.published.$t,u=d.substring(0,4),o=d.substring(5,7),c=d.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in r)var m=r.content.$t;else if("summary"in r)var m=r.summary.$t;else var m="";var w=/<\S[^>]*>/g;if(m=m.replace(w,""),document.write('<div class="rctitle"><img src="https://4.bp.blogspot.com/-0_gwAAwZEaw/WSQqJGVxQxI/AAAAAAAAO9A/cfXsWF9GsQgbSSrAsDRXkZI8FjAq3y1DwCK4B/s1600/megaphone.png" style="float:left;margin-right:10px;"/>'),standardstyling&&document.write(""),document.write(i),1==showpostdate&&document.write(" - "+l[parseInt(o,10)]+" "+c+" "+u),document.write('</div><div class="rcsumm">'),1==showpostsummary)if(standardstyling&&document.write(""),m.length<numchars)standardstyling&&document.write("<i>"),document.write(m),standardstyling&&document.write("</i>");else{standardstyling&&document.write(""),m=m.substring(0,numchars);var g=m.lastIndexOf(" ");m=m.substring(0,g),document.write(m+a),standardstyling&&document.write("")}document.write("</div>"),standardstyling&&document.write("")}standardstyling||document.write('<div class="bbwidgetfooter">'),standardstyling&&document.write(""),document.write(""),standardstyling||document.write("")}
</script>
<script type="text/javascript">
var numposts = 1;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;
</script>
<script src="https://bloguzun-adi.blogspot.com/feeds/posts/summary/-/Etiket?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<style type="text/css">
.rctitle a{color:#444;font-size:15px;}
.rctitle a:hover{color:#000}
#hlrpsa {
position:relative;
font-size:15px;
color:#444;
padding:0px 0px 15px;
text-align:left;
display:block;
font-weight:normal;
font-family: arial, sans serif;
border-bottom:1px solid #ccc;
}
#hlrpsa:after{
content:"";
position:absolute;
bottom:-1px;
left:0;
width:50%;
height:1px;
background:#C9302C;
}
</style>


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

Örnek Görünüm