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:

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

Top High Page Rank Dofollow Forums 2015 to Increase Backlinks

Quality backlinks are an important part of SEO (search engine optimization). They play a key role to increase your search engine ranking, Alexa ranking and brings quality traffic on your blogs. Every blogger strives to increase its backlinks to improve its presence in search engines. One thing to remember that a quality backlink has much importance on 1oo bad links. Now first we define what is a backlink? Backlinks, also known as incoming links, inbound links, inlinks, and inward links, are incoming links to a website or web page. In basic link terminology, a backlink is any link received by a web node (web page, directory, website, or top-level domain) from another web node. ( WikiPedia )  You can get quality backlinks from pro bloggers a number of ways, for example comment on posts, guest posts etc. Dofollow Forums 2015 First, I provide you 50+ High page rank dofollow comment blogs . Today, I am providing top high page rank dofollow forums 2015 to increase your b...
1 comment
Read more

10 Best Creative Domain Name Generator Tools

Domains are very significant part of a commercial enterprise and its branding. Attractive and easy domain name also helps to get huge traffic. If you want to create a new website or blog and do not have an idea about selecting a good domain name, then there is an easy solution to your problem. In this post, I describe 10 Best Creative Domain Generator Tools that help you to get ideas for your new domain. 1. NameBoy This is a worthy and reliable creative domain name generator tool. Thousands of people all over the world use NameBoy. Boy recommends you numerous domain name when you entered primary and secondary word of your domain. You can also find sold domain names by this generator. 2. DomainsBot DomainsBot an immediate and trusted domain name generator tools. It helps you to find the domains based on extensions. The main advantage is that you can check premium domains and free domain lookup to get owner’s information. 3. Dot-o-mator Dot-o-motor is much relating to NameBo...
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