Cara Membuat Widget Recent Posts Bergerak di Blog ~ Pintu Seo Blog ~ bloganda

Cara Membuat Widget Recent Posts Bergerak di Blog | Pintu Seo - Membuat Recent Post / Daftar Post Baru memang sangat penting bagi blog kita , agar pengunjung mengetahui update update terbaru pada blog tersebut tapi bagaimana cara membuatnya ? simka caranya di bawah ini.

Cara Membuat Widget Recent Posts Bergerak di Blog

Masuk Ke Blogger
Tata Letak ==> Add A Widget ==> HTML/Java Script
Kemudian letakkan kode HTML berikut

<style type="text/css">
#recent-post {
    height: 377px;
}
#recent-post li {
    height: 60px;
    padding: 5px;
    list-style: none;
    background-color: #ffffff;
    border: solid 1px #000000;
}
#recent-post .news-title {
    display: block;
    font-weight: bold;
    margin-bottom: 4px;
    font-size: 11px;
    text-align: justify;
    border-radius: 5px;
}
#recent-post img {
    float: left;
    margin-right: 14px;
    padding: 4px;
    border: solid 1px #00000;
    width: 55px;
    height: 55px;
}
</style>
<script type="text/javascript">
var numposts = 5;
var numchars = 150;
var speed = 1500;
var pause = 3500;
$(document).ready(function () {
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
});
 
function terbaru(json) {
    document.write('<ul id="recent-post">');
    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/AVvXsEhEmSXX4YZJLrnZdLA-bMgN8WFkQBtusrl-fB3yvUTc6ZsfcWjmsg7APxIkRce7xkxlXXBYwJWrJJjShzkyve8slsrj6r76fYm0LzA2I_lijtRKRFxs4vCveNX28tHPTRSFUT3swf2AbpAf/d/blogspot.noimagethumb'
        }
        document.write('<li class="news-title clearfix">');
        document.write('<a href="http://tutorial-gif.1p.com/" target="_blank"><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(postcontent);
        } else {
            postcontent = postcontent.substring(0, numchars);
            var quoteEnd = postcontent.lastIndexOf(" ");
            postcontent = postcontent.substring(0, quoteEnd);
            document.write(postcontent + '...');
        }
        document.write('</li>')
    }
    document.write('</ul>')
}
 
function rpnewsticker() {
    last = $('ul#recent-post li:last').hide().remove();
    $('ul#recent-post').prepend(last);
    $('ul#recent-post li:first').slideDown("slow")
}
</script>
<script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>

Save & Simpan

SUMBER : Cara Membuat Widget Recent Posts Bergerak di Blog

Kalian juga bisa mengedit warna & dan ukuran silahkan berkerasi dan semoga berntung.