1/28/17

Widget Random Post Untuk Blogspot

Anditoblog-Widget Random Post Untuk Blogspot

Ketika blog Anda sudah memiliki banyak artikel yang di posting, pengunjung blog Anda akan kesulitan mencari sebuah artikel yang telah lama Anda posting. Untuk mengatasi hal itu, memasang sebuah widget random post akan memungkinkan pengunjung untuk menemukan konten di blog Anda lebih mudah, karena widget random post akan menampilkan posting blog Anda yang telah lama, sehingga posting yang sudah lama itu dapat memiliki peluang besar untuk dilihat oleh pengunjung, karena di tampilkan kembali.

Di postingan ini saya akan akan menunjukkan cara menambahkan widget random posts di Blogspot. Jika Anda tertarik untuk memasangnya silahkan ikuti langkah-langkahnya di bawah ini.


Cara Menambahkan Widget Random Posts dengan Gambar di Blogspot


1. Login ke akun blogger Anda, pilih "Layout".
2. Tambahkan sebuah widget baru dengan mengklik "Tambah gadget" akan muncul sebuah jendela pop-up. kemudian pilih "HTML/JavaScript".
3. Setelah menambahkan HTML/JavaScript, copy dan paste script dibawah ini

<style scoped='' type='text/css'>
#random-posts img {
    float: left;
    margin-right: 10px;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    border-radius:50%;
    width: 70px;
    height: 70px;
    background-color: #FFF;
    padding: 3px;
}
ul#random-posts {list-style-type: none;padding:0;}
#random-posts li {
    margin-bottom: 10px;
    border-bottom:1px solid #e9e9e9;
    padding: 4px;
}
.random-summary {
    display: block;
}

</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 60;
var randomposts_details = 'no';
randomposts_details2 = 'no';
var randomposts_comments = 'Comments';
var randomposts_commentsd = 'Comments Disabled';
var randomposts_current = [];
var total_randomposts = 0;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) {    total_randomposts = json.feed.openSearch$totalResults.$t
}
document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=randomposts\"><\/script>');
function getvalue() {
    for (var i = 0; i < randomposts_number; i++) {
        var found = false;
        var rndValue = get_random()
        for (var j = 0; j < randomposts_current.length; j++) {
            if (randomposts_current[j] == rndValue) {
                found = true;
                break
            }
        };
        if (found) {
            i--
        } else {
            randomposts_current[i] = rndValue
        }
    }
};
function get_random() {
    var ranNum = 1 + Math.round(Math.random() * (total_randomposts - 1));
    return ranNum
};
</script>
<script type='text/javaScript'>
function random_posts(json) {
    for (var i = 0; i < randomposts_number; i++) {
        var entry = json.feed.entry[i];
        var randompoststitle = entry.title.$t;
        if ('content' in entry) {
            var randompostsnippet = entry.content.$t
        } else {
            if ('summary' in entry) {
                var randompostsnippet = entry.summary.$t
            } else {
                var randompostsnippet = "";
            }
        };
        randompostsnippet = randompostsnippet.replace(/<[^>]*>/g, "");
        if (randompostsnippet.length < randomposts_chars) {
            var randomposts_snippet = randompostsnippet
        } else {
            randompostsnippet = randompostsnippet.substring(0, randomposts_chars);
            var whitespace = randompostsnippet.lastIndexOf(" ");
            randomposts_snippet = randompostsnippet.substring(0, whitespace) + "&#133;";
        };
        for (var j = 0; j < entry.link.length; j++) {
            if ('thr$total' in entry) {
                var randomposts_commentsnum = entry.thr$total.$t + ' ' + randomposts_comments
            } else {
                randomposts_commentsnum = randomposts_commentsd
            }; if (entry.link[j].rel == 'alternate') {
                var randompostsurl = entry.link[j].href;
                var randomposts_date = entry.published.$t;
                if ('media$thumbnail' in entry) {
                    var randompoststhumb = entry.media$thumbnail.url
                } else {
                    randompoststhumb = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {            document.write('<span>' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</span>'
        }
        if (randomposts_details2 == 'yes') {            document.write('<span class="random-summary">' + randomposts_snippet) + '</span>'
        }
        document.write('<div style="clear:both"></div></li>')
    }
};getvalue();
for (var i = 0; i < randomposts_number; i++) {    document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index=' + randomposts_current[i] + '&max-results=1&callback=random_posts\"><\/script>')
};
</script>
</ul>

Kostumisasi Widget Random Posts

Untuk mengkostumisasi widget random post ini tidak lah sulit Anda cukup mengubah kode CSS-nya saja.

1. Jika gambarnya tidak ingin rounded/bulat silahkan Anda hapus kode CSS berikut.
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;


2. Untuk mengubah ukuran gambar ganti '70 px'
width: 70px;
height: 70px;


3. Untuk mengubah background widget random post ganti '#fff'.
background-color: #FFF;

4. Untuk mengubah warna ganti #e9e9e9 atau menghilangkan garis bawah hapus kode 1px solid #e9e9e9 ganti dengan 'none'
border-bottom:1px solid #e9e9e9;

5. Terakhir jika ingin menampilkan post lebih dari '5' maka silahkan ganti kode '5'
var randomposts_number = 5;

Trakhir jangn lupa klik tombol "Simpan" dan Lihat ke  blog Anda.

Semoga postingan ini bisa bermanfaat.  Happy blogging!

You might also enjoy reading

Subscribe

Daftarkan email Anda untuk mendapatkan Artikel terbaru pilihan dari Andito Blog

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Silahkan berkomentar sesuai dengan topik.