For Blogspot Bloggers, there are two installation options: the Easy Way, and the Customizable Way.
For Wordpress Bloggers, at the moment, you'll need to install the button similar to the last step (add page element) in the Customizable Way.
------------------
*UPDATE*
Due to several requests, I've made the button on this blog (left side, says "Visit a Gluten Free Blog") available to add as a Widget without any copying, pasting, or template modifications.
Click the following button to install yours:
*That's all - you now have a browser friendly, gluten free blog hopping button!*
The following steps are for those who prefer to style their widget via css.
--------------------------------
Here's how you can add one yourself, and style it too!
The first step is probably the most daring, as it requires you to enter your Layout (Dashboard - Layout) and click the Edit HTML tab.
Once you're at the Edit HTML page, make sure to backup your template by clicking "Download Full Template".
The purpose of entering your template is to add styling to the button so that you can change colors and event font sizes/types from your Fonts and Colors tabs.
You'll want to create Variable names for the styles you'd like to edit from within your Font and Colors tab. Here are the four variables I created for this button:
<Variable name="randomblogbkgcolor" description="Random Blog Background Color" type="color" default="#c60" value="#5d7588">
<Variable name="randomblogbordercolor" description="Random Blog Border Color" type="color" default="#c60" value="#9cb088">
<Variable name="randomblogbkghovercolor" description="Random Blog Background Hover Color" type="color" default="#c60" value="#9db189">
<Variable name="randomblogborderhovercolor" description="Random Blog Border Hover Color" type="color" default="#c60" value="#718fa6">
These lines should be pasted near the top of your template, between the <head> and </head> tags. If you have meta tags, these variable name tags are commonly placed after the meta tags.
The next step is to paste the following lines just before the line that contains: >]]></b:skin> in your template:
/* Random Blog Styling */
input.randomblog {
background-color: $randomblogbkgcolor;
border: 2px outset $randomblogbordercolor;
width: 100%;
text-align:center;
font-style:bold;
color: #fff;
padding: 1px;
margin: 1px;
}
input.randomblog:hover {
background-color: $randomblogbkghovercolor;
border: 2px outset $randomblogborderhovercolor;
width: 100%;
text-align:center;
font-style:bold;
color: #fff;
padding: 1px;
margin: 1px;
}
Once you've completed this step (including backing up your template), click Save Template.
To add the button, you'll need to go to your Page Elements section under Layout. Once there, select "Add a Page Element" and choose HTML/Javascript. Copy and paste the following code into the new window:
<script style="" src="http://randomblog.googlecode.com/files/randomblogsourceclass.js"></script>
*note* this is the script Wordpress bloggers will want to refer to when adding this widget
------------------
Select "Save" and you'll now have your own Visit a Random GF Blogger widget. To change the colors of the background, border, and hovered-over background a border, go to your Fonts and Colors tab under Layout and change the colors of the four variables that start with "Random Blog" i.e. Random Blog Background Color.
That's all! If you would like to be included in this random gf blog visitor, simply leave a comment here and let us know.
