Random Post Widget for Blogger


Random Post Widget for Blogger blogs. A simple way to display arbitrary posts from your blog's archives. This widget comes with loads of customizable options which can be easily configured using the Widget Generator found later. This is inspired from Aneesh Joseph's Random Post Gadget using the Blogger API. That gadget failed unexpectedly sometimes due very large iFrame URLs and the browser's incapability to render them. So I tweaked and converted it into a purely json based widget with no chance of that kind of failure occurring

Demo

Note : There is some problem with GoogleCode as of now which might have rendered the widget useless. To solve this problem , Open up the HTML/JavaScript widget and replace the following line
<script style='text/javascript' src='https://stylifyyourblog1.googlecode.com/svn/trunk/random.js'></script>


Change it with
<script style='text/javascript' >
//<![CDATA[
var postTitleOriginal,  myLink, myDiv, myImage;
var    main;

function getPost(json) {
var s;
    var entry = json.feed.entry[0];
    var postTitle = entry.title.$t;
    postTitleOriginal = postTitle;
    if (isNaN(titleLength) || titleLength == 0) {
        postTitle = '';
    }
    else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
    var postUrl;
    for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
            var commentText = entry.link[k].title;
            var commentUrl = entry.link[k].href;
        }
        if (entry.link[k].rel == 'alternate') {
            postUrl = entry.link[k].href;
            break;
        }
    }
    if (showThumbs == true) {
        var thumbUrl = "";
        try {
            thumbUrl = entry.media$thumbnail.url;
            if(imgDim=="80"||imgDim=="85"||imgDim=="90"||imgDim=="95"||imgDim=="100") thumbUrl = thumbUrl.replace("/s72-c/","/s104-c/");
        } catch (error) {
            if ("content" in entry) s = entry.content.$t; else s="";
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                 regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
                videoIds = s.match(regex);
                if (videoIds != null) {
                    videoId = videoIds[4];
                }
                if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
            }
            if (thumbUrl == "" && mediaThumbsOnly == false) {
                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;

            }

        }
        if (thumbUrl == "" && showNoImage == true) thumbUrl = 'http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png';
    } //end ifposthumbs
    if (showPostDate == true) {
        var postdate = entry.published.$t;
        var cdyear = postdate.substring(0, 4);
        var cdmonth = postdate.substring(5, 7);
        var cdday = postdate.substring(8, 10);
        var monthnames = new Array();
        monthnames[1] = "Jan";
        monthnames[2] = "Feb";
        monthnames[3] = "Mar";
        monthnames[4] = "Apr";
        monthnames[5] = "May";
        monthnames[6] = "Jun";
        monthnames[7] = "Jul";
        monthnames[8] = "Aug";
        monthnames[9] = "Sep";
        monthnames[10] = "Oct";
        monthnames[11] = "Nov";
        monthnames[12] = "Dec";
    } //end if date
    code = "";
        main = document.getElementById('stylify_random');
        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "stylify_item_title");
         myDiv.style.clear="both";
    myDiv.style.marginTop="4px";
        myLink = createLink(postUrl,"_top",postTitleOriginal)
       
        if(postTitle != '')myDiv.appendChild(myLink);
        main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;





    if (showThumbs == true && thumbUrl != "") {
        myImage = document.createElement('img');
        myImage.style.border = "3px solid transparent";
        myImage.style.margin = "5px";
myImage.style.boxShadow = "0 0 8px rgba(0, 0, 0, 0.3)";

        myImage.setAttribute("src", thumbUrl);
        myImage.style.cssFloat=imgFloat;
        myImage.style.styleFloat=imgFloat;
        //myImage.setAttribute("alt", postTitleOriginal);
        myImage.setAttribute("width", imgDim);
        //myImage.setAttribute("align", imgFloat);
        myImage.setAttribute("height", imgDim);
        myLink = document.createElement('a');
        myLink.setAttribute("href", postUrl+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random");
        myLink.setAttribute("target", "_top");
        myLink.setAttribute("title", postTitleOriginal);
        myLink.appendChild(myImage);

        myDiv = document.createElement('div');
        myDiv.setAttribute("class", "stylify_item_thumb");
        myDiv.appendChild(myLink);
        main.appendChild(myDiv);
    }




    try {
        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 (showSummary == true) {
            myDiv = createDiv("stylify_item_summary");
           
                if (postContent.length < summaryLength) {myDiv.innerHTML=postContent;}
            else {
                postContent = postContent.substring(0, summaryLength);
                var quoteEnd = postContent.lastIndexOf(" ");
                postContent = postContent.substring(0, quoteEnd);
                myDiv.innerHTML=postContent + '...';
            }

            main.appendChild(myDiv);
        }
    } //end try
    catch (error) {}

    myDiv =  createDiv("stylify_item_meta");
    myDiv.style.clear="both";
    myDiv.style.marginBottom="4px";

    var flag = 0;
    if (showPostDate == true) {
        myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
        flag = 1;
    }

    if (showCommentCount == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        if (commentText == '1 Comments') commentText = '1 Comment';
        if (commentText == '0 Comments') commentText = 'No Comments';
        var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML=commentText;
        flag = 1;;
    }

    if (showReadMore == true) {
        if (flag == 1) {
            myDiv.appendChild(document.createTextNode(" | "));
        }
        var myLink = createLink(postUrl,"_top",postTitleOriginal)
        myDiv.appendChild(myLink);
        myLink.innerHTML = readMore+" &raquo;";
        flag = 1;;
    }



    if (flag == 1 || showSummary || postTitle != "") main.appendChild(myDiv);
    gadgets.window.adjustHeight();

}

function getRandom(json) {
 var feedUrl = '/feeds/posts/default';
    if (mediaThumbsOnly||!showThumbs) feedUrl = feedUrl.replace("posts/default", "posts/summary");
    totalPosts = parseInt(json.feed.openSearch$totalResults.$t);
    var rand = [];
    if (numberOfPosts > totalPosts) numberOfPosts = totalPosts;
    if (numberOfPosts > 15) numberOfPosts = 15;
    while (rand.length < numberOfPosts) {
        var randomNumber = Math.ceil(Math.random() * totalPosts);
        var found = false;
        for (var i = 0; i < rand.length; i++) {
            if (rand[i] == randomNumber) {
                found = true;
                break;
            }
        }
        if (!found) rand[rand.length] = randomNumber;
    }
    var head = document.getElementsByTagName("head")[0] || document.documentElement;

    for (var i = 0; i < rand.length; i++) {

        script = document.createElement("script");
        script.src = feedUrl + "?start-index=" + rand[i] + "&max-results=1&alt=json-in-script&callback=getPost";
        script.charSet = "utf-8";
        head.appendChild(script);
    }

       

}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);

return myDiv;
}


function createLink(href,target,title)
{

var myLink = document.createElement('a');
if(href.substring(href.length-13,href.length)=="#comment-form")
href= href.substring(0,href.length-13)+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random"+"#comment-form";
else if(href.indexOf("?utm_source=")==-1) href=href+"?utm_source=blog&utm_medium=gadget&utm_campaign=stylify_random";
myLink.setAttribute("href", href);
        myLink.setAttribute("target", target);
        myLink.setAttribute("title", title);
       

return myLink;
}

//]]>

</script>


Features
  • Easy to customize
  • Cross-browser Support
  • Configurable number of displayed Posts
  • Enable or Disable Image from post
  • Default Fallback Image for Imageless Posts
  • Control over Summary length
  • Displays Date and Comment link under Summary
  • Changeable Read More Link's Text


  • Widget Generator
    Change the settings as per your needs and click the Add Widget to My Blog button


    Widget Title
    Widget Title:

    Customize Widget
    Blog url
    Number of posts:
    Maximum title Length: char
    Show Thumbnail:
    Show Default Thumbnail:(When no image)
    Thumbnail Dimension: px
    Float Thumbnail to:
    Thumbnail Margin:
    Show summary:
    Summary size: char
    Show post date:
    Show Comment Number:
    Show Read more Link:
    Read More Text:
    Sorting





    Some Tips
  • To make it look even more engaging to your readers, you can label it as "Posts being Viewed Currently" . It will make your readers believe that other people are viewing these posts and will drive more traffic to those posts.


  • After adding the widget you can simply change the settings from the Layout Tab itself or you can create another widget from the above Widget Generator and add it to your blog again. Make sure to delete the previous widget in that case.




  • If you Liked this Widget, Please Share it with fellow Blogger users.

    Please leave your opinions and suggestions so that we can make this widget even better. Feel free to share any problem you face while using it so that we can solve it at the earliest


    Written by Prayag Verma


    A blogger and Web Developer currently in college learning about computers. A CSS Lover , Blogger Template Designer and Music Addict ! Get more from Prayag on and Twitter




    Want to get these Updates straight to your Inbox , Then Subscribe !




    Related Articles


    65 comments:

    1. I am just wondering why someone will need random posts to be displayed rather than related posts. Am I missing something?

      ReplyDelete
      Replies
      1. Hi Sabyasachi

        This kind of widget can be useful if your blog has hundreds of posts. As you can't practically promote all the older post to your readers so this can become a passsive way to direct them to those old posts

        Delete
      2. HI Prayag,

        I'm not able to install this Widget to my blog... Please help

        Delete
    2. Replies
      1. Hi Chrissy

        In the Widget Generator above , choose the options and then Click the Add Widget to My Blog button

        Delete
    3. that is awesome. thanks for sharing
      http://premium-area.blogspot.com

      ReplyDelete
    4. Great Sharing and Cool widget... thanks Prayag Verma...

      ReplyDelete
    5. what the fuckkkkkkk this is the most beautiful widget generator i have ever seen in my fuckin lifeeeeee ..........good job bro

      ReplyDelete
    6. i mean my widget generators are damn cute and small not this big but still your one looks wayyyyyyy better than mine i really appreciate that #Awesome :)

      ReplyDelete
    7. is there any way to add horizantally

      ReplyDelete
    8. Doesn't work on my blog. Ishallneverforgettherussiansalad.blogspot.com

      ReplyDelete
      Replies
      1. I take it back. It's working now. Third time was the charm.

        Delete
    9. Prayag: is there a way to replace the default "No Image" image with one of my choice? Thanks

      ReplyDelete
    10. Was forced to replace the old Aneesh gadget, so thanks a lot for your effort.

      ReplyDelete
    11. My other random blog gadget had errors and I had to replace it. The Random blog post viewer increases my page views significantly. I am very happy to have this back on my blog.

      Thank you so much.

      ReplyDelete
    12. Well..Such an awesome post again..Thanks for the codes..My blogger blog will be available soon using these scripts.

      ReplyDelete
    13. Having the post title display to the right of the image thumbnail rather than on top would make this the holy grail of blogger random posts gadgets. I will wait patiently.

      ReplyDelete
    14. I want to show only thumnails in 2 columns , how can we show random post's thumnails in 2 or 3 columns, ?

      ReplyDelete
    15. Thanks heaps for this.

      Applied It to my site, and It's working flawlessly.
      Simply great.

      ReplyDelete
    16. Is there any way I can restrict this to selecting from posts with a certain label?

      ReplyDelete
    17. hello, pls i need help on how to make my linkwith, popular post to display the newly posted post. that is; for the new post to be display on it. any ideas should pls sent me bcos i need it desperately. thanks

      ReplyDelete
    18. Thanks a lot for sharing this...

      ReplyDelete
    19. How to use this in horizontal way???

      ReplyDelete
    20. Yes. This is an excellent code. Thank you very much. It works instantly and resurrects long-buried posts that no-one would see.

      Nice work. I wll be interested to see if it increases my page views.

      ReplyDelete
    21. wow, it is amazing widget.. thanks Pragay Verma :)

      syakirurahman.blogspot.com

      ReplyDelete
    22. thank Sir Pragay Verma :) your are awesome!

      ReplyDelete
    23. This works a treat! Using It on my site now.

      Thank you.

      ReplyDelete
    24. Does not work good: upright instead of horizontaly even if I implemented suggested changes into the code. Help.

      ReplyDelete
    25. Can you fix this widget does not work any more

      ReplyDelete
    26. No longer works. Tried your update listed above. No luck.

      ReplyDelete
    27. Hello, I worked untill yesterday (29 nov 2012) now it doesnt work any more again.

      ReplyDelete
    28. can this be done with a grid layout ?

      ReplyDelete
    29. Thank's very much! Is it possible to display all the post text without length limit?

      ReplyDelete
    30. Great widget! I totally used it :)

      If you create any future versions, it would be cool if there was an option for horizontal display in addition to the vertical. This would work well for banner shaped widgets... just an idea :)

      Thanks again,

      ReplyDelete
    31. accurate information and good. with the above information we can add random post widget. I love being able to find a new way in our opinion.

      ReplyDelete
    32. Can we integrate this with a Specific Label? For example can we integrate with this code? Because this code displays in a ordered manner, i want it to display random posts.

      http://pastebin.com/z35NJksU

      ReplyDelete
    33. How to give feed url and rand[i] here ?? totally confused ???

      ReplyDelete
    34. thank you very useful information and gadget.

      ReplyDelete
    35. http://b1301.hizliresim.com/15/5/hpb6g.jpg

      ReplyDelete
    36. https://stylifyyourblog1.googlecode.com/svn/trunk/random.js

      ReplyDelete
    37. http://b1301.hizliresim.com/15/5/hpb6g.jpg

      https://stylifyyourblog1.googlecode.com/svn/trunk/random.js

      ReplyDelete
    38. nice post....i will try to make it. don't forget bro, to visit my blog, http://ponda-samarkand.blogspot.com

      ReplyDelete
    39. Hello,
      Can you please help me? The widget works just fine but only Youtube-videos will show in thumbnails. My blog has a LOT of Vimeo-videos and they will not show in thumbnail. Is it possible to add som code to make it possible to view also Vimeo-thumbnails?
      www.kjugebeta.blogspot.com

      ReplyDelete
    40. Awesome widgets! Keep it up..
      Bloggers are expecting this types of widget. Thanks.. :)

      ReplyDelete
    41. hi Prayag Verma,

      I was Just Wondering If it is possible to do few Changes to this widget and make it advance.

      1. Add Another Option to Show Random posts from Different blogs.

      2. And to Show Second or third image from posts to show up in thumbnails.
      (Like add a option "get the Second image from each post or Third Image from each posts)

      I would very much like to Add something like that to by blog if it is doable.

      www.go4pix.info

      ReplyDelete
    42. I can't make it work. Maybe 'cause my blog is private?

      ReplyDelete
    43. Bookmarked You.

      Really Great. Keep it up.

      ReplyDelete
    44. The demo works great but I get an empty widget when adding this to my blog. I typed in sample content because Blogger states it won't accept an empty widget. I was expecting the widget to produce a lot of code automatically but it didn't. Am I missing something?

      ReplyDelete
    45. This awesome widget, and i use to my blogger. thanks

      ReplyDelete