CARA MEMBUAT PUPULAR POST BERGERAK PADA BLOG

Unknown

Senin, 14 Maret 2016

Bagikan :

Tweet

Content Blog yang berbobot dan menarik dengan Loading page yang ringan merupakan factor utama meningkatnya jumlah pengunjung blog kita. Tampilan yang Indah  akan membuat pengunjung cenderung melihat content yang ada di dalam blog tersebut. Misalnya dengan membuat Popular Post bergerak, tampilan label, dan lain sebagainya. 

Pada kesempatan kali ini saya akan memberikan bagaimana cara membuat Popular Post bergerak pada Blog.

Langsung aja Sobat Bisa ikuti stepnya sebagai berikut, ini sangat mudah untuk diterapkan:

1. Login ke account Blog sobat 

2. Pilih Tata letak 

3. Add Gadget dan pilih HTML/Java Script

4. Copas Code HTML dibawah ini

5. Save

<div style="margin-bottom: 15px;">
    <style type="text/css">
    #rp_plus_img{height:370px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
    #rp_plus_img ul{list-style-type:none;margin:0;padding:0}
    #rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
    #rp_plus_img li{height:70px;padding:1px;list-style:none;}
    #rp_plus_img a{color:#3366ff;}
    #rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:12px;}
    #rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:green;text-align:justify;}
    #rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    function rpthumbnt(json) {
    document.write('<ul class="rp_plus_img">');
    for (var i = 0; i < numposts; i++) {
    var entry = json.feed.entry[i];
    var posttitle = entry.title.$t;
    var posturl;
    if (i == json.feed.entry.length) break;
    for (var k = 0; k < entry.link.length; k++) {
    if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break
    }
    }
    var thumburl;
    try {
    thumburl = entry.media$thumbnail.url
    } catch(error) {
    s = entry.content.$t;
    a = s.indexOf("<img");
    b = s.indexOf("src=\"", a);
    c = s.indexOf("\"", b + 5);
    d = s.substr(b + 5, c - b - 5);
    if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
    thumburl = d
    } else thumburl = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZwnC9ToQn-9sZqesxWHJkiv45ipzNC-81lbTnGqfbuqDT05AYv19rWS2hRfsr7qeo0IKZdX6RBdW0MEmFWa343EPNxUEHVbI5KLdboACRy6-MZUbD1LLr6fx_dWgFlIRAx4etEkjgMjU/s1600/no+image.200.jpg'
    }
    document.write('<li class="news-title clearfix">');
    document.write('<a href="'+ posturl + '"><img src="' + thumburl + '"/></a>');
    document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
    if ("content" in entry) {
    var postcontent = entry.content.$t
    } else if ("summary" in entry) {
    var postcontent = entry.summary.$t
    } else var postcontent = "";
    var re = /<\S[^>]*>/g;
    postcontent = postcontent.replace(re, "");
    if (postcontent.length < numchars) {
    document.write('<span class="news-text">');
    document.write(postcontent);
    document.write('</span>')
    } else {
    document.write('<span class="news-text">');
    postcontent = postcontent.substring(0, numchars);
    var quoteEnd = postcontent.lastIndexOf(" ");
    postcontent = postcontent.substring(0, quoteEnd);
    document.write(postcontent + '...');
    document.write('</span>')
    }
    document.write('</li>')
    }
    document.write('</ul>')
    }
    function rpnewsticker() {
    last = $('ul#rp_plus_img li:last').hide().remove();
    $('ul#rp_plus_img').prepend(last);
    $('ul#rp_plus_img li:first').slideDown("slow")
    }
    </script>
    <script type="text/javascript">
    var speed = 400;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
    </script>
    <ul id="rp_plus_img">
    <script style="text/javascript">
    var numposts = 20;
    var numchars = 60;
    </script>
    <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
    </ul>
    </div>

Sekarang Sobat Bisa lihat hasilnya, dan untuk merubar Warna Background, text dll sobat bisa Modify sendiri pada code2 Warna tsb diatas.

Selamat mencoba, dan Succes selalu

Tag : Tutorial