6/11/17

Cara Pasang Widget Random Post Dengan Gambar


Cara Pasang Widget Random Post Dengan Gambar

Halo Good People, akan tiba masanya blog anda mempunyai banyak artikel yang diposting, pengunjung blog ada akan kewalahan mencari sebuah artikel dimasa lalu. Maka dari itu anda diwajibkan memasang widget random post ini,

Cara kerja Random Post ini adalah mengacak postingan tiap reload halaman atau halaman baru di blog anda. Jadi jangan khawatir postingan lama anda tidak muncul. Untuk contohnya lihat aja sidebar pada blog saya ini di Tab Randm.

Simak Cara Pasang Widget Random Post Dengan Gambar:
  • Login dulu ke Blogger Tercinta
  • Pilih Tata Letak
  • Klik Tambah Widget
  • Pilih HTML Javascript
  • Copy Paste kode dibawah ini ke dalam Konten

<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 = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_XmNvSx42fypXdSKklmReHYmxNmomzYQ69UXWH6Ag8XIGKMdKHVrXv7XlkiEzQ6scgsiD7uwDyKflFpsOZKwDPsx7nxMYIMIai-6dlONKwWqMPQgGTBD-n2KBDKdRAVQ8T132DFKhVMA/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>
  • Simpan dan lihatlah.

EDIT WIDGET RANDOM POST


Untuk mengedit widget Random Post sesuai selera anda, anda tinggal mengubah kode CSS saja.

1. Apabila gambarnya tidak bulat silahkan anda hapus kode CSS berikut.
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;  

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

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

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

5. Untuk atur jumlah post yang akan tampil, hapus kode nomor 5
var randomposts_number = 5; 

Simpan dan lihatlah perubahannya.


Demikian artikel  Cara Pasang Widget Random Post Dengan Gambar ini, semoga berguna bagi anda. Jangan lupa dishare ke orang tua biar tahu.




"Kehidupan terus berkembang. Jika kita berhenti berkembang, secara fisik dan mental, kita sama saja dengan orang mati"
 - Morihei Ueshiba