Cara Membuat Artikel Terbaru Di Sidebar Blog

Sebelumnya saya sudah memberitahu Tutorial Bagaimana Cara Membuat Recent Post Headline, Semoga teman mengerti akan penjelasan yang saya berikan. Tutorial kali ini yaitu membuat Artikel Terbaru Di sidebar blog, perbedaan hanya letak kode HTML, kalau tutorial saya ini kita hanya menambahkan gadget pada blog.

Berikut Tutorial Cara Membuat Artikel Terbaru Di Sidebar Blog :

Login ke akun blogger anda.

Silahkan kebagian Tata Letak, pilih Tambah Gadget, Lalu HTML/JavaScript
Masukkan kode berikut tepat dikolom HTML/JavaScript

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5; /* Jumlah Postingan */
var startfeed = 0;
var urlblog = "http://free-download-softwaregratis.blogspot.com/";
var charac = 40;
var urlprevious, urlnext;
function Hezronkolisfeed(ir,banget){
var showfeed = ir.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function showterbaru(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0vnEr2RUOmZuXTAxBGC0Odm9N6Sb05NzgwVK4r-bXFbzzAOx8wTjeN3YP_UWotDgVzbhjMs6FHwrlxrODBnP17Tk_rkXV9L-ed7JfUKs_19ZI-VseWxYUYC6e0x3ErtvI6KAfgJ65moV4/d/noimagethumb.gif";
}
showblogfeed += "<div class='Hezron-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + Hezronkolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("Hezronterbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("Hezron-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("Hezronterbaru").innerHTML = "<div id='Hezron-loading'></div>";
document.getElementById("Hezron-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var Hezronterbaru = document.createElement('script');
Hezronterbaru.setAttribute('type', 'text/javascript');
Hezronterbaru.setAttribute('src', archievefeed);
Hezronterbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(Hezronterbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="Hezronterbaru"></div>
<div id="Hezron-navigasifeed"></div>
<style>
#Hezron-terbaru{border:1px solid #585858;width:100%;margin:0 auto}
#Hezronterbaru{margin:0px}
.Hezron-elemen{background-color:#fff;border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.Hezron-elemen img{background:#eee;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.Hezron-elemen h6,.Hezron-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.Hezron-elemen:hover{background-color:#ecf3fb}
.Hezron-elemen p{text-align:justify;color:#555;line-height:14px;margin:5px 0}
#Hezron-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#ffffff url(http://www.westmarine.com/wcsstore/MadisonsStorefrontAssetStore/images/colors/color1/loading.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#Hezron-navigasifeed{background-color:#fff;border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#Hezron-navigasifeed:hover{background-color:#ecf3fb}
#Hezron-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#Hezron-navigasifeed span{padding:5px 10px}
#Hezron-navigasifeed .next{float:right}
#Hezron-navigasifeed .previous{float:left}
#Hezron-navigasifeed .home{text-align:center}
#Hezron-navigasifeed a:hover,#Hezron-navigasifeed span.noactived{color:transparant!important}
</style>

Sekian Tutorial dari saya , apabila terjadi error silahkan berkomentar !