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

23   komentar

Anonim mengatakan... 15 Juni 2013 pukul 18.40
Gan Kapan'' Back To Top Blog Ini Di Share Yah
Reply Delete
wkwkw ijin eksperimenn bungg :D
Reply Delete
mantep kak :)
jangan lupa visit balik ya :D
http://juragan-sharing.blogspot.com/
Reply Delete
kapan kapan bisa saya coba gan..
Reply Delete
Izin untuk mempelajarinya ya mas.
Reply Delete
keren bro,,bisa di coba nih..
http://fchords.blogspot.com/
Reply Delete
Silahkan gan...yang pntg jgn bt anak coba2,heheh
Reply Delete
Anonim mengatakan... 29 Juni 2013 pukul 05.45
Boleh di coba dulu nih :D , makasih sob udah berkomentar di blog saya ^_^
Reply Delete
selamat mencoba gan.. terima kasih jg menyempatkan diri untuk berkomentar
Reply Delete
nyimak gan,,mantab tutornya
di tggu kunbal'a
Reply Delete
Anonim mengatakan... 23 Juli 2013 pukul 11.47
Okeh ship boleh juga nih gan \m/
Reply Delete
gan bikin blog untuk iframenya gimana??
Reply Delete
ya byasa seperti blog pada umumnya hehehe
Reply Delete
Komentar ini telah dihapus oleh pengarang.
Delete
ane pengen bikin header yang kaya di blog ente gan yang ada wktunya itu,,, bisa gk ??
Reply Delete
oh iy agan oktri, di blog saya tidak ada yang menu3 itu, gimana dunk ???
Reply Delete
bagus mas ... sip sip sip. patut di coba nih :)
Reply Delete
tiada ketemu code html div id='menu-wrapper3
Reply Delete
kak kalau enggak ada kode yang dicari
? harus cari code apa selain itu ?
Reply Delete
ane suka nih gan tampilannya bagus sekali ..
Reply Delete
kok aku gak berhasil2 ? -> http://tutorial-blogger7.blogspot.com/
Reply Delete
Anonim mengatakan... 14 Desember 2013 pukul 22.00
gan cara membuat iframenya gimana ? :/ please jawab, ane ngebikin di blog baru hasilnya malah gk kya punya agan :(
Reply Delete

Posting Komentar

Cancel Reply