I've come across with this very wonderful blogger hack today. As you can see, i already implement it in the right-hand-side of this blog's search form. This button is very similar to the Google's I'm Feeling Lucky button which is will generate a random post on your blog each time you click on it.

Credit goes to Phydeaux3 , for making this 'widget' possible. You can download the instructions here.

Any question regarding the installation is more appropriate if you ask him directly since he know it better, just in case something is wrong. But it should be okay if you follow the instruction carefully.


By the way, here is a things that you can do to customized it.(if you can call it so)

<a href="#random" onclick="feelingLucky()" title="Random Post">Feeling Lucky?</a>

Nah, you can leave it as a hyperlink or make it as a button which is cool.

As a link :  Feeling Lucky?
Or as a button :

<!-- feeling lucky -->
<form>
<input onclick='feelingLucky();' type='button' value='Next Random Post ►'/>
</form>
<!-- feeling lucky -->

urmm you can change the 'Next Random..' ok..
Or you can do this too, a button with CSS customization :
The code..

<!-- feeling lucky -->
<form>
<input style="
                    display: block;
                    cursor: pointer;
                    float: left;
                    width: 120px;
                    margin: 0 0 0 6px;
                    padding: 3px 0 0 0;
                    text-align: center;
                    vertical-align: middle;
                    border: 1px solid #7a0000;
                    background-color: #c00000;
                    color: #FFFFFF;
                    font-size: 11px;" onclick="feelingLucky();" type="button" value="Next Random Post ►" />
</form>
<!-- feeling lucky -->


Ok here is the adjustment that you can apply as you see fit.

float: left;     /* the button position */
width: 120px;
margin: 0 0 0 6px;     /* top-right-bottom-left respectively */
padding: 3px 0 0 0;     /* top-right-bottom-left respectively */
text-align: center;
vertical-align: middle;
border: 1px solid #7a0000;     /* border with color */
background-color: #c00000;     /* button's color */
color: #FFFFFF;     /* font color */
font-size: 11px;

Last but not least, for a more tidy and clean code, you can place the CSS inside <style> and call the class name. This way is more effective since you can add another style to it like hover effect and so on. Anything you think right. Go0d luck..

Credit : Phydeaux3

And yeah - Julian Smith with his awesome and hot Grandma.hahahahaha..



You may also like this [...]
Fellow Readers