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

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

        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.


        2 komentar:

         
        Top