Beranda » Tutorial Blog » Cara Membuat Recent Comment Seperti Notifikasi Facebook

Cara Membuat Recent Comment Seperti Notifikasi Facebook

Contoh Tampilan Recent Comment Seperti Notifikasi Facebook

Tutorial belajar Blogger - Cara Membuat Recent Comment Muncul Seperti Notifikasi Facebook Melanjutkan Pada Postingan sebelumnya Cara Membuat Recent Post Muncul Seperti Notifikasi Facebook , Mas Oktri 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 :
Link Yang Berwarna Ganti Dengan Link Recent Post Anda Sendiri,

Kemudian Simpan

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

Kemudian Publikasi

Untuk demo Recent Post, anda bisa melihat langsung di blog ini, selamat mengoprek :)) Baca Juga Cara Membuat Recent Post Muncul Seperti Notifikasi Facebook

Belum ada tanggapan untuk "Cara Membuat Recent Comment Seperti Notifikasi Facebook"

Posting Komentar