Menu

Lovely Cute
  • More Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Dream Fun Product

    Drop Menu

    • Reports
    • Search
    • Graphs
    • Settings
  • Home
  • About
  • Contact
  • Sitemap
  • Others
    • Gambar Lucu
    • Infografis
    • Inspirasi
    • Motivasi
    • Photoshop
    • Teka-teki
    • Tips
    • Ucapan

Quicker BD

  • Menu
  • Home
  • Blogger
    • SEO
      • SEO 1
      • SEO 2
    • CSS
      • CSS 1
      • CSS 2
      • CSS 3
      • CSS 4
      • CSS 5
    • Jquery
      • Jquery 1
      • Jquery 2
  • Music
    • Product 1
      • Sub Item
      • Sub Item
    • Product 2
      • Sub Item
      • Sub Item
  • Flat UI
  • Features
Home » Blogger CSS » Blogger jQuery » Blogger Tutorial » Blogger Widget » How-to » Random Posts Displaying Button for Blogger

Random Posts Displaying Button for Blogger

In the previous we show how you can put a random posts widget to blogger which really helps to down the bounce rate of any blog as it displays different posts with its title every time when user refresh the page. and now today in this tutorial we will see how to add a random posts displaying button to blogger. Random posts displaying button you can set anywhere inside your blog but it should be displayed into the all posts and pages of your blog. Best place to add this button in your blog is header area, sidebar or footer.

What is use of this button ? use of this button is to show random posts within your blog. When a user click on this button, randomly a post will be opened from older posts or new one. it will show random posts every time user clicks on it.

Also see : Add Random Posts In Blogger to Increase the Page-Views

How to Add Random Posts Displaying Button to Blogger?

Go to blogger dashboard > Layout > Add a Gadget
Choose HTML/Javascript from the list.
Copy and paste below code just into it.

<style type="text/css">@import  url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:700);#myLuckyPost  a{-moz-border-radius:8px;-moz-box-shadow:0 9px 0 #2f6ae0, 0 9px 10px  rgba(0,0,0,.7);-moz-transition:all .1s ease;-ms-transition:all .1s  ease;-o-transition:all .1s  ease;-webkit-border-radius:8px;-webkit-box-shadow:0 9px 0 #2f6ae0, 0 9px  10px rgba(0,0,0,.7);-webkit-transition:all .1s  ease;background-color:#497ce5;border-radius:8px;box-shadow:0 9px 0  #2f6ae0, 0 9px 10px  rgba(0,0,0,.7);color:rgba(255,255,255,1);display:block;font-family:'Yanone  Kaffeesatz';font-size:25px;font-weight:700;height:40px;margin:10px  auto;padding:10px 2px  2px;position:relative;text-align:center;text-decoration:none;transition:all  .1s ease;width:200px}#myLuckyPost a:active{-moz-box-shadow:0 3px 0  #2f6ae0, 0 3px 6px rgba(0,0,0,.9);-webkit-box-shadow:0 3px 0 #2f6ae0, 0  3px 6px rgba(0,0,0,.9);box-shadow:0 3px 0 #2f6ae0, 0 3px 6px  rgba(0,0,0,.9);font-size:25px;position:relative;top:6px}</style><div  id="myLuckyPost"></div><script  type="text/javascript">function showLucky(e){var t=e.feed;var  n=t.entry||[];var r=t.entry[0];for(var  i=0;i<r.link.length;++i){if(r.link[i].rel=="alternate"){window.location=r.link[i].href}}}function   fetchLuck(e){script=document.createElement("script");script.src="/feeds/posts/summary?start-index="+e+"&max-results=1&alt=json-in-script&callback=showLucky";script.type="text/javascript";document.getElementsByTagName("head")[0].appendChild(script)}function  feelingLucky(e){var t=e.feed;var  n=parseInt(t.openSearch$totalResults.$t,10);var  r=Math.floor(Math.random()*n);r++;a=document.createElement("a");a.href="#random";a.rel=r;a.onclick=function(){fetchLuck(this.rel)};a.innerHTML="View Random Post";document.getElementById("myLuckyPost").appendChild(a)}</script><script   src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>

Now, Save your widget and its done. Refresh your blog and you should see a random button installed in your sidebar. :)

You can change text "View Random Posts" with anything you want. Just replace blue colored text in above code.
Add Comment
Blogger CSS Blogger jQuery Blogger Tutorial Blogger Widget How-to

Share

Like

G+

Tweet

Tweet
Related Posts

Show Conversion CodesHide Conversion Codes
Show EmoticonHide Emoticon
Newer Older Home
Powered by Blogger.

Weekly Posts

  • How to Add A Transparent Notification Bar To Blogger
    How to Add A Transparent Notification Bar To Blogger
  • Xmas "Flying Santa Claus" Widget for Blogger
    Xmas "Flying Santa Claus" Widget for Blogger
  • Supreme V2 ( Version 2) Responsive Blogger Template Download for free
    Supreme V2 ( Version 2) Responsive Blogger Template Download for free
  • How to Add Animated Flying Android Man Widget to Blogger
    How to Add Animated Flying Android Man Widget to Blogger
  • Create a Free Blog with Blogspot.com
    Create a Free Blog with Blogspot.com
  • How to Embed YouTube Videos In Blogger Posts
    How to Embed YouTube Videos In Blogger Posts
  • Use A Drop Cap Large First Letter In Posts On Blogger
    Use A Drop Cap Large First Letter In Posts On Blogger
  • Download Best and SEO Friendly Blogger Templates for your Blog
    Download Best and SEO Friendly Blogger Templates for your Blog
  • Flash SWF file Embed Code Generator
    Flash SWF file Embed Code Generator
  • Simple Recent Posts Widget for Blogger / Blogspot
    Simple Recent Posts Widget for Blogger / Blogspot

Blog Archive

  • ►  2017 (2)
    • ►  October (1)
    • ►  May (1)
  • ►  2016 (5)
    • ►  October (1)
    • ►  September (1)
    • ►  March (1)
    • ►  February (2)
  • ►  2015 (28)
    • ►  November (1)
    • ►  September (7)
    • ►  August (2)
    • ►  July (1)
    • ►  June (1)
    • ►  April (3)
    • ►  March (3)
    • ►  February (5)
    • ►  January (5)
  • ▼  2014 (105)
    • ►  December (4)
    • ►  November (6)
    • ►  October (1)
    • ▼  September (8)
      • Marvel Blogger Template with Grid Layout Download ...
      • Stylish Email Subscription Box Widget for Blogger
      • SEO Optimized Free Blogger Templates 2014 (Respons...
      • Add an Instagram Widget In Blogger
      • Upload and Use Custom Fonts in Blogger
      • How to Add Multi-Colored Popular Posts to Blogger
      • Random Posts Displaying Button for Blogger
      • Add Random Posts In Blogger to Increase the PageViews
    • ►  August (12)
    • ►  July (14)
    • ►  June (5)
    • ►  May (11)
    • ►  April (5)
    • ►  March (15)
    • ►  February (24)

Labels

  • Facebook
  • twitter
  • googleplus
  • linkedin
  • youtube
  • flickr
  • vimeo
  • deviantart

Copyright Quicker BD 2018

Published By Gooyaabi Templates