MASIGNCLEAN102

I'm Feeling Lucky Button

feeling lucky bar barFeeling Lucky??
Sometimes going to a random link is fun. Why not use in on your site as a little Easter Egg for your visitors.
You can find it on my blog in the menu to the left. Feel free to give it a try. Enjoy and have fun.



Copy The Full Code To Clipboard

Copy The Full Code To Clipboard

  • Instructions and Editing
Let's add FontAwesome to the <head> of your site if you don't already have it.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

HTML: Just past this into your side bar or anywhere else you would like it.

<center>
<div class="sbluckybar">
<a class="sbluckygo"  onClick="randomlinks()" title="Somewhere Random"><i class="fa fa-refresh sbfaicon"></i>I'm Feeling Lucky</a></div></center>
Simple Div style button.
title="": Tool tip that says somewhere random. Change this to say what you like.
onClick="randomlinks()": This pulls the links from the script.
fa-refresh: your Font Awesome icon. View more HERE.

CSS: Lets add our styles. Just paste this with our HTML or right into the CSS file or part of your site.

<style>
.sbfaicon {
color: #0EA9F4;
float: left;
font-size: 35px;
padding: 7px 7px 4px 7px;
border-right: 3px solid #fff;}

.sbluckybar {
width:100%;
box-shadow: 0 2px 3px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12), 0 3px 1px -2px rgba(0,0,0,0.2);
display: inline-flex;
border-radius:12px;}

.sbluckygo {
font-size: 25px!important;
cursor: pointer;
border: 2px solid #eee;
border-radius: 10px 10px 10px 10px;
width:inherit;
height:46px;
color:#6d6d6d;
font-size:26px!important;
text-decoration: none;
line-height: 46px!important;
background-color:#fff;}

.sbluckygo:hover {
color:#0EA9F4!important;
-webkit-text-fill-color: #0EA9F4;
background-color:#eee;
border: 2px solid #fff;}

</style>
.sbfaicon: Position, size and color of the Font Awesome icon on the left.
.sbluckybar: Sets the width and box-shadow.
.sbluckygo: Used for the font-size, cursor type, border, height, line-height and background color.
.sbluckygo:hover: Last as you know is to set your hover effects.

SCRIPT: The script calls all the URL's your looking at using. Jst past this with your html or in your script file.

<script type="text/javascript">
function randomlinks(){
    var myrandom=Math.round(Math.random()*9)
    var links=new Array()
    links[0]="https://www.link-0.com"
    links[1]="https://www.link-1.com"
    links[2]="https://www.link-2.com"
    links[3]="https://www.link-3.com"
    links[4]="https://www.link-4.com"
    links[5]="https://www.link-5.com"
    links[6]="https://www.link-6.com"
    links[7]="https://www.link-7.com"
    links[8]="https://www.link-8.com"
    links[9]="https://www.link-9.com"
    
 
    window.location=links[myrandom]
}
</script>
Math.random()*9: Is the number of links your using not including zero. You must set this to number of links your using.
links[9#]="": Place all of the links you like here.
And That's it. Your done. Comment below if you need help.

Thanks for stopping by. smile emoji
Please view our Terms of Use before using for any type of commercial use.
Thanks for being you! Come back for more great stuff monkey emoji
bell notification