Cara Membuat Widget Recent Posts Bergerak di Blog

Oke para sobat Blogger. Tengah hari bolong begini enaknya minum es jeruk tambah bikin posting lagi kali ya, haha. Kali ini saya akan berbagi tentang Cara Membuat Widget Recent Posts Bergerak di Blog. Mungkin memang widget recent posts ini telah disediakan Blogspot yang dapat sobat pasang dengan mudah. Namun ada kelebihan dengan widget Recent Posts yang satu ini yang membuat para Blogger lebih memilih widget ini daripada dengan yang telah disediakan Blogspot.

Widget ini akan menampilkan posting-posting terbaru dari Blog sobat dengan jumlah tampilan yang telah disesuaikan. Kelihatan tambah bagus lagi karena widget ini bergerak dropdown ke bawah. Dan posting yang ditampilkan paling bawah akan kembali lagi ke paling atas. Begitu juga seterusnya.

OK, langsung saja berikut cara-caranya:

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Tata letak.
3. Klik Tambahkan Gadget di posisi yang sobat inginkan.
4. Pilih mode HTML/Javascript.
5. Masukan kode berikut ini.

<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/AVvXsEhVT8em5vSt3OwdXzRkMr4iuik5V9emcdtiLApFY0-kU3-BH1O7lgJ9RwDW7pLkVcZ2f2w4w8VF3OxFDAGhCKIVECELUr-kmWM4imd5UTYGHi0rx1nPpEhqoGyanMBHr714E1BKX1rw-8HH/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>

Terdapat banyak kode ukuran dan kode warna yang dapat sobat ubah. Namun widget ini sudah saya sesuaikan dengan ukuran dan warna yang ideal.
Jadi lebih baik jangan diubah, karena takut nantinya jadi berantakan.

Share on Facebook

Share on Twitter

Share on Google+