Blogger Templates - ProBlue

Blogger Template Code: ProBlue

Below is the full HTML code for the "ProBlue" Blogger template.

Before pasting the code into your Blogger template editor, see the information below to configure this template for your blog.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

	<head>

		<title><$BlogPageTitle$></title>
		<$BlogMetaData$>
		<$BlogSiteFeedLink$>

		<style type="text/css">

			#navbar-iframe { display: none !important; }

			html, body	{ margin: 0; font-family: arial, verdana; background: #222; height: 100%; }
			a			{ text-decoration: none; }
			a.img		{ border: none; }
			td			{ vertical-align: top; }
			br			{ letter-spacing: 0; }
			img.left		{ float: left; margin: 5px 10px 5px 0; }
			img.right		{ float: right; margin: 5px 0 5px 10px; }
			blockquote	{ border-left: solid 5px #ddd; margin-left: 0 10px; padding-left: 10px; }
			code		{ display: block; margin: 0 25px; background: #eee; padding: 5px 10px; font-family: verdana, arial; letter-spacing: 0; font-size: 10px; color: #666; }
			.width100	{ width: 100%; }
			.opacity50	{ filter: alpha (opacity: 50); opacity: 0.5; }
			.clear		{ clear: both; }

			#main	{ margin-top:  navbarholder  ; width: 100%; height: 100%; }
			#bg-l 	{ background: url(http://www.blogger-templates.org/templates/problue/img/bg-l.jpg) top right; }
			#bg-r 	{ background: url(http://www.blogger-templates.org/templates/problue/img/bg-r.jpg) top left; }
			#bg-l div	{ background: url(http://www.blogger-templates.org/templates/problue/img/bg-tl.jpg) repeat-x top right; display: block; height: 170px;}
			#bg-r div	{ background: url(http://www.blogger-templates.org/templates/problue/img/bg-tr.jpg) repeat-x top left; display: block; height: 170px;}
			#shadow-l	{ background: url(http://www.blogger-templates.org/templates/problue/img/shadow-l.jpg); width: 44px; min-height: 100%; heigdht: 1170px; }
			#shadow-r	{ background: url(http://www.blogger-templates.org/templates/problue/img/shadow-r.jpg); width: 44px; heigdht: 170px; }
			#shadow-l div	{ background: url(http://www.blogger-templates.org/templates/problue/img/shadow-tl.jpg) repeat-x top right; display: block; width: 44px; height: 170px;}
			#shadow-r div	{ background: url(http://www.blogger-templates.org/templates/problue/img/shadow-tr.jpg) repeat-x top left; display: block; width: 44px; height: 170px;}

			/* you may change the width of the template by adjusting both 700px below */
			#center				{ width: 700px ; border-left: solid 1px #021B2E; border-right: solid 1px #021B2E; min-height: 100%; }
			#center #widther		{ width: 700px ; min-height: 100%; }
			#center-t				{ background: url(http://www.blogger-templates.org/templates/problue/img/center-t.jpg); width: 100%; height: 8px; font-size: 8px; line-height: 8px; }
			#center-tile			{ background: url(http://www.blogger-templates.org/templates/problue/img/center-search.jpg); }
			#center-logo			{ background: url(http://www.blogger-templates.org/templates/problue/img/center-logo.jpg); width: 413px; height: 57px; float: left; }
			#center-logo h1		{ padding: 6px 0 0 91px; margin: 0; font-family: verdana, arial; font-size: 22px; font-weight: normal; letter-spacing: -2px; }
			#center-logo h1 a		{ color: #fafafa; }
			#center-logo h1 a:hover	{ color: #fff; }
			#center-logo h2		{ padding: 1px 0 0 91px; margin: 0; font-weight: normal; font-size: 11px; color: #3AB4DC; }
			#center-search		{ height: 57px; float: right; }
			#center-search div		{ padding: 33px 7px 0 0; text-align: right; }
			#center-search input	{ background: none; border: none; text-align: right; color: #fafafa; font-size: 9px; width: 170px; font-family: verdana, tahoma, arial; ldtter-spacing: 1px; }
			#center-search form	{ margin: 0; padding: 0; }

			#menu-tile		{ background: url(http://www.blogger-templates.org/templates/problue/img/menu-tile.jpg) repeat-x; height: 27px; }
			#menu-l			{ background: url(http://www.blogger-templates.org/templates/problue/img/menu-l.jpg) no-repeat; width: 93px; height: 27px; float: left; }
			#menuwhite		{ float: right; }
			#menuwhite-corner	{ background: url(http://www.blogger-templates.org/templates/problue/img/menuwhite-corner.jpg) no-repeat; width: 22px; height: 21px; float: left; margin: 5px 0 0 0; }
			#menuwhite-tile	{ background: url(http://www.blogger-templates.org/templates/problue/img/menuwhite-tile.jpg) repeat-x; height: 21px; margin: 5px 0 0 0; float: left; cursor: default; white-space: no-wrap; }
			a.menuitem		{ background: url(http://www.blogger-templates.org/templates/problue/img/menuitem-bullet.jpg) no-repeat 0 3px; padding: 0 5px 0 12px; font-family: tahoma, verdana, arial; font-weight: bold; font-size: 10px; color: #00648C; }
			a.menuitem:hover	{ background: url(http://www.blogger-templates.org/templates/problue/img/menuitem-bullethover.jpg) no-repeat 0 3px; }

			#content-columns	{ width: 100%; }
			#sidebar			{ background: #efefef; width: 180px; min-height: 200px; padding: 7px; }
			#sidebar h2		{ background: url(http://www.blogger-templates.org/templates/problue/img/sidebar-header.jpg) no-repeat; margin: 5px 0; font-size: 10px; color: #525252; font-weight: normal; width: 100%; height: 29px; display: block; padding: 8px 0 0 30px; }
			#sidebar ul		{ margin: 0; padding: 0 10px 0 14px; list-style: none; font-size: 11px; position: relative; top: -8px; line-height: 12px; }
			#sidebar li		{ margin: 0; padding: 4px 0 5px 0; border-bottom: solid 1px #D4D4D4; color: #555; width: 100%; }
			#sidebar a		{ background: url(http://www.blogger-templates.org/templates/problue/img/sidebar-bullet.jpg) no-repeat 0 2px; color: #275B7E; display: block; width: 92%; padding: 0 0 0 10px; }
			#sidebar a:hover	{ color: #FF5300; }
			#content			{ background: url(http://www.blogger-templates.org/templates/problue/img/content-tile.jpg) repeat-x #fff; padding: 10px 35px 10px 15px; }
			#content h1		{ background: url(http://www.blogger-templates.org/templates/problue/img/content-titlebullet.jpg) no-repeat 0 6px; padding: 0 20px 0 15px; margin: 0 0 0 0; font-size: 18px; font-weight: normal; }
			#content h1 a			{ color: #2E6794; }
			#content h1 a:hover	{ color: #0B456D; }
			#content .datetime		{ font-size: 11px; color: #767676; margin: 0 0 5px 16px; }
			#content .contentdiv	{ background: url(http://www.blogger-templates.org/templates/problue/img/content-div.jpg); width: 331px; height: 1px; margin: 0 0 0 16px; font-size: 1px; line-height: 1px; }
			#content .text			{ margin: 10px 0 0 16px; font-size: 12px; color: #454545; }
			#content .text a		{ color: #00558C; border-bottom: solid 1px #FF8700; }
			#content .text a:hover	{ color: #FF5300; }
			#content .blogctrl a	{ border: 0; }

			#comments				{ margin: 5px 0 0 16px; font-size: 11px; color: #454545; }
			#comments .author			{ margin: 0 0 0 0; font-weight: bold; }
			#comments .author a		{ color: #00558C; border-bottom: solid 1px #FF8700; }
			#comments .author a:hover	{ color: #FF5300; }
			#comments .author span img	{ width: 11px; height: 11px; position: relative; top: 2px; }
			#comments .message		{ margin: 5px 0 0 20px; }
			#comments .datetime		{ margin: 5px 0 5px 20px; border-bottom: solid 1px #eee; padding: 0 0 5px 0; }

			.controlpanel			{ width: 100%; margin: 5px 0 10px 10px; height: 42px; }
			.controlpanel div		{ height: 42px; }
			.control-l div			{ background: url(http://www.blogger-templates.org/templates/problue/img/control-l.jpg) no-repeat; width: 14px; }
			.control-r div			{ background: url(http://www.blogger-templates.org/templates/problue/img/control-r.jpg) no-repeat; width: 14px; }
			.control-male div		{ background: url(http://www.blogger-templates.org/templates/problue/img/control-male.jpg) no-repeat; width: 20px; }
			.control-female div		{ background: url(http://www.blogger-templates.org/templates/problue/img/control-female.jpg) no-repeat; width: 20px; }
			.control-permalink div	{ background: url(http://www.blogger-templates.org/templates/problue/img/control-permalink.jpg) no-repeat; width: 11px; }
			.control-comments div	{ background: url(http://www.blogger-templates.org/templates/problue/img/control-comments.jpg) no-repeat; width: 13px; }
			.control-text			{ background: url(http://www.blogger-templates.org/templates/problue/img/control-tile.jpg) repeat-x; font-size: 11px; color: #fafafa; padding: 8px 5px; white-space: nowrap}
			.control-text a			{ color: #fafafa; border-bottom: solid 1px #4896C4; }
			.control-text a:hover	{ color: #fff; border-bottom: solid 1px #2CC0E0;}

			#footer			{ background: url(http://www.blogger-templates.org/templates/problue/img/footer-tile.jpg) #00283E; border-top: solid 1px #000; color: #053F65; height: 30px; padding: 6px 0 0 0; text-align: center; cursor: default; }
			#footer a			{ font-size: 10px; font-weight: bold; color: #ddd; margin: 0 5px; padding: 0 0 2px 0; font-family: verdana; }
			#footer a:hover	{ color: #fff; border-bottom: solid 1px #0B496A; }
			#copyright		{ background: #222; color: #666; font-size: 11px; padding: 5px; text-align: center; border-top: solid 1px #103D5A; }
			#copyright a		{ color: #666; border-bottom: solid 1px #333; }

		</style>

		<script language="javascript" type="text/javascript">
			function trim(elem) { return elem.replace(/^\s+|\s+$/g, '') ; }
			function searchreset(elem) { if ( trim(elem.value) == '' ) elem.value = 'Search...'; }
			function searchempty(elem) { if ( trim(elem.value) == 'Search...' ) elem.value = ''; }
		</script>

	</head>

	<body>
		<table id="main" border="0" cellspacing="0" cellpadding="0">
			<tr>
				<td id="bg-l"><div><img src="http://www.blogger-templates.org/templates/problue/img/trans.gif" width="1px" height="1px"></div></td>
				<td id="shadow-l"><div><img src="http://www.blogger-templates.org/templates/problue/img/trans.gif" width="1px" height="1px"></div></td>
				<td id="center">
					<div id="widther">
						<div id="center-t"></div>
						<div id="center-tile">
							<div id="center-logo"><h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1><h2><$BlogDescription$></h2></div>
							<div id="center-search">
								<div>
									<form method="get" id="searchform" action="http://www.google.com/custom">
										<input type="text" id="s" name="q" size="15" maxlength="255" value="Search..." onblur="javascript: searchreset(this);" onclick="javascript: searchempty(this);">
										<input type="hidden" name="domains" value="<$BlogURL$>">
										<input type="hidden" name="sitesearch" value="<$BlogURL$>">
									</form>
								</div>
							</div>
						</div>
						<div id="menu-l"></div>
						<div id="menu-tile">
							<div id="menuwhite">
								<div id="menuwhite-corner"></div>
								<div id="menuwhite-tile">

									<!-- ================================================ -->
									<!-- MENUBAR | Edit these if you wish. -->
									<!-- You can add more menu items by pasting -->
									<!-- ================================================ -->
									<a class="menuitem" href="<$BlogURL$>">BLOG HOME</a>
									<a class="menuitem" href="<$BlogOwnerProfileUrl$>">MY PROFILE</a>
									<a class="menuitem" href="">MY HOMEPAGE</a>
									<a class="menuitem" href="mailto:<$BlogOwnerEmail$>">CONTACT ME</a>

								</div>
							</div>
						</div>
						<table id="content-columns" border="0" cellspacing="0" cellpadding="0">
							<tr>

								<td id="sidebar">

									<!-- ================================================ -->
									<!-- SIDEBAR | Edit these if you wish. -->
									<!-- You can add more sidebar items by pasting -->
									<!-- ================================================ -->
									<h2>ABOUT ME</h2>
									<ul>
										<li>Write something interesting about yourself here.</li>
										<li><a href="<$BlogOwnerProfileUrl$>">My Profile</a></li>
									</ul>


									<h2>PREVIOUS POSTS</h2>
									<ul>
										<BloggerPreviousItems>
											<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
										</BloggerPreviousItems>
									</ul>


									<h2>ARCHIVE</h2>
									<ul>
										<BloggerArchives>
											<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
										</BloggerArchives>
									</ul>


									<h2>FAVORITE SITES</h2>
									<ul>
										<li><a href="http://www.snugglydogs.com">Cute & Funny Dog Pictures!</a></li>
										<li><a href="http://www.blogger-templates.org">Blogger-Templates.org</a></li>
									</ul>


									<h2>RSS</h2>
									<ul>
										<li><a href="<$BlogURL$>atom.xml">Subscribe to My Blog!</a></li>
									</ul>


									<h2>ADMIN</h2>
									<ul>
										<li><a href="http://www.blogger.com/start">Sign In</a></li>
									</ul>



								</td> <!-- don't touch this -->
								<td id="content">

									<!-- ================================================ -->
									<!-- MAIN/ARCHIVE PAGE -->
									<!-- ================================================ -->
									<MainOrArchivePage>
										<Blogger>
											<h1><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></h1>
											<div class="datetime"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
											<div class="contentdiv"><!-- this comment is needed here for ie 6 --></div>
											<div class="text">
												<$BlogItemBody$>
											</div>
											<div class="text blogctrl">
												<$BlogItemControl$>
											</div>
											<table class="controlpanel" border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td class="control-l"><div></div></td>
													<td class="control-male"><div></div></td>
													<td class="control-text"><$BlogItemAuthor$></td>
													<td class="control-text width100"></td>
													<td class="control-permalink"><div></div></td>
													<td class="control-text"><a href="<$BlogItemPermalinkURL$>">Permalink</a></td>
													<td class="control-comments"><div></div></td>
													<td class="control-text"><a href="<$BlogItemPermalinkURL$>#commentstart"><$BlogItemCommentCount$> Comment<script language="javascript">if ( <$BlogItemCommentCount$> != 1 ) document.write ("s");</script></a></td>
													<td class="control-r"><div></div></td>
												</tr>
											</table>
										</Blogger>
									</MainOrArchivePage>

									<!-- ================================================ -->
									<!-- ITEM PAGE -->
									<!-- ================================================ -->
									<ItemPage>
										<Blogger>
											<h1><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></h1>
											<div class="datetime"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
											<div class="contentdiv"><!-- this comment is needed here for ie 6 --></div>
											<div class="text">
												<$BlogItemBody$>
											</div>
											<div class="text blogctrl">
												<$BlogItemControl$>
											</div>
											<table id="commentstart" class="controlpanel" border="0" cellspacing="0" cellpadding="0">
												<tr>
													<td class="control-l"><div></div></td>
													<td class="control-male"><div></div></td>
													<td class="control-text"><$BlogItemAuthor$></td>
													<td class="control-text width100"></td>
													<td class="control-comments"><div></div></td>
													<td class="control-text"><a href="<$BlogItemCommentCreate$>">Comment on This Entry</a></td>
													<td class="control-r"><div></div></td>
												</tr>
											</table>
											<BlogItemCommentsEnabled>
												<div id="comments">
													<BlogItemComments>
														<div class="author"><$BlogCommentAuthor$> says:</div>
														<div class="message"><$BlogCommentBody$></div>
														<div class="datetime"><$BlogCommentDateTime$> <$BlogCommentDeleteIcon$></div>
													</BlogItemComments>
												</div>
											</BlogItemCommentsEnabled>
										</Blogger>
									</ItemPage>

								</td>
							</tr>
						</table>

						<div id="footer">

							<!-- ================================================ -->
							<!-- FOOTER | Edit these if you wish. -->
							<!-- You can add more items by pasting -->
							<!-- ================================================ -->
							<a href="<$BlogURL$>">Blog Home</a>
							<a href="<$BlogOwnerProfileUrl$>">My Profile</a>
							<a href="">My Homepage</a>
							<a href="mailto:<$BlogOwnerEmail$>">Contact Me</a>

						</div>

<!-- ================================================ -->
<!-- ProBlue Blogger Template -->
<!-- Copyright 2008 Blogger-Templates.org : Some rights reseved... -->
<!-- ================================================ -->
<!-- This is NOT a public domain or creative commons work! -->
<!-- ================================================ -->
<!-- You may share, sell, and make derivative works based on this -->
<!-- template under the condition that the attributive statement at -->
<!-- the footer of the template is included with all hyperlinks intact. -->
<!-- ================================================ -->
<!-- COPYRIGHT | Do NOT make any changes to the following code. -->
<!-- ================================================ -->
						<div id="copyright">
							 <a href="http://www.blogger-templates.org/download/problue" target="_blank">ProBlue Theme</a> © 2009 <a href="http://www.blogger-templates.org" target="_blank">Blogger Templates</a> Sponsored by <a href="http://www.famous-poems.org" target="_blank">Poems</a> :: All Rights Reserved						</div>

					</div>
				</td>
				<td id="shadow-r"><div><img src="http://www.blogger-templates.org/templates/problue/img/trans.gif" width="1px" height="1px"></div></td>
				<td id="bg-r"><div><img src="http://www.blogger-templates.org/templates/problue/img/trans.gif" width="1px" height="1px"></div></td>
			</tr>
		</table>
	</body>

</html>

Configure the Template

Copy and paste the above code into your preferred text editor, e.g. Windows Notepad, where you will be adjusting the code. Then proceed with the steps below.

1. Your User Icon - Male / Female

This template features a blue control panel, which is found at the bottom of every blog entry. In this control panel, there is a user icon followed by your Blogger name. By default, this icon is set as male. Female bloggers, search the template code for the following:

class="control-male"

There are 2 occurences of this expression in the template code. Change them both to:

class="control-female"

Be sure that you are searching for the entire expression provided above, including the "class=", and not simply "control-male" or "control-female."

2. Blogger Navbar

By default, this template banishes the weird Blogger navbar and we recommend that you keep it this way. However, if you would like to restore the navbar, search the template code for the following line and simply delete it or change it:

#navbar-iframe { display: none !important; }

Once the navbar is restored, however, it will obscure the top 30 pixels of the template. To fix that, search the template code for the following expression:

navbarholder

And carefully change it to the following:

30px

Install the Template

Go to the Blogger Dashboard and head to the Template or Layout page of the blog you're skinning, depending on your current template settings.

Then select Edit HTML near the top of the page.

If you're using one of the new preset templates provided by Blogger (you're seeing "Layout" instead of "Template"), you need to Revert to Classic Template at the very bottom of the page.

At the classic template HTML page, delete everything in the text area and Paste the template code into it. Save, and your blog should be live.

Graphics

All the graphics are currently being hosted for you, so you need not do anything concerning them, as the code is preset to grab the graphics off my server. If you would like to host the graphics yourself (should my server go down for any reason, etc.), follow these instructions.

Download and unzip this file and upload the images to any free image host. Take down the URLs as you're uploading them, and in the template code, search for the image file names, replacing them with your own URLs.

Here are some popular free hosts:

http://imageshack.us
http://photobucket.com