Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori di Blog.

WIDGET Recent Posts, Latest Posts, Artikel Terbaru, atau Posting Terbaru merupakan salah satu widget yang 'wajib' dipasang di blog, biasanya di sidebar kanan.

Widget ini berisi daftar goresan pena terbaru, biasanya lima judul, sebagai bab navigasi dan internal link yang dianjurkan Google biar blog ramah pengguna (user friendly) juga ramah mesin pencari seo friendly.

Daftar posting terbaru juga terindeks Google.

Berikut ini dua aba-aba recent post untuk menampilkan goresan pena terbaru, berupa judul saja dan plus gambar thumbnail. Bisa juga per kategori/per label.

Cara Menampilkan Daftar Posting Terbaru

Memunculkan widget Recent Post Judul Doang (Per Label Juga Bisa)

1. Layout > Add a Gadget > HTML/Javascript
2. Isi judul widget dengan Latest Posts atau Posting Terbaru
3. Masukkan aba-aba ini:


<script type="text/javascript">
function recentpostslist(json) {
document.write('<ul>');
for (var i = 0; i < json.feed.entry.length; i++)
{
for (var j = 0; j < json.feed.entry[i].link.length; j++) {
if (json.feed.entry[i].link[j].rel == 'alternate') {
break;
}
}
var entryUrl = "'" + json.feed.entry[i].link[j].href + "'";//bs
var entryTitle = json.feed.entry[i].title.$t;
var item = "<li>" + "<a href="+ entryUrl + '">' + entryTitle + "</a> </li>";
document.write(item);
}
document.write('</ul>');
}
</script>
<script src="/feeds/posts/summary?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Catatan:
1. Angka 5 yakni jumlah posting. Bisa diubah menjadi lebih kecil atau lebih besar. Sebailnya lima saja.
2. Jika ingin menampilkan per label atau kategori tertentu saja, maka tambahkan label menyerupai ini untuk aba-aba script terakhir:

<script src="/feeds/posts/summary/-/NamaLabel?max-results=5&alt=json-in-script&callback=recentpostslist"></script>

Save!


Cara Memunculkan widget Recent Post Judul & Gambar Thumbnail:

1. Layout > Add a Gadget > HTML/Javascript
2. Isi judul widget dengan Latest Posts atau Posting Terbaru
3. Masukkan aba-aba ini:

<script type="text/javascript">
window.recentposts=(function(){var a=function(p){var d=p||{},i=d.url_blog||"",n=d.numberofposts||5,h=d.id_contain||"#rcposts",e=d.imagesize||40,b=d.snippetsize||100,c=d.loadingClass||"rcloading",m=d.commentstext||"Comments",l=d.firstcmtext||"Comment",f=d.NoCmtext||"No Comments",g=d.MonthNames||["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],k=d.pBlank||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbAff1wZXZ3zaXSeVyA7rzlVcwBfa8Kk9_HsBJ8R_wE0hjuX331nnmiLsSE9RMNrFc6OypwifZBYWLF94SaWFmctW4OOSj2W3mLTYfSjF-b7ObKWET2gY-xwcU6KZrz58ExZ-2P_S48jk/s1600/no.png";$(h).addClass(c);var j=i;if(i===""){j=window.location.protocol+"//"+window.location.host}$.ajax({url:j+"/feeds/posts/default?alt=json-in-script&orderby=published&max-results="+n+"",type:"get",dataType:"jsonp",success:function(v){var y,o,w,q,A,D,z,F,x,C,E,s="",B=v.feed.entry;if(B!==undefined){s="<ul class='rcpost'>";for(var u=0;u<B.length;u++){for(var t=0;t<B[u].link.length;t++){if(B[u].link[t].rel=="alternate"){y=B[u].link[t].href;break}}for(var r=0;r<B[u].link.length;r++){if(B[u].link[r].rel=="replies"&&B[u].link[r].type=="text/html"){w=B[u].link[r].title.split(" ")[0];break}}if("content" in B[u]){A=B[u].content.$t}else{if("summary" in B[u]){A=B[u].summary.$t}else{A=""}}if("media$thumbnail" in B[u]){D=B[u].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+e+"-c")}else{D=k}if(w===0){q=' <span class="rccomments">'+f+"</span>"}else{if(w===1){q=' <span class="rccomments">'+w+" "+l+"</span>"}else{q=' <span class="rccomments">'+w+" "+m+"</span>"}}A=A.replace(/<\S[^>]*>/g,"");if(A.length>b){A=A.substring(0,b)+"..."}o=B[u].title.$t;z=B[u].published.$t.substring(0,10),F=z.substring(0,4),x=z.substring(5,7),C=z.substring(8,10),E=g[parseInt(x,10)-1],s+='<li><a class="rcthumbs" href="'+y+'" target="_blank"><img style="width:'+e+"px;height:"+e+'px;display:block" alt="Cara Menampilkan Daftar Posting Terbaru Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori"src="'+D+'"/></a><strong><a href="'+y+'" target="_blank">'+o+'</a></strong><span class="date"><span class="dd">'+C+'</span> <span class="dm">'+E+'</span> <span class="dy">'+F+"</span></span>"+q+"<p>"+A+"</p></li>"}s+="</ul>";$(h).html(s).removeClass(c)}else{$(h).html("<span>No result!</span>").removeClass(c)}},error:function(){$(h).html("<strong>Error Loading Feed!</strong>").removeClass(c)}})};return function(b){a(b)}})();
</script>
<style type="text/css">
ul.rcpost {line-height: 1.2;}
ul.rcpost li{list-style:none;margin:0;overflow:hidden;padding: 0.7em 0px;}
ul.rcpost .rcthumbs{float:left;margin:0 7px 10px 0}
ul.rcpost strong{display:block;line-height:normal;margin-top:-3px}
ul.rcpost p{margin:5px 0 11px;line-height:normal;font-size:11px}
ul.rcpost .date,ul.rcpost .rccomments{font-size:11px;display:none}
ul.rcpost .rccomments{padding-left:5px;border-left:1px solid #969191;display:none}
</style>
<div id="recentposts"></div>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function () {
recentposts({
numberofposts:5, 
id_contain:"#recentposts",
commentstext:"Comments",
imagesize:72,
snippetsize:90
});
});
//]]>
</script>

Catatan:
Untuk menampilkan posting terbaru menurut label/kategori, ubah aba-aba warna merah menjadi /feeds/posts/default/-/NamaLabel?alt

4. Save!

Untuk widget recent posts untuk blogger yang terakhir ini, tampilanya berupa judul, gambar, dan ringkasan. Jika tidak ingin pake ringkasan, ubah saja angka 90 menjadi 0.

Cara Menampilkan Daftar Posting Terbaru (Recent Post) termasuk Per Label - Kategori sudah dites dan berhasil. Buktinya aku dapat bikin screen-shotnya menyerupai gambar ilustrasi di atas. Wasalam. (blogromeltea.blogspot.com).*

Sumber
 

Cara Memasang Recent Posts Blog - Judul Widget Tetap Ada

WIDGET Recent Posts, Latest Post, Tulisan Terbaru, atau Artikel Terbaru biasa dipasang di sidebar blog. Isinya berupa dafta posting terbaru.

Widget ini termasuk widget yang "wajib" dipasang di sidebar blog untuk navigasi internal sekalikus tautan internal yang dianjurkan Google. Pengunjung juga mungkin akan mencari tahu, posting terbaru apa yang ada di blog yang dikunjunginya.

Cara memasangnya sangat mudah, yaitu dengan memakai widget Feeds:

1. Layout > Add a Gadget > Pilih Feed
2. Masukkan alamat Blog Anda di Feed Url
3. Klik Continue
4. Ubah Nama Blog dengan Recent Post atau Posting Terbaru
5. Save!

Pilih Feed

 Masukkan Alamat Blog Anda

 Klik Continue dan Ubah Judul Widget (Title)

Beres!
Recent Posts sudah muncul di Sidebar Blog.

Namun, judul widget Recent Post itu suka menghilang. Itu bug yang belum dibenerin aja ama Blogger. Maka, alternatifnya yaitu Memasang Recent Posts Blog dengan arahan JavaScrip semoga Judul Widget Tetap Ada, tidak menghilang. Ini caranya.

Cara Memasang Recent Posts Blog - Judul Widget Tetap Ada

1. Layout > Add a Gadget > Pilih HTML/JavaScript

2. Isi judul dengan Recent Post, POSTING TERBARU atau RECENT POSTS
3. COPAS arahan berikut ini di kolom kontent:

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>
<script type='text/javascript'>
var numposts = 5; //JUMLAH POSTING
var showpostthumbnails = true; //GAMBAR THUMBNAIL ubah ke false jikalau tidak ingin ditampilkan
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false; //TANGGAL POSTING ubah ke true jikalau mau ditampilkan
var showpostsummary = false; //Ringkasan ubah ke true jika mau ada ringkasan
var numchars = 100;</script> //Jumlah huruf ringkasan

<script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>
<style>
.label_with_thumbs a {text-transform:none;}
</style>

Save! Ini penampakannya sebagaimana dipasang di sidebar blog yang sedang Anda kunjung ini.

Masih banyak arahan lainnya yang dapat digunakan, menyerupai dari MBL berikut ini:

Kode:

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
 <script src="http://mybloggerlab.com/Scripts/json.js"></script>

  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = true;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script> 

Kode Recent Post Judul + Ringkasan, Tanpa Gambar

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
 <script src="http://mybloggerlab.com/Scripts/json.js"></script>
  <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails =  false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = true;
var numchars = 100;</script>
  <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

Kode Recent Post Judulnya saja, TANPA GAMBAR:

<link href="http://mybloggerlab.com/Scripts/recent.css" type="text/css" rel="stylesheet" />
<script src="http://mybloggerlab.com/Scripts/json.js"></script>

 <script type='text/javascript'>
var numposts = 3;
var showpostthumbnails = false;
var displaymore = false;
var displayseparator = true;
var showcommentnum = false;
var showpostdate = false;
var showpostsummary = false;
var numchars = 100;</script>
  <script type="text/javascript" src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=labelthumbs"></script>

Ada juga yang tampilannya unik menyerupai dari HelpLogger berikut ini:

Kodenya:

<div class="recentpoststyle">
<script type="text/javascript">
function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
</script>
<script type="text/javascript">
var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://templetedownload.blogspot.com//search?q=cara-menampilkan-widget-recent-posts" rel="nofollow">Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
</style></div>

Demikian Cara Memasang Recent Posts Blog - Judul Widget Tetap Ada.*

Cara Mengatasi Judul Widget Feed yang Suka Hilang di Sidebar Blog.

Widget Feed yaitu fitur blogger yang menampilkan konten --berupa daftar judul posting-- di sidebar blog dari blog sendiri atau blog lain.

Widget Feed ini dapat menampilkan daftar posting terbaru, juga dapat memunculkan goresan pena terbaru dari kategori tertentu.

Caranya, klik Add a Gadget > Pilih Feed > masukkan alamat blog.

Namun, belakangan widget ini bermasalah. Judul widget feed suka hilang. Kita harus edit ulang untuk memunculkannya. Ini contohnya:

Setelah diedit, gres muncul lagi:

Cukup merepotkan jikalau edit terus-terusan. Tips berikut ini cara mengatasinya. Agar gak ngilang-ngilang alias ada terus.

Cara Mengatasi Judul Widget Feed yang Suka Hilang

Untuk mengatasi judul widget feed yang suka menghilang, ubah aba-aba judul widget di dalam template, yakni aba-aba <data:title/> dengan Judul Widget.

Ini contohnya. Temukan aba-aba widgetnya, contohnya Recent Posts, kemudian ubah aba-aba <data:title/> dengan nama judul widget. Perhatikan yang dihighlight kuning.

 

 Ubah menjadi:

Itu beliau cara Mengatasi Judul Widget Feed yang Suka Hilang di Sidebar Blog.

Cara lainnya dengan tidak memakai widget feed, tapi memakai aba-aba javascript. Namun, aba-aba js tentu saja menambah beban loading blog. Wasalam.*

Featured Post yakni widget Blogger yang menampilkan posting unggulan di halaman depan (homepage).

Featured Post ini semacam headline atau gosip utama di situs berita.

Postingan yang ditampilkan di Featured Post menjadi semacam sajian utama atau konten unggulan yang ditawarkan kepada pengunjung blog.

Widget Featured Post juga disediakan Blogger semenjak Desember 2015. Tim Blogger Google merilisnya dengan judul "Highlight the posts that matter the most".

Untuk memasangnya sangat mudah, yaitu tinggal klik Layout > Add a Gadget > pilih Featured Post.

 

Kita dapat pilih salah satu post untuk ditampilkan atau otomatis menampilkan posting terbaru dengan centang "Use the most recent published post".

 

Kita dapat menampikannya di sidebar atau di halaman depan. Anda juga dapat memasang Featured Post bawaan Blogger yang sudah dimodifikasi.

Cara Memasang Featured Post Artikel Terbaru di Blogger

Selain Featured Post Bawaan Blogger, banyak pula desain featured post lainnya dengan tampilan beraam dan menampilkan lebih dari satu postingan. Salah satunya dengan memasangkan isyarat berikut ini. Penampakannya ibarat ilustrasi gambar di atas.

Featured Post Artikel Terbaru di Blogger ini di-share Help Logger. Di demonya,  Featured Post Image Slider dipasang di sidebar, dengan menampilkan posting terbaru.

Berikut ini cara Cara Memasang Featured Post Image Slider Otomatis di Sidebar Blogger:

1. Layout > Add a Gadget > pilih HTML/JavaScript
2. Judul Isi dengan "Featured Posts" atau Kosongkan
3. Copy & Paste Kode berikut ini:

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:auto}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANMkEHIHg3mVKl5oL1X9MkdRwIU04xPk6uLd74d1U_Hp6hB_JdTUjDJWPl1XHlbRZagv2hTCOui0E6Jl7eFTTFapJtg6KDmNkSWP9rqtjvbUsBvpwI7XsU_pUig1p6SuOWnSniaWuSE4/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://namabloganda.blogspot.com/",
featuredNum:9,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:true,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGWUUis8RqEgIksViifR0Mm_IqWogTLg5yg_Nf1w8_7kD9wV4lpd87IhyQA6bQZCVH7PqbXS1eo4vHoUgiqnuBGdeAROQceWGPDzS9NSEmYBFywOwaujKPSwlNz8dYeTLPYDmmeyAWxY/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

Catatan

• listURL - ganti dengan alamat URL blog Anda
• featuredNum - jumlah posting, dapat diubah
• listbyLabel - jikalau akan menampilkan posting dengan label tertentu, ubah menjadi lissbyLabel:"Nama Label"
• featthumbSize - ukuran atau dimensi gambar dalam pixel
• interval - pergantian gambar dalam detik'
• autoplay - ubah true manjadi false jikalau akan dimatikan autoplaynya
• Kode warna hijau yakni link ke  isyarat jQuery. Jika di template Anda sudah ada isyarat tersebut, hapus saja, jangan disertakan.

4. Save!

Berikut ini isyarat Featured Post Image Slider Otomatis yang sudah sedikit dimodifikasi, untuk dipasang di halaman depan blog.

Bagian yang dimodifikasi yakni tinggi gambar (height) menjadi 300px dan autoplay dimatikan (false).

<style type="text/css">
ul.featured-widget-list,ul.featured-widget-list li{margin:0;padding:0;list-style:none;position:relative }ul.featured-widget-list li{display:none}ul.featured-widget-list li:nth-child(1){display:block;line-height:0}ul.featured-widget-list img{border:0;width:100%;height:300px}ul.featured-widget-list .featuredbg{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;opacity:.6;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhANMkEHIHg3mVKl5oL1X9MkdRwIU04xPk6uLd74d1U_Hp6hB_JdTUjDJWPl1XHlbRZagv2hTCOui0E6Jl7eFTTFapJtg6KDmNkSWP9rqtjvbUsBvpwI7XsU_pUig1p6SuOWnSniaWuSE4/s400/overlay-bg.png);background-position:0% 100%;background-repeat:repeat-x}ul.featured-widget-list .featuredbg:hover{opacity:.1}ul.featured-widget-list h5{position:absolute;left:0;right:0;text-align:center;bottom:10px;z-index:2;color:#fff;margin:0;text-transform: capitalize;padding:10px 20px;line-height:1.9em;letter-spacing:0.3px;font: 600 16px 'Abel', sans-serif;overflow:hidden}ul.featured-widget-list li:hover h5{bottom:30px}ul.featured-widget-list .featured-meta{font: 11px 'Abel', sans-serif;letter-spacing:0.3px;position:absolute;bottom:0;left:0;right:0;text-align:center;z-index:2;color:#fff;opacity:0}ul.featured-widget-list h5, ul.featured-widget-list .featured-meta {-webkit-transition: all 0.3s;-moz-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;}ul.featured-widget-list li:hover .featured-meta{bottom:20px;opacity:1}.feat-buttons{position:absolute;top:50%;left:0;z-index:5;width:100%}
.feat-buttons a{text-indent:-9999px;margin:0 7px;width:15px;height:15px;padding:5px;background:#000;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";filter: alpha(opacity=60);-moz-opacity:0.6;-khtml-opacity:0.6;opacity:0.6;position:relative;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}.feat-prev{float:left;}.feat-next{float:right;}.feat-buttons a.feat-prev::before, .feat-buttons a.feat-next::before{content:"";width:0;height:0;border-width:6px 7px;border-style:solid;border-color:transparent #fff transparent transparent;position:absolute;top:50%;margin-top:-6px;margin-left:-11px;left:50%}
.feat-buttons a.feat-next::before{border-color:transparent transparent transparent #fff;margin-left:-3px}
</style>
<div id="featuredbwidget"></div>
<link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css'/>
<script type='text/javascript'>
//<![CDATA[
featuredbwidget({
listURL:"https://namabloganda.blogspot.com",
featuredNum:5,
listbyLabel:false,
feathumbSize:350,
interval:3000,
autoplay:false,
featuredID:"#featuredbwidget"
});
function featuredbwidget(a){(function(e){var h={listURL:"",featuredNum:3,featuredID:"",feathumbSize:300,interval:5000,autoplay:false,loadingFeatured:"nextfeatured",pBlank:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhzGWUUis8RqEgIksViifR0Mm_IqWogTLg5yg_Nf1w8_7kD9wV4lpd87IhyQA6bQZCVH7PqbXS1eo4vHoUgiqnuBGdeAROQceWGPDzS9NSEmYBFywOwaujKPSwlNz8dYeTLPYDmmeyAWxY/s500/no-image.png",byMonth:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],listbyLabel:false};h=e.extend({},h,a);var g=e(h.featuredID);var d=h.featuredNum*200;g.html('<div class="featslider"><ul class="featured-widget-list"></ul><div class="feat-buttons"><a href="#" class="feat-prev">Prev</a><a href="#" class="feat-next">Next</a></div></div>');var f=function(w){var q,k,m,u,x,p,t,v,r,l="",s=w.feed.entry;for(var o=0;o<s.length;o++){for(var n=0;n<s[o].link.length;n++){if(s[o].link[n].rel=="alternate"){q=s[o].link[n].href;break}}if("media$thumbnail" in s[o]){u=s[o].media$thumbnail.url.replace(/\/s[0-9]+\-c/g,"/s"+h.feathumbSize+"-c")}else{u=h.pBlank.replace(/\/s[0-9]+(\-c|\/)/,"/s"+h.feathumbSize+"$1")}k=s[o].title.$t;r=s[o].published.$t.substring(0,10);m=s[o].author[0].name.$t;x=r.substring(0,4);p=r.substring(5,7);t=r.substring(8,10);v=h.byMonth[parseInt(p,10)-1];l+='<li><a href="'+q+'"><div class="featuredbg"></div><img class="featuredthumb" src="'+u+'"/><h5>'+k+'</h5></a><div class="featured-meta"><span class="fdate"><span class="fday">'+t+'</span> <span class="fmonth">'+v+'</span> <span class="fyear">'+x+'</span></span> - <span class="fauthor">'+m+"</span></div></li>"}e("ul",g).append(l).addClass(h.loadingFeatured)};var c=function(){e(h.featuredID+" .feat-next").click()};var b=function(){e.get((h.listURL===""?window.location.protocol+"//"+window.location.host:h.listURL)+"/feeds/posts/summary"+(h.listbyLabel===false?"":"/-/"+h.listbyLabel)+"?max-results="+h.featuredNum+"&orderby=published&alt=json-in-script",f,"jsonp");setTimeout(function(){e(h.featuredID+" .feat-prev").click(function(){e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));return false});e(h.featuredID+" .feat-next").click(function(){e(h.featuredID+" .featslider li:last").after(e(h.featuredID+" .featslider li:first"));return false});if(h.autoplay){var i=h.interval;var j=setInterval(c,i);e(h.featuredID+" .featslider li:first").before(e(h.featuredID+" .featslider li:last"));e(h.featuredID+" .featslider").hover(function(){clearInterval(j)},function(){j=setInterval(c,i)})}e("ul",g).removeClass(h.loadingFeatured)},d)};e(document).ready(b)})(jQuery)};
//]]>
</script>

DemikianCara Memasang Featured Post Artikel Terbaru di Blogger. (blogromeltea.blogspot.com).*