Rabu, 10 Juli 2013
 |
| Contoh Tampilan Recent Comment Seperti Notifikasi Facebook |
Tutorial belajar komputer - Cara Membuat Recent Comment Muncul Seperti Notifikasi Facebook Melanjutkan Pada Postingan sebelumnya Cara Membuat Recent Post Muncul Seperti Notifikasi Facebook , Mas ariq Ingin membahas bagaimana cara membuat recent comment ( Komentar terakhir) muncul seperti notifikasi pada Facebook, Tutorial ini Merupakan Request dari teman blogger agus. Pada tutorial Blog ini tidak beda jauh dengan tutorial sebelumnya yang membedakan hanya menambahkan postingan recent comment saja seperti langkah kedua
Berikut Ini Langkah - Langkah Membuat nya :
LANGKAH PERTAMA
- Masuk Edit Html,
 |
| Contoh Masuk Edit Html |
- Cari Kode Di Bawah Ini
<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 :Kemudian Simpan
Link Yang Berwarna Ganti Dengan Link Recent Post Anda Sendiri,
Note : Apabila SUdah pernah melakukan menerapkan Langkah langkah diatas pada tutorial membuat recent post muncul seperti Notifikasi Facebook tidak perlu lagi melakukan tutorial diatas langsung saja pada Langkah Kedua di bawah ini
LANGKAH KEDUA
Masukan Kode Di Bawah ini Pada Postingan jgn lupa pada Mode Html Jangan Mode compose:<style type="text/css">
#komentar {
font:normal 11px Tahoma,Verdana,Arial,Sans-Serif;
background-color:#222;
margin:0px auto;
color:#999;
width:300px;
text-align:left;
-webkit-box-shadow:inset 0px 0px 2px #000;
-moz-box-shadow:inset 0px 0px 2px #000;
box-shadow:inset 0px 0px 2px #000;
}
#komentar ul {
margin:0px 0px;
padding:0px 0px;
border-top:1px solid #333;
border-bottom:1px solid #444;
}
#komentar ul li {
border-top:1px solid #444;
border-bottom:1px solid #333;
padding:3px 5px;
list-style:none;
}
#komentar ul li:hover{background:#333}
#komentar ul li b a,
#komentar ul li b a:link,
#komentar ul li b a:visited,
#komentar ul li b {
color:rgb(27, 116, 185);
text-shadow:0 1px 1px rgba(0,0,0,0.4);
}
#komentar ul li b a:hover{text-decoration:underline}
#komentar ul li b:before {
content:url(http://1.bp.blogspot.com/-abTiDALn6h0/TpJYHn1AmoI/AAAAAAAAA8I/hRAhFSBZhlY/s1600/feed-icon-green.png);
margin:0px 4px 0px 0px;
display:inline-block;
*display:inline;
vertical-align:middle;
}
</style>
<script type="text/javascript">
var jmlkomentar = 10,
jmlkarakter = 200,
home_page = "http://tutorialbelajarblogger.blogspot.com";
</script>
<script>
function tampilkankomentar(json) {
document.write('<div id="komentar">
<ul>');
var entry, urlkomentar, isikomentar, lihatkomentar;
for (var i = 0; i < jmlkomentar; i++) {
entry = json.feed.entry[i];
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
urlkomentar = entry.link[k].href;
break
}
}
urlkomentar = urlkomentar.replace("#", "#comment-");
if ("content" in entry) {
isikomentar = entry.content.$t
} else if ("summary" in entry) {
isikomentar = entry.summary.$t
} else {
isikomentar = ""
}
var re = /<\S[^>]*>/g;
isikomentar = isikomentar.replace(re, "");
if (isikomentar.length > jmlkarakter) {
isikomentar = isikomentar.substring(0, jmlkarakter) + "...";
}
document.write('
<li>');
document.write('<b><a rel="nofollow" href="' + urlkomentar + '" target="_blank">' + entry.author[0].name.$t + '</a>: </b>');
document.write('<span class="isi">' + isikomentar + '</span>');
document.write('</li>
');
}
document.write('</ul>
</div>
');
}
document.write('<scr' + 'ipt src="' + home_page + '/feeds/comments/default?redirect=false&alt=json-in-script&callback=tampilkankomentar"><\/script>');
</script>
Catatan Ganti Link Berwarna Merah diatas Dengan Link Blog anda
 |
| Masukan Kode Diatas DI psotingan Seperti Pada Gambar |
Untuk demo Recent Post, anda bisa melihat langsung di blog ini, selamat mengoprek :)) Baca Juga Cara Membuat Recent Post Muncul Seperti Notifikasi Facebook
BARU Backlinks
|
URL
|
|
Code For Forum
|
|
HTML Code
|
Posting Komentar