Tutorial ini Merupakan Request dari teman yogagj.yang kebetulan menggunakan template yang saya pakai juga.apabila sudah menggunakan template Revolution Berikut Ini Langkah - Langkah Membuat nya :
Langkah Pertama
- Masuk Edit Html,
 |
| Contoh Masuk Edit Html |
<div id='menu-wrapper3'>
<div id='menu3'>
<ul style='list-style: none;'>
<li><a id='timeSMcoy'><script src='http://not-remove-admin-3.googlecode.com/files/Hari4.js'/></a></li>
<li><a id='jamSM'/></li>
</ul>
</div>
</div>
 |
| Kode sebelum Di ganti |
- Kemudian Ganti Dengan Kode Di Bawah Ini :
<div id='menu-wrapper3'>
<div id='menu3'>
<ul style='list-style: none; float:left'>
<li>
<a id='feedOKTRI' onclick='feed_SM("http://tutorialbelajarblogger-iframe.blogspot.com/2013/03/feed-post.html","300","300","feedOKTRI","feedOKTRI-dlm")'/>
<div id='feedOKTRI-dlm'/>
</li>
<li>
<a id='commentOKTRI' onclick='comment_SM("http://tutorialbelajarblogger-iframe.blogspot.com/2013/03/feed-comment.html","320","320","commentOKTRI","commentOKTRI-dlm")'/>
<div id='commentOKTRI-dlm'/>
</li>
</ul>
<ul style='list-style: none;'>
<li>
<a id='timeSMcoy'>
<script src='http://fuck-u-admin.googlecode.com/files/Hari4.js'/>
</a>
</li>
<li>
<a id='jamSM'/>
</li>
</ul>
</div>
</div>
 |
| Kode Setelah Di ganti |
Note :
Link Yang Berwarna Ganti Dengan Link Recent Post Anda Sendiri,
Kemudian Simpan
Langkah Kedua
Masukan Kode Di Bawah ini Pada Postingan jgn lupa pada Mode Html Jangan Mode compose:<style type='text/css'>
#dte_recent-post {
margin:0 0;
padding:0 0;
font:normal 11px Arial,Sans-Serif;
color:#999;
margin:0 auto;
min-height:100px;
width:300px;
text-align:left;
}
#dte_recent-post li {
list-style:none;
margin:0 0;
padding:7px 7px;
background-color:#222;
border-bottom:1px dotted #999;
}
#dte_recent-post li:hover{background:#333}
#dte_recent-post li a img {
float:left;
margin:0 10px 0 0;
padding:0 0;
border:none;
background:transparent;
outline:none;
}
#dte_recent-post li a.title {
display:block;
font-size:12px;
text-decoration:none;
color:rgb(27, 116, 185);
font-weight:bold;
font-size:11px;
}
#dte_recent-post li a.title:hover {
text-decoration:underline;
}
#dte_recent-post li span.foot {
clear:both;
color:#999;
margin-top:7px;
font-size:10px;
}
</style>
<ul id='dte_recent-post'/>
<script type='text/javascript'>
//<![CDATA[
var rp_homePage = "http://tutorialbelajarblogger.blogspot.com", // Your blog homepage
rp_numPosts = 5, // How many posts?
rp_thumbWidth = 42, // Thumbnail width. Change to 0 if you want to disable the post thumbnail
rp_numChars = 0, // Number of posts summary
rp_sortByLabel = false, // Replace false with your specific label name to display posts by specific label
// Example: rp_sortByLabel = "JQuery", to sort posts by label "JQuery"
rp_noImage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHPv-UeASXbCxz8fYSHNFsLhs5vio6tsOcUajLmt72gyMaZZJt4iga5Qh57mXM3tf0gFfhzCI0b-jhc5RvlArx59IfPPLuOCiWEMr_zgvqR4n0vpGMMfFaaTgIjY1tR6th24YaPwtJ8Wk/s42/faceblogSM-nogambar.jpg", // A 'no-image' image
rp_monthNames = [
"Januari",
"Februari",
"Maret",
"April",
"Mei",
"Juni",
"Juli",
"Agustus",
"September",
"Oktober",
"November",
"Desember"
],
rp_newTabLink = true, // If true, then all the widget links will automatically opens in new window/new tab
rp_loadTimer = "onload"; // "onload" || time in milliseconds (e.g: 3000, 4000, ...)
function showRecentPosts(json) {
for (var i = 0; i < rp_numPosts; i++) {
if (i == json.feed.entry.length) break;
var entry = json.feed.entry[i],
postTitle = entry.title.$t,
postAuthor = entry.author[0].name.$t,
postDate = entry.published.$t.substring(0, 10),
postUrl,
linkTarget,
postContent,
postImage,
skeleton = "";
var dy = postDate.substring(0, 4),
dm = postDate.substring(5, 7),
dd = postDate.substring(8, 10);
for (var j = 0; j < entry.link.length; j++) {
if (entry.link[j].rel == 'alternate') {
postUrl = entry.link[j].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
commentNum = entry.link[k].title.split(" ")[0];
commentLabel = entry.link[k].title.split(" ")[1];
break;
}
}
if ("content" in entry) {
postContent = entry.content.$t;
} else if ("summary" in entry) {
postContent = entry.summary.$t;
} else {
postContent = '';
}
if (rp_thumbWidth !== 0 || rp_thumbWidth !== false) {
if ("media$thumbnail" in entry) {
postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + entry.media$thumbnail.url.replace(/\/s[0-9]+\-c/g, "\/s" + rp_thumbWidth + "-c") + '" alt="Loading..." />';
} else {
postImage = '<img style="width:' + rp_thumbWidth + 'px;height:' + rp_thumbWidth + 'px;" src="' + rp_noImage + '" alt="Loading..."/>';
}
} else {
postImage = "";
}
postContent = postContent.replace(/<br ?\/?>/ig, " ");
postContent = postContent.replace(/<(.*?)>/g, "");
if (postContent.length > rp_numChars || rp_numChars !== false) {
if (rp_numChars !== 0) {
postContent = postContent.substring(0, rp_numChars) + '…';
} else {
postContent = '';
}
} else {
postContent = '';
}
linkTarget = (rp_newTabLink) ? ' target="_blank"' : '';
skeleton = '<li>';
skeleton += '<a href="' + postUrl + '"' + linkTarget + '>' + postImage + '</a>';
skeleton += '<a class="title" href="' + postUrl + '"' + linkTarget + '>' + postTitle + '</a>';
skeleton += '<span class="foot"><span class="dt">' + dd + ' ' + rp_monthNames[parseInt(dm, 10) - 1] + ' ' + dy + '</span> <span class="cm">(' + commentNum + ' ' + commentLabel + ')</span></span>';
skeleton += '<br style="clear:both;"/>';
skeleton += '</li>';
document.getElementById('dte_recent-post').innerHTML += skeleton;
}
}
var labelName = (rp_sortByLabel !== false) ? '-/' + rp_sortByLabel : "";
var rp_script = document.createElement('script');
rp_script.src = rp_homePage + '/feeds/posts/summary/' + labelName + '?alt=json-in-script&callback=showRecentPosts';
// Preloading...
if (rp_loadTimer === "onload") {
window.onload = function() {
document.getElementsByTagName('head')[0].appendChild(rp_script);
};
} else {
setTimeout(function() {
document.getElementsByTagName('head')[0].appendChild(rp_script);
}, rp_loadTimer);
}
//]]>
</script>
 |
| Masukan Kode Diatas DI psotingan Seperti Pada Gambar INi |
Kemudian Publikasi
Untuk demo Recent Post, anda bisa melihat langsung di blog ini, selamat mengoprek :)) Baca Juga
Cara Membuat Recent Post Berjalan di Blog
