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

1. 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(&quot;http://tutorialbelajarblogger-iframe.blogspot.com/2013/03/feed-post.html&quot;,&quot;300&quot;,&quot;300&quot;,&quot;feedOKTRI&quot;,&quot;feedOKTRI-dlm&quot;)'/>
            <div id='feedOKTRI-dlm'/>
          </li>
          <li>
            <a id='commentOKTRI' onclick='comment_SM(&quot;http://tutorialbelajarblogger-iframe.blogspot.com/2013/03/feed-comment.html&quot;,&quot;320&quot;,&quot;320&quot;,&quot;commentOKTRI&quot;,&quot;commentOKTRI-dlm&quot;)'/>
            <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

Advertisment

** Share nya Jangan Lupa Ya.. Salam,salam **

Judul Artikel: Cara Membuat Recent Comment Seperti Notifikasi Facebook

Unknown

Saya hanya blogger biasa yang suka kutak-katik blogger, senang belajar dan berbagi pengetahuan dan pengalaman dengan yang lain. Blog ini hasil dari source mas Septi Rosidi, semoga dapat bermanfaat untuk semua. Silahkan masukan email Anda pada kotak di bawah ini untuk mendapatkan update artikel dari semujursite.

• Rss
• Twitter
• FaceBook
• Follow This Blog