Cara Membuat Recent Post Muncul Seperti Notifikasi Facebook

Contoh Tampilan Recent Post Seperti Notifikasi  Facebook
Tutorial belajar Blogger - Cara Membuat Recent Post Muncul Seperti Notifikasi Facebook Pada Postingan ini Mas Oktri Ingin membahas bagaimana membuat recent post ( postingan terakhir ) muncul seperti notifikasi pada Facebook, tutorial ini terinspirasi dari santa mars yang kebetulan template yang Mas Oktri 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

  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

    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     = "http://3.bp.blogspot.com/-MzMilqmiIbQ/UUPfgxyHP5I/AAAAAAAACRc/w-HMiiF_LuY/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) + '&hellip;';
                } 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

    Untuk demo Recent Post,  anda bisa melihat langsung di blog ini, selamat mengoprek :)) Baca Juga Cara Membuat Recent Post Berjalan di Blog

     

    10   komentar

    pertamax.. akhirnya request saya di posting juga makasih mas oktri
    Reply Delete
    syangnya cara ngebuat kaya gini http://tutorialbelajarblogger-iframe.blogspot.com/2013/03/feed-comment.html ngga di posting
    Reply Delete
    Mas, bisa tidak diterapkan di blog saya dengan header dibawah ^_^ ?
    saya sudah download templatenya, tapi bingung cara mengambil scriptnya dan diletakkan dimana ?
    jika Mas Oktri bersedia membantu saya, bisa dikirim ke email saya asla4m.21@gmail.com . Tapi kalau gak bisa, gak apa-apa, nanti saya berusaha membuatnya ^_^
    Reply Delete
    Bisa ªjª mas bro..
    Mksdnya download template mana Ɣªª ...
    Kebetulan klo template blog ini revolution hasil karya redign santa,
    Reply Delete
    bagus mas ... jadi ada pmberitahuan....
    Reply Delete
    mas mau tanya nih kok waktu mau post yang html jadi ada tulisan begini...??

    "HTML Anda tidak bisa diterima: Tag tidak tertutup: UL Abaikan peringatan"
    mohon bantuannya..
    Reply Delete
    kalo cuma scriptnya ajah yang di posting gak ada template iframe nya ya tetep ajah mas gak bagus tampilan nya ....
    Reply Delete
    om kalo template yg ga ada div id='menu-wrapper3' gmna dong?
    Reply Delete
    cara mencari link ini http://tutorialbelajarblogger-iframe.blogspot.com/2013/03/feed-post.html gimana caranya...
    Reply Delete

    Poskan Komentar

    Cancel Reply