Blog Stuff: BlogRoll Your Way... Grab The Code

Grab the BlogRoll SideBar Your Way code for your site!

All I ask, if you use this code, is:

Please leave the credit and copyright info intact.
Please link back to my site (http://www.iampariah.com) from your BlogRoll.
If you care to tell me on what site you're using it, I'd love to know if my ideas and scripts are useful to people!

Step 1: The Header Script

This first part is the <HEAD> code from the BlogRoll Multi-Browser SideBar Script. To use the second part of the code, you must copy all the code inside this block and paste it between the <HEAD></HEAD> tags of your page(s).

<SCRIPT language="javascript" type="text/javascript">
// BlogRolling.com Multi-Browser Script
// By Pariah S. Burke
// http://www.iampariah.com
//
// Based on http://www.dithered.com/javascript/browser_detect/index.html

function BrowserDetectUltraLite() {
	var ua = navigator.userAgent.toLowerCase();

// browser name
	this.isGecko	 = (ua.indexOf('gecko') != -1);
	this.isMozilla   = (this.isGecko && ua.indexOf("gecko/") + 14 == ua.length);
	this.isNS		= ( (this.isGecko) ? (ua.indexOf('netscape') != -1) : ( (ua.indexOf('mozilla') != -1) && (ua.indexOf('opera') == -1) ) );
	this.isIE		= ( (ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) ); 
	this.isOpera	 = (ua.indexOf("opera") != -1); 
	
	// browser version
	this.versionMinor = parseFloat(navigator.appVersion); 
	
	// correct version number
	if (this.isNS && this.isGecko) {
		this.versionMinor = parseFloat( ua.substring( ua.lastIndexOf('/') + 1 ) );
	}
	else if (this.isIE && this.versionMinor >= 4) {
		this.versionMinor = parseFloat( ua.substring( ua.indexOf('msie ') + 5 ) );
	}
	else if (this.isMozilla) {
	  this.versionMinor = parseFloat( ua.substring( ua.indexOf('rv:') + 3 ) );
   }
   else if (this.isOpera) {
		if (ua.indexOf('opera/') != -1) {
			this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera/') + 6 ) );
		}
		else {
			this.versionMinor = parseFloat( ua.substring( ua.indexOf('opera ') + 6 ) );
		}
	}
	
	this.versionMajor = parseInt(this.versionMinor); 
	this.geckoVersion = ( (this.isGecko) ? ua.substring( (ua.lastIndexOf('gecko/') + 6), (ua.lastIndexOf('gecko/') + 14) ) : -1 );
	
	// platform
	this.isWin   = (ua.indexOf('win') != -1);
	this.isMac   = (ua.indexOf('mac') != -1);
	
}
var browser = new BrowserDetectUltraLite();
</SCRIPT>

Step 2: Link To Your BlogRoll

Here is where the BlogRoll SideBar Your Way differs from the BlogRoll Multi-Browser SideBar Script. Use the below instead of the second part of the BlogRoll Multi-Browser SideBar Script.

Copy all the code inside this block and paste it where you want your BlogRoll link to appear between the <BODY></BODY> tags. important: You will have to make some minor modifications to the below code to make it show your BlogRoll. Replace all instances of "[your site]" with the actual path to where you will save the blogroll_sidebar.html page (below).

//Opera Blogroll
if (navigator.userAgent.indexOf('Opera') != -1) {
		document.write("<a href='[your site]/blogroll_sidebar.html' rel='sidebar' title='My BlogRoll' target='_self'>BlogRoll Sidebar</a>");
}

//Internet Explorer (Windows) Blogroll
else if ((browser.isIE) && (browser.isWin)) {
		document.write("<a href=\"javascript:void(_search=open('[your site]/blogroll_sidebar.html','_search'))\" target=\"_self\">BlogRoll Sidebar</a>");
}

//Mozilla Blogroll
else if (browser.isMozilla) {
		document.write("<a href=\"javascript:window.sidebar.addPanel('My BlogRoll', '[your site]/blogroll_sidebar.html', '')\" target='_self'>BlogRoll Sidebar</a>");
}

//Netscape Blogroll
else if (browser.isNS) {
		document.write("<a href=\"javascript:window.sidebar.addPanel('My BlogRoll', '[your site]/blogroll_sidebar.html', '')\" target='_self'>BlogRoll Sidebar</a>");
}

//Alternate Code (opens BlogRoll in a popup window)
else {
		document.write("<a href=\"javascript:void(rollpop=window.open('[your site]/blogroll_sidebar.html','bookmarks_popup','scrollbars=yes,width=275,height=500,status=no,resizable=yes'));rollpop.focus();\" target=\"_self\">BlogRoll Popup</a>");
}
// -->
</SCRIPT>
<noscript>
[this will show to browsers that don't support sidebars or JavaScript]
</noscript>

Step 3: The blogroll_sidebar.html

Now, the below code is actually going to become a new page. This is where you can customize the BlogRoll to match your site. Add images or change the background, the colors, the CSS—whatever you want to do! Make your BlogRoll look the way you want!

Replace the one instance of "[your Blogrolling.com URL]" with your Blogrolling.com BlogRoll ID. I've used the default JavaScript implementation. You could also use the PHP code (from Blogrolling.com). Just change the page name and references to .php instead of .html if you use the PHP code.

Copy all of the below code into a new page and save it to a file named: blogroll_sidebar.html. This one page will be used for sidebars (IE, Netscape, Mozilla, Opera) and popups (all other JavaScript-enabled browsers). Granted, the code below is not standards-compliant, but if you're code-savvy enough to write clean CSS and xHTML, you're good enough to replace the table code that may be easier to implement by those who aren't as code-savvy.

div.blogrollmain{

background:#8080C0;
FONT-FAMILY: Verdana, Tahoma, Arial;
FONT-SIZE: 12px;

}
.blogrollmain a {

color: #FFFFFF;
FONT-WEIGHT: normal;
text-decoration: none;

}
.blogrollmain a:hover {

color: #FF80FF;
FONT-WEIGHT: bold;
text-decoration: underline;

}

</style>

</HEAD>
<BODY BGCOLOR="#8080C0" TEXT="#CD9BFF" LINK="#FFFFFF" VLINK="#E4CAFF" ALINK="#FF80FF" LEFTMARGIN="0" TOPMARGIN="0" RIGHTMARGIN="0" BOTTOMMARGIN="0" MARGINwidth="0" MARGINheight="0">

<TABLE width="100%" height="100%" BORDER="1" CELLSPACING="0" CELLPADDING="0" BORDERCOLOR="#9A35FF">
			<TR><TD width="100%" height="16" ALIGN="LEFT" VALIGN="top" BGCOLOR="#000000">
			<FONT FACE="Arial,Helvetica,sans-serif" SIZE="3" COLOR="#9A35FF"><B>

BlogRoll

			</B></FONT>
			</TD></TR>
			<TR><TD height="100%" VALIGN="top">
				<TABLE width="100%" height="100%" BORDER="0" CELLSPACING="0" CELLPADDING="10">
				<TR><TD VALIGN="top">
			<FONT FACE="Arial,Helvetica,sans-serif" SIZE="2">

<script language="javascript" type="text/javascript" src="http://rpc.blogrolling.com/display.php?r=[your Blogrolling.com URL]"></script>

</FONT>
				</TD></TR>
				</TABLE>
			</TD></TR>
			<TR><TD width="100%" height="20" ALIGN="LEFT" VALIGN="top" BGCOLOR="#000000">
		<FONT FACE="Arial,Helvetica,sans-serif" SIZE="1" COLOR="#9A35FF">




powered by <a href="http://blogrolling.com" target="_main">BlogRolling.com</a> | sidebar by <a href="http://www.iampariah.com" target="_main">iamPariah.com</a>

		</FONT>
			</TD></TR>
			</TABLE>
</body>
</html>

That's it! Now, when someone clicks on your BlogRoll Multi-Browser SideBar link, it will load up in your custom page, showing a BlogRoll customized to match your site!

Get My Content

My Websites

Author

Portfolio (RANDOM SAMPLE)

Co-Author

My Current Desktop

Ads By Google

Link To IAMPARIAH.COM

MEMBER

Miscellany

Formerly Of

Web Rings

<< # ? >> Blog x Philes
<< # ? >> ameriBLOGs