Skip to main content

How to add the random post widget to your blogger

How to add the random post widget to your blogger
It is worthy things to attach your readers with your posts and enable them to spend more time on your website. For the increase of your page views, random post widget helps a lot. The widget can place in anywhere on your blog or site. It provides great flexibility to your readers to read your random publish posts. It is easy to add this button on your site.

How to Add Random Post Widget in Blogger

Follow these steps to add the random post widget in your blog


Go to your blogger dashboard→Layout → Add Widget → HTML/JavaScript.

Now just paste the following code in it. 

<style>#mbb-random a {background-color:#3bb3e0;padding:10px;position:relative;font-family: 'Open Sans', sans-serif;font-size:12px;text-decoration:none;color:#fff;border: solid 1px #186f8f;background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(44,160,202)),color-stop(1, rgb(62,184,229)));-webkit-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;-moz-box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;box-shadow: inset 0px 1px 0px #7fd2f1, 0px 1px 0px #fff;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;}#mbb-random a::before {background-color:#ccd0d5;content:"";display:block;position:absolute;width:100%;height:100%;padding:8px;left:-8px;top:-8px;z-index:-1;-webkit-border-radius: 5px;-moz-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;-webkit-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;-moz-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;-o-box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;box-shadow: inset 0px 1px 1px #909193, 0px 1px 0px #fff;}#mbb-random a:active {padding-bottom:9px;padding-left:10px;padding-right:10px;padding-top:11px;top:1px;background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(62,184,229)),color-stop(1, rgb(44,160,202)));}</style>
<center><div id="mbb-random"></div></center><script type="text/javascript">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'; 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 = 'Random Post'; document.getElementById('mbb-random').appendChild(a); } </script><script src="/feeds/posts/summary?max-results=0&alt=json-in-script&callback=feelingLucky"></script>
After adding the code just save the widget and save your blog. Now you and your visitor can see the random button.
If you like this post, please share it on social media with your friends

Labels

Labels:

Comments

  1. Unknown22 March 2015 at 02:52

    Thank you for Random Post Widget Post. I need this and I have added in my blog to view random post.

    ReplyDelete

Post a Comment

Popular posts from this blog

How to increase backlinks in 2015? Free backlink builder

A backlink is one type of algorithm that refers to incoming links to your site or pages. Backlinks play significant role to improve your search engine ranking and get more audience. They help to earn good money from the internet. Today’s post I am introducing top 10 backlinks building sites in 2015. Many online websites allow you to build some backlinks for your site. Let us view the sites to create free backlinks Imtalk . Org Imtalk basically a forum and offers many tools. It submits your sites more than 2500 pages. It offers many worthy tools like site directory submitter, bookmarks page etc. Imtalk create pages on different sites with a backlink to your site. Freebacklinkcreator . Com It submits your site thousands of do follow backlink websites. It offers speedy backlinks to your blog or website. A2z-Seo-Backlinks.Com It is a powerful tool to submit your link on different sites. The great feature of this backlink generator is that it also ping your link to search eng...
13 comments
Read more

How to add Floating Social share buttons to blogger

No one denies the importance of social sharing in recent world. Social Media play significant role to bring quality traffic to your website or blog. Today’s post, I am introducing your best vertical social sharing buttons to bloggers. Floating buttons have the edge of the header or footer static buttons. It catches the eyes of your post reader and he can easily share it. Moreover, it's a vertical float with the page and your readers easily share it with a single click. According to analyses of social share button providers, vertical floating buttons more share as compared to static buttons. How to add Floating Social sharing Buttons, Firstly, make the backup of your blogger template.  Login to your blogger dashboard, >>go to Template>>Edit HTML  Find <html leave a space and add the following code after it.                               xmlns : fb=http : // ogp . me/ ns /fb#...
Post a Comment
Read more

How to Add Responsive Social Sharing Buttons for Mobile in Blog

Mobile phones and tablets become the great source of traffic for blogs and websites. Google also announced that mobile friendly sites are the key factor in search ranking. Google implies new mobile friendly search ranking policy to April 2015. Therefore, it becomes more important for every blogger or webmaster to make his/her sites mobile friendly for better ranking in search engines. After search engines, social media is the great source of traffic for blogs. Unfortunately, in blogger mobile views, social sharing buttons do not appear properly. Today I am showing a way How to Add Responsive Social Sharing Buttons for Mobile in Your Blog. How to add Social Sharing Buttons Go to AddThis and create a free account  Now login your account and go to the tool.  Scroll down, select mobile toolbar, and click on setup button  Now you can customize your mobile buttons according to your wishes like their color, positions follow, share buttons etc. (If you select follow ...
2 comments
Read more