Cara Menambahkan Widget Random Post Di Blog

Zona Internetku No Comment September 22, 2018

Cara Mudah Untuk Memasang Atau Menambahkan Widget Random Post Di Blogger. Widget Random Post merupakan salah satu widget blogger yang menampilkan sebuah postingan blog secara acak atau tidak menentu. Widget blog ini juga memiliki peranan yang penting dalam blog, selain untuk sebagai menu navigasi blog widget juga bisa membuat backlink satu artikel dengan artikel lainnya secara acak.
Lalu bagaimana untuk cara memamasang widget Random Post? berikut ini adalah tutorialnya

Cara Menambahkan Widget Random Post Yang Simpel Di Blogger Dengan Mudah

1. Masuk ke dalam blog kalian masing masing
2. Selanjutnya kalian masuk ke dalam menu "Tata Letak"
3. Lalu kalian klik "Tambahkan Gadget" di layout sidebar blog kalian dan pilih "HTML/Javascript"
4. Kemudian letakkan salah satu script berikut ini ke dalam widget tadi

Style 1 : Widget Random Post Daftar Judul Saja

<script type="text/javascript">
var randarray = new Array();
var l=0;
var flag;
var numofpost=10;
function randomposts(json){
var total =parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0;i < numofpost;){flag=0;randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){ flag=1;}}
if(flag==0&&l!=0){randarray[i++]=l;}}
document.write('<ul>');
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
for(k=0; k < entry.link.length;k++){
if(entry.link[k].rel=='alternate'){
var item = "<li>" + "<a href=" + entry.link[k].href + ">" + entry.title.$t + "</a> </li>";document.write(item);}}}document.write('</ul>');}
</script>
<script src="http://www.contohblognih.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript"></script>

Ganti angka numofpost untuk mengatur jumlah postingan dalam widget random postingan

Baca juga :
Cara Membuat Featured Post Di Homepage Blog
Tutorial Menambahkan Widget Blog Recent Post By Label
Cara Menambahkan Widget Latest Post Di Blog

Style 2 : Widget Random Post Dengan Thumbnail

<style>
#random-posts img {
    border-radius: 10px;
    float: left;
    margin-right: 5px;
    width: 75px;
    height: 75px;
    background-color: #F5F5F5;
    padding: 3px;
    transition: all 0.2s linear 0s;
}

#random-posts img:hover {
    opacity: 0.6;
}

ul#random-posts {
    list-style-type: none;
    padding: 0px;
}

#random-posts a {
    font-size: 12px;
    text-transform: uppercase;
    padding: 0px auto 5px;
}

#random-posts a:hover {
    text-decoration: none;
}

.random-summary {
    font-size: 11px;
    background: none;
    padding: 5px;
    margin-right: 8px;
}

#random-posts li {
    margin-bottom: 10px;
    border-bottom: 1px solid #EEEEEE;
    padding: 4px;
}
</style>
<ul id='random-posts'>
<script type='text/javaScript'>
var randomposts_number = 5;
var randomposts_chars = 110;
var randomposts_details = 'yes';
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/AVvXsEiYqUSfCctSvSdwGoFsFa_qYQu92XQMDclcgwKYZ9TplibvUFToWfMpwmBRf0_rzV8jlK6Y03IQ2vDPfXt7QJPd9ftpW92EWWSy1Ytd9WimyMjTAXMgcDKNVBCMNJ2CzIGYHXsdRoyUZyI/s1600/no_thumb.png"
                }
            }
        };
        document.write('<li>');
        document.write('<a href="' + randompostsurl + '" rel="nofollow"><img alt="' + randompoststitle + '" src="' + randompoststhumb + '"/></a>');
        document.write('<div><a href="' + randompostsurl + '" rel="nofollow">' + randompoststitle + '</a></div>');
        if (randomposts_details == 'yes') {
            document.write('<span><div  class="random-info">' + randomposts_date.substring(8, 10) + '.' + randomposts_date.substring(5, 7) + '.' + randomposts_date.substring(0, 4) + ' - ' + randomposts_commentsnum) + '</div></span>'
        };
        document.write('<br/><div class="random-summary">' + randomposts_snippet + '</div><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>

Ganti angka yang ada di randomposts_number untuk mengatur jumlah postingan dalam widget random post

5. Lalu kalian simpan widget tersebut dan selamat kini widget random post telah terpasang

Baca juga :
Cara Membuat Widget Author Box Keren Di Blog
3 Cara Memasang Widget Tombol Media Sosial Pada Blog
2 Cara Membuat Widget Subscribe Box Keren Di Blog

Sekian pembahasan tentang Cara Menambahkan Widget Random Post Di Blog yang dapat saya tunjukkan kepada kalian, terima kasih banyak telah berkunjung di blog saya.

Referensi :
21 September 2018 https://helplogger.blogspot.com/2014/02/random-posts-widget-with-thumbnails-and-summary-for-blogger.html
21 September 2018 https://www.contohblog.com/2014/04/cara-membuat-widget-random-posts-di-blogspot.html

Promo Menarik