 |
| Contoh Tampilan Recent Post Seperti Notifikasi Facebook |
Pada Postingan ini
saya
Ingin membahas bagaimana membuat recent post ( postingan terakhir )
muncul seperti notifikasi pada Facebook, tutorial ini terinspirasi dari
santa mars yang kebetulan template yang saya Gunakan Template
Cloning Santa.
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/AVvXsEi6TnYd33kyPPoAAtR7KDYYF-LPRbOYSrmZoSHgu73jUA6jzfku4negWzepYFmeLcTJxXkgijfWO30qjkuBpRElEnbMP114uwVbI8f0sSQGWWAE7LHNOJacRDD9FlD1FtYhFqOkLYW5hyphenhyphen4/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
selamat mencoba...
Cara Membuat Recent Post Muncul Seperti Notifikasi Facebook 
0 komentar:
Posting Komentar