How to add I am feeling Lucky button to Blogger-Random Post

Adding Google's "I am feeling Lucky" button feature of choosing a random post on Visitors Demand in Blogger to increase reader Engagement and Pageviews

• Adding Lucky HTML
• Adding Pot of Luck
• Beautifying with CSS
• Give me the Whole Widget Code

Google Inspired I am Feeling Lucky button for Blogger

If you ever visited the Google search Engine which surely you have then you must have noticed the shiny "I am feeling Lucky" button besides the search button which takes users to a random search result on clicked by the visitor which is a cool feature considering a confused user or to just playing around with Google but this button can be a boon to bloggers if availed to their readers wherein the visitor will be taken to a random post surprising a user who will experiment to find more interesting articles on your blogspot blog by clicking the button again and again thereby increasing user engagement and page views including decrease in bounce rate as now visitor can have fun finding random posts on demand especially those with interesting content and an awesome designed website not only that the "I am feeling Lucky" feature increases click through rates on your site as even an uninterested users will be keen to experiment the feature decreasing your blogs bounce rate.You can see a demo of the feature in the left side sidebar named under I am feeling lucky!. Let's get started with adding the Google inspired cool "I am feeling lucky" button feature to your own blogger blogspot site.

Instructions to Follow:

1. Adding the Lucky HTML:

   Begin by going to your blogger layout section and click on "Add a Gadget" to open the gadget gallery from there choose the HTML/Javascript widget. In the HTML/javascript widget keep the title section empty and add the below code under the content section of the widget.

   <div id="genius-howto"></div>

   The Above code will render the "I am Feeling Lucky" placeholder button feature to your blog. You can add it anywhere in the sidebar(preferred) or footer where it's most likely visible to the reader and clicked.

2. Adding the Random Post Functionality

   Now to add in the random functionality to the above html add the below code just above the </body> tag by going to your blogger template → Click Edit HTML → search for </body> tag by using CTRL+F in the template editor and add the below code above it.

   <script>function showLucky(root){ var feed = root.feed; var entries = feed.entry || []; var entry = feed.entry[0]; for (var j = 0; j < entry.link.length; ++j){if (entry.link[j].rel == 'alternate'){window.location = entry.link[j].href;}}} function fetchLuck(luck){ script = document.createElement('script'); script.src = '/feeds/posts/summary?start-index='+luck+'&max-results=1&alt=json-in-script&callback=showLucky'; 
   //copyright by geniushowto.blogspot.com Inc (keep intact) *****************
   script.type = 'text/javascript'; document.getElementsByTagName('head')[0].appendChild(script); } function feelingLucky(root){ var feed = root.feed; var total = parseInt(feed.openSearch$totalResults.$t,10); var luckyNumber = Math.floor(Math.random()*total);luckyNumber++; a = document.createElement('a'); a.href = '#random'; a.rel = luckyNumber; a.onclick = function(){fetchLuck(this.rel);}; a.innerHTML = 'I am Feeling Lucky!';document.getElementById('genius-howto').appendChild(a); }</script>
   <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
   </script>

   In case you wish to change the "I am Feeling Lucky!" (marked above in red) text to something else then change it with your desired slogan in the above script. Be careful not to delete anything else as it will corrupt the script making it nonfunctional.

3. Beautifying with lucky CSS

   If you followed above two steps your "I am feeling lucky!" text with functionality will be visible on your blog and to add in the extra pot of luck let's beautify the button with lucky CSS. To add in the CSS go to your blogger template → Click customize → Navigate to Add CSS section under Advanced menu and add in the below CSS into your add custom css section.

   #genius-howto{position:relative;color:rgba(0,0,0,1);text-decoration:none;font-family:'Times New Roman';font-size:25px;display:block;box-shadow:0px 0px 0 #000000, 0 9px 25px rgba(0,0,0,.6);margin-bottom:10px;margin-top:10px;width:90%;text-align:center;padding:4px;float:center;}
   #genius-howto:hover{box-shadow:0 3px 0 #000000, 0 3px 6px rgba(0,0,0,.9);position:relative;top:5px}#genius-howto a{color: #000; text-decoration:none;}

Now you should be able to see your shiny little "I am feeling Lucky" button on your site or blog. Make sure to click apply after adding in the CSS to your template.Now go ahead and text the feature yourself as it directs you to random posts. Quite fun right? In case you don't want to edit a lot or hate codes then use the below method to grab the whole code paste it as widget and enjoy.

4. Method-2: Adding the whole functionality as a widget (no template editing required)

   Now in case you don't wish to edit your blogs template and simply wish to add it as a gadget then add in the below code to your blogger html/javascript widget. Just go to blogger layout section → Click Add a Widget → Choose HTML/Javascript widget and add the below code as the content and click save.

   <style>#genius-howto{position:relative;color:rgba(0,0,0,1);text-decoration:none;font-family:'Times New Roman';font-size:25px;display:block;box-shadow:0px 0px 0 #000000, 0 9px 25px rgba(0,0,0,.6);margin-bottom:10px;margin-top:10px;width:90%;text-align:center;padding:4px;float:center;}
   #genius-howto:hover{box-shadow:0 3px 0 #000000, 0 3px 6px rgba(0,0,0,.9);position:relative;top:5px}
   #genius-howto a{color: #000; text-decoration:none;}</style>
   <div id="genius-howto"></div>
   <script src="http://geniusknight.weebly.com/files/theme/iamfeelinglucky.js"></script>
   <script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky">
   </script>

   Just copy the above code in your html/javascript widget and give your readers a entertaining way to browse your blog and articles.

The I am feeling lucky button surely gets things moving especially when you have low traffic and wish to make your reader stay longer, it also helps a user get interested in your blog as the button helps gamify your content with multiple exposure to the audience helping them find content they otherwise would have missed if that button wasn't there, surely related posts widget work as well but it works nothing like the lucky button which gets the user interested in browsing for more as the tingly feeling of clicking that button again and again gamifies your user experience. A definitely must have feature on your blog!