Home Blogging Tips How to Add Random Posts Widget into Blogger

How to Add Random Posts Widget into Blogger

0
0
54

Today, in this tutorial, I’ll show you how to add random posts widget into your blogger blogs where you want. Random post widget also commonly known as “Random Posts Gadget”.

In blogger, there are dozens of free blogger gadgets are available which you can use into your blogspot blogs.

This widget can display the random posts added to your blogs that due to the natural structure of blogs, could be lost very soon and deeply into your archives while new posts display first.

You visitors have not a much time to find out some particular blog posts of your blog, so this is the amazing widget that can easily show up your random post to your visitors which are highly ranked and searched in search engines.

There are many other ways to display this widget to your blog, but this is the most easiest method that helps you to show you posts in random style in the sidebar widget.

So if you want to learn how to add this beautiful random posts widget into your own blogger blogs then see the metho

below and learn step by step procedure.

Adding Random Posts Widget into Your Blogger Blog

Step1 – First of all go to www.blogger.com and Sign in to your account.

blogger-homepage

Step2 – Now select your blog and go to the “Layout” option from the left sidebar.

blogger-layout-options

Step3 – In sidebar links, click on the “Add a New Gadget” link.

Step4 – A popup box open where many gadget available, from them find the “HTML/JavaScript” gadget and select it.

html-javascript-blogger-gadget

Step5 – Now a blank box open, simply copy below code and paste all the code in this empty box and click on the “SAVE” button.

<STYLE>#RANDOM-POSTS IMG {    FLOAT: LEFT;    MARGIN-RIGHT: 10PX;    WIDTH: 75PX;    HEIGHT: 75PX;    BACKGROUND-COLOR: #F5F5F5;    PADDING: 3PX;}
UL#RANDOM-POSTS {    LIST-STYLE-TYPE: NONE;}
#RANDOM-POSTS LI {    MARGIN-BOTTOM: 10PX;}
.RANDOM-SUMMARY {    DISPLAY: BLOCK;}</STYLE>
<UL ID=’RANDOM-POSTS’><SCRIPT TYPE=’TEXT/JAVASCRIPT’>VAR RANDOMPOSTS_NUMBER = 5;VAR RANDOMPOSTS_CHARS = 60;VAR RANDOMPOSTS_DETAILS = ‘YES’;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><DIV STYLE=”FONT-SIZE: 10PX; FLOAT: RIGHT;”><A HREF=”HTTPS://WWW.TECHORA.NET/” REL=”NOFOLLOW”>RANDOM POSTS WIDGET</A></DIV>

Step6 – Now save your blog and see the live on the blog sidebar.

Customization of this Blogger Widget:


Now you can also customize this random posts widgets according to your needs and wants. Simply doing some stuffs below:

  • If you want to add more than 5 posts then change the value at parameter “5”.
  • If you want to make thumbnails bigger or smaller change the value at “width = 75” and
    “height = 75”.
  • If you want to add text snippets, simply change parameter “no” to “yes”.
  • RANDOMPOSTS_DETAILS2=’NO‘;

  • If you want to add more snippets characters then change the “60” parameter.
  • If you want to remove date and time and comments below every post then change the parameter from “YES” to “NO”.

Now simply save your widget and check the changes.

I hope this will work fine at your side, but if you face any problem, then doesn’t feel heart, simply comment me below in this post and I will help you as soon as possible.