How To Add Random Posts Widget Lite Version For Blogger Mobile Version

Good day Fellow bloggers, how's your day going... I stumbled upon a nice widget that could help us engage our visitors to stay longer reading our  post..... I am here to show us how to implement random post widget to our blogger blogs.

Random posts lite version is a widget for blogger mobile view. It is called lite version because it's code is minified so that it could load faster. Also images are removed from the links for simpler look and to boost the widget's loading speed. So lite version or random post is best widget to multiply mobile page views.

Also this widget is fixed at the bottom of mobile site and floats while scrolling and has a close button for a good user experience. A "show" button is also added to let visitors to open the closed widget and read more posts.

An attribute with "install widget" text is also added to let other bloggers reach this widget when they see this cool widget on your blog's mobile site. So don't remove this text and let other bloggers to get benefit of it. Also don't use this widget without attribute because it may become irregular due to such CSS arrangement.

Now firstly- Go to blogger dashboard > Layout.

2 - Click on "add a gadget" in footer section or in mobile footer section if you have one in your theme's layout.

3 - Choose HTML/Javascript and Copy below code and paste it in the HTML/Javascript window.

<p id="show">↑ Show</p>
<ul id="random-posts">
<a href="https://winnysblog.com/2017/04/random-post-widget-lite-version-for-blogger-mobile-site.html" id="credit">Install Widget!</a>
<p id="hide">✖</p>
<h3>Related links:</h3>
<script>
var randomposts_number = 2;
var randomposts_chars = 0;
var total_randomposts = 100;
var randomposts_current = new Array(randomposts_number);
function randomposts(json) { total_randomposts = json.feed.openSearch$totalResults.$t }
document.write('<script type=\"text/javascript\" src=\"https://101helper.blogspot.com/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 src="https://rawgit.com/101Helper/mobile/master/random-litev1.js"></script>
</ul>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/101Helper/mobile/master/randomlitev1.css"/>


Note :Replacement
var randomposts_number = 2;    //////////// Number of post links

<h3>Related links:</h3>        //////////// Widget title

https://winnysblog.com    //////////// Your blog URL

4. Save the widget and note its ID.


5: Go to theme and click on Edit HTML.

Now search for the widget id you noted in Step 4 and add mobile="only" after locked="false" in the code. 


Finally Save your template and you are done.

Hope it works