How to Add Random Posts Widgets in Blogger with Thumbnails : Okongeorge.com
Okongeorge | Digital Wealth & Empowerment

Learn and Make Money Online.


Date: - Time:

How to Add Random Posts Widgets in Blogger with Thumbnails





how to add random post widget in blogger with thumbnails
If you blog on blogspot or blogger, and would love to increase your user experience, pageviews, time on site, advertising strategy, traffic and ranking, then you have no option than adding random posts widgets in blogger with thumbnails.  

 
While related posts widget may shows related posts posted in the same category in Wordpress and labels in Blogger, random posts widgets with thumbnails helps you displays posts randomly without relying on a group or related posts only.
 
Creating in-line of related content, products and services can helps your audience achieves certain goals and get their problems solves. This is one big factors for choosing a profitable niche market and running a successful online business, that I believe can be achieve by integrating random post widget with thumbnails; since some of your previous and current posts may include links to your products payment gateways, affiliate referrals links, and services you are rending in your blogging monetization arsenal.
 
Random posts widgets is simple content advertising trick every much succeed blogger needs to deploy in order to get more done on site, increase blog readership and traffic. Integrating this tool is an opportunities for your readers to get to know more of your important old and previous content, products and services unread, that may serves as alternative in-line of content, products and services in the randomly displayed posts per pages. You also enables readers to navigate your content, which also help in reducing bounce back rate, create user experience, time on site, pageviews and traffic, all as major website ranking factors. 
 
Some set of bloggers on the web prefers blogging on 3 column template or theme, believing that it helps them displays their large range of affiliate banners, sponsored posts, popular posts, related post, random post, and host of other features they may want to displays on both sidebars. In spite of this set of blogger, there is a client blogging with 3 column default blogger template and yet, have much nothing to displays on both empty sidebars. If you find yourself in this kind of situation, since random post widget works better in sidebar, integrating this great blogging tool is therefore, an inevitable option for a must succeed blogger on the internet. 
 
In this article, the random posts widgets do not just come with thumbnails, it also entail the posts date, posts snippet, and posts comment count. in addition to the posts thumbnails, you can choose to allow these features or not.

 

Adding Random Posts Widgets in Blogger

 
1. Login to your Blogspot or Blogger dashboard.
 
2. Click on Layout.
 
3. In your blog template layout sidebar element, click Add Gadget.
 
4. In the Blogger Gadgets window, click on Javascript/HTML.
 
5. Now, you need to add below code into the empty pop up window. Also, remember to add title to your random post widget. It cold be random post, you may also like, read more etc. 
 
<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 = 110;
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 = "http://3.bp.blogspot.com/-5SoVe1K6JSk/Utl0OOmucAI/AAAAAAAAF6E/hQghgD_EJdQ/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>


6. Thereafter, click on Save.

Now, you can visit your blog and certainly, you should see the random post widgets displaying your old and new blog post at random. Note, in your blogspot or blogger layout section, you can drag the random post added widgets to exactly where you want it to be displayed on site. I personally did that, but discovered it looks better on sidebar due to it horizontal displays. So, it makes more sense to get it displayed on your blog sidebar.

Random Post Widget Customization Option


1. Post thumbnail size: The thumbnail pixel size maintain same aspect ration. You can it by modifying the 75px size.

2. Post information: To hide the post date, comment count and snippet, you should modify the yes from var randompost_details='yes'; to no.

3. Post title font and size: You can change the posts titles fonts and the snippet by modifying the 12px and 11px respectively.

4. Random post summary length: To control the random posts length summary, you can change the 110 character from var randompost_chars=110

Finally, random post widget with thumbnails can help you increase better result and stays on top your blogging goal. Kindly share and comment if found resourceful.





No comments:

Post a Comment

Protected by Copyscape

DMCA.com Protection Status

Widget