Blogger Templates - Citrux

Blogger Template Code: Citrux

Below is the full HTML code for the "Citrux" 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//ES" "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	{ width: 100%; background: #fff; margin: 0; font-family: arial, verdana; font-size: 12px; }
			h1, h2, h3, h4	{ margin: 0; }
			br			{ letter-spacing: 0; }
			a			{ text-decoration: none; }
			a.img		{ border: 0; }
			td			{ vertical-align: top; }
			code		{ display: block; background: #eee; margin: 0 10px; padding: 10px; font-family: arial, verdana; font-size: 11px; letter-spacing: 1px; color: #555; }
			blockquote	{ display: block; background: url(http://www.blogger-templates.org/templates/citrux/img/blockquote.gif) no-repeat; margin: 0 10px; padding: 0 0 0 40px; font-family: arial, verdana; font-size: 11px; letter-spacing: 1px; color: #555; }
			.centerer		{ margin: 0 auto; width: 900px; }
			.clear		{ clear: both; }
			img.left		{ float: left; margin: 5px 10px 0 0; }
			img.right		{ float: right; margin: 5px 0 0 10px; }
			#topbar		{ background: url(http://www.blogger-templates.org/templates/citrux/img/topbar.jpg); height: 30px; }
			#topbar-l		{ background: url(http://www.blogger-templates.org/templates/citrux/img/topbar-l.jpg); width: 22px; height: 30px; float: left; }
			#topbar-m	{ background: url(http://www.blogger-templates.org/templates/citrux/img/topbar-m.jpg); width: 856px; height: 30px; float: left; }
			#topbar-m-l	{ background: url(http://www.blogger-templates.org/templates/citrux/img/topbar-m-l.jpg); width: 271px; height: 30px; float: left; }
			#topbar-m-r	{ background: url(http://www.blogger-templates.org/templates/citrux/img/topbar-m-r.jpg); width: 145px; height: 30px; float: right; }
			#topbar-r		{ background: url(http://www.blogger-templates.org/templates/citrux/img/topbar-r.jpg); width: 22px; height: 30px; float: right; }
			#menubar	{ background: url(http://www.blogger-templates.org/templates/citrux/img/menubar.jpg); height: 48px; color: #fff; font-size: 11px; }
			#menubar-l	{ background: url(http://www.blogger-templates.org/templates/citrux/img/menubar-l.jpg); width: 22px; height: 48px; float: left; }
			#menubar-m		{ background: url(http://www.blogger-templates.org/templates/citrux/img/menubar-m.jpg); width: 856px; height: 48px; float: left; }
			#menubar-m h1 a	{ color: #fff; letter-spacing: -2px; font-size: 30px; font-weight: normal; float: left; padding: 5px 10px 0 10px;}
			#menubar-r		{ background: url(http://www.blogger-templates.org/templates/citrux/img/menubar-r.jpg); width: 22px; height: 48px; float: right; }
			#menuitems			{ letter-spacing: -1px; font-weight: bold; font-family: verdana, arial; font-size: 11px; }
			#menuitems a			{ background: url(http://www.blogger-templates.org/templates/citrux/img/menu-button.jpg) 0 -96px; width: 106px; height: 20px; display: block; float: left; padding: 28px 0 0 0; text-align: center; color: #fff; }
			#menuitems a.orange	{ background: url(http://www.blogger-templates.org/templates/citrux/img/menu-button.jpg); }
			#menuitems a:hover	{ background: url(http://www.blogger-templates.org/templates/citrux/img/menu-button.jpg) 0 -48px; }
			#body	{ background: url(http://www.blogger-templates.org/templates/citrux/img/body.jpg) repeat-x #fff; min-height: 308px; }
			#body-l	{ background: url(http://www.blogger-templates.org/templates/citrux/img/body-l.jpg); width: 22px; min-height: 308px; }
			#body-l-t	{ background: url(http://www.blogger-templates.org/templates/citrux/img/body-l-t.jpg); width: 22px; height: 308px; }
			#body-m	{ background: url(http://www.blogger-templates.org/templates/citrux/img/body-m.jpg) repeat-x #fff; min-height: 308px; }
			#body-r	{ background: url(http://www.blogger-templates.org/templates/citrux/img/body-r.jpg); width: 22px; min-height: 308px; }
			#body-r-t	{ background: url(http://www.blogger-templates.org/templates/citrux/img/body-r-t.jpg); width: 22px; height: 308px; }
			#content				{ padding: 0 20px 0 20px; width: 550px; float: left; }
			#content h2			{ background: url(http://www.blogger-templates.org/templates/citrux/img/entry-bullet.gif) 0 3px no-repeat; padding: 0 0 0 20px; font-size: 18px; font-weight: normal; color: #2f2f2f; margin: 20px 0 0 0; }
			#content h2 a			{ color: #2f2f2f; border: 0; }
			#content h2 a:hover	{ color: #2f2f2f; }
			#content a			{ color: #1892A7; border-bottom: solid 1px #ccc; padding: 0 0 1px 0; }
			#content a:hover		{ color: #F46800; }
			#content .itemctrl span a	{ border: solid 1px #fff !important; }
			.entry-line	{ height: 1px; margin: 10px 0 10px 20px; line-height: 1px; font-size: 1px; border-bottom: solid 1px #ccc; }
			.entry		{ margin: 0 20px; color: #2f2f2f; line-height: 18px; }
			.control		{ background: url(http://www.blogger-templates.org/templates/citrux/img/control.jpg); width: 100%; height: 69px; }
			.control-l		{ background: url(http://www.blogger-templates.org/templates/citrux/img/control-l.jpg); width: 23px; }
			.control-m	{ font-size: 11px; color: #888; }
			.control-m-l	{ float: left; margin: 15px 0 0 0; padding: 16px 0 0 0; }
			.control-m-r	{ float: right; margin: 15px 0 0 0; padding: 16px 0 0 0; }
			.control-r		{ background: url(http://www.blogger-templates.org/templates/citrux/img/control-r.jpg); width: 23px; }
			.control a			{ border: 0 !important; }
			.control a.c		{ background: url(http://www.blogger-templates.org/templates/citrux/img/comment-bubble.gif) no-repeat; padding: 0 0 0 25px !important; margin: 0 0 0 10px; }
			.control a.c:hover	{ background: url(http://www.blogger-templates.org/templates/citrux/img/comment-bubble.gif) 0 -14px no-repeat; }
			#sidebar			{ padding: 20px 0px 20px 0; float: right; width: 260px; font-size: 11px; color: #666; letter-spacing: 1px; overflow: hidden; }
			#sidebar h3		{ background: url(http://www.blogger-templates.org/templates/citrux/img/sidebar-title.jpg); width: 220px; height: 29px; font-size: 10px; color: #555; padding: 5px 0 0 30px; letter-spacing: 0; text-transform: uppercase; font-weight: normal; }
			#sidebar h3.first	{ background: url(http://www.blogger-templates.org/templates/citrux/img/sidebar-title-first.jpg); }
			#sidebar div.wrap	{ margin: 0 0 20px 0; padding: 0 30px 0 0; }
			#sidebar ul		{ padding: 0; margin: 0; }
			#sidebar ul li		{ list-style: none; margin: 0 0 0 20px; border-bottom: solid 1px #eee; }
			#sidebar ul li div	{ background: url(http://www.blogger-templates.org/templates/citrux/img/sidebar-bullet.gif) 0 7px no-repeat; padding: 5px 0 5px 18px; }
			#sidebar ul li a		{ background: url(http://www.blogger-templates.org/templates/citrux/img/sidebar-bullet.gif) 0 7px no-repeat; display: block; color: #666; padding: 5px 0 5px 18px; }
			#sidebar ul li a:hover	{ background: url(http://www.blogger-templates.org/templates/citrux/img/sidebar-bullet-2.gif) 0 7px no-repeat; color: #F46800; }
			div.rss		{ background: url(http://www.blogger-templates.org/templates/citrux/img/rss.jpg) 95px bottom no-repeat; margin: 0 !important; padding-bottom: 20px !important; }
			div.rss ul		{ padding: 0 0 0 0 !important; margin: 0 !important; }
			div.rss ul li	{ width: 140px; }
			#searchform		{ margin: 0; }
			#searchform #s	{ margin: 10px 20px; font-size: 11px; background: #fff; border: solid 1px #ccc; padding: 5px; font-family: arial, verdana; letter-spacing: 1px; width: 200px; color: #999; }
			#footer		{ background: #fff; height: 99px; text-align: center; }
			#footer-t		{ background: url(http://www.blogger-templates.org/templates/citrux/img/footer.jpg); height: 99px; }
			#footer-l		{ background: url(http://www.blogger-templates.org/templates/citrux/img/footer-l.jpg); width: 69px; height: 99px; float: left; }
			#footer-r		{ background: url(http://www.blogger-templates.org/templates/citrux/img/footer-r.jpg); width: 69px; height: 99px; float: right; }
			#footer-text	{ margin: 0 auto; width: 760px; padding: 20px 0 3px 0; font-size: 10px; text-transform: lowercase; float: left; color: #999; letter-spacing: 1px; }
			#footer-text a			{ color: #B6C301; }
			#footer-text a:hover	{ color: #aaa; }
			#footer-line	{ border-top: solid 1px #eee; height: 14px; }
			#comments				{ margin: 20px 10px 0 20px; font-size: 11px; letter-spacing: 1px; color: #555; }
			#comments .author			{ margin: 0 0 0 0; font-weight: bold; color: #999; }
			#comments .author a		{  }
			#comments .author a:hover	{  }
			#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; }
		</style>
		<script type="text/javascript">
			function trim(elem) { return elem.replace(/^\s+|\s+$/g, '') ; }
			function searchreset(elem) { if ( trim(elem.value) == '' ) elem.value = 'Type and hit Enter . . .'; }
			function searchempty(elem) { if ( trim(elem.value) == 'Type and hit Enter . . .' ) elem.value = ''; }
		</script>
	</head>

	<body>

		<div id="topbar">
			<div class="centerer">
				<div id="topbar-l"></div>
				<div id="topbar-m"><div id="topbar-m-l"></div><div id="topbar-m-r"></div></div>
				<div id="topbar-r"></div>
			</div>
		</div>

		<div id="menubar">
			<div class="centerer">
				<div id="menubar-l"></div>
				<div id="menubar-m">
					<div id="menubar-icon"></div>
					<h1><a href="<$BlogURL$>"><$BlogTitle$></a></h1>
					<div id="menuitems">

						<!-- ================================================ -->
						<!-- MENUBAR | Edit these if you wish. -->
						<!-- You can add more menu items by pasting -->
						<!-- Notice: the first menu item has the extra class="orange" attribute -->
						<!-- ================================================ -->
						<a class="orange" href="<$BlogURL$>">blog home</a>
						<a href="your url here">homepage</a>
						<a href="<$BlogOwnerProfileUrl$>">my profile</a>
						<a href="mailto:<$BlogOwnerEmail$>">contact me</a>

					<!-- stop -->
					</div>
				</div>
				<div id="menubar-r"></div>
			</div>
		</div>

		<div id="body">
			<table border="0" cellspacing="0" cellpadding="0" class="centerer">
			<tr>
				<td id="body-l"><div id="body-l-t"></div></td>
				<td id="body-m">
					<div id="content">


						<!-- ================================================ -->
						<!-- MAIN/ARCHIVE PAGE -->
						<!-- ================================================ -->
						<MainOrArchivePage>
							<Blogger>
								<h2><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></h2>
								<div class="entry-line"></div>
								<div class="entry">
									<$BlogItemBody$>
									<div class="itemctrl"><$BlogItemControl$></div>
								</div>
								<table border="0" cellspacing="0" cellpadding="0" class="control">
								<tr>
									<td class="control-l"></td>
									<td class="control-m">
										<div class="control-m-l"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
										<div class="control-m-r"><a href="<$BlogItemPermalinkURL$>">Permalink</a><a class="c" href="<$BlogItemPermalinkURL$>#commentstart"><$BlogItemCommentCount$> Comment<script type="text/javascript">if ( <$BlogItemCommentCount$> != 1 ) document.write ("s");</script></a></div>
									</td>
									<td class="control-r"></td>
								</tr>
								</table>
							</Blogger>
						</MainOrArchivePage>

						<!-- ================================================ -->
						<!-- ITEM PAGE -->
						<!-- ================================================ -->
						<ItemPage>
							<Blogger>
								<h2><a href="<$BlogItemPermalinkURL$>"><$BlogItemTitle$></a></h2>
								<div class="entry-line"></div>
								<div class="entry">
									<$BlogItemBody$>
									<div class="itemctrl"><$BlogItemControl$></div>
								</div>
								<table id="commentstart" border="0" cellspacing="0" cellpadding="0" class="control">
								<tr>
									<td class="control-l"></td>
									<td class="control-m">
										<div class="control-m-l"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader></div>
										<div class="control-m-r"><a class="c" href="<$BlogItemCommentCreate$>">Comment on This Entry</a></div>
									</td>
									<td class="control-r"></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>

					<!-- stop -->
					</div>
					<div id="sidebar">

						<!-- ================================================ -->
						<!-- SIDEBAR | Edit these if you wish. -->
						<!-- You can add more sidebar items by pasting -->
						<!-- Notice: the first h3 element (About Me) has the extra class="first" attribute -->
						<!-- This is because the first header uses a different graphic to blend into the content gradient -->
						<!-- ================================================ -->
						<h3 class="first">About Me</h3>
						<div class="wrap">
							<ul>
								<li><div>Write something interesting about yourself here</div></li>
								<li><a href="<$BlogOwnerProfileUrl$>">My Profile</a></li>
							</ul>
						</div>

						<h3>Previous Entries</h3>
						<div class="wrap">
							<ul>
								<BloggerPreviousItems>
									<li><a href="<$BlogItemPermalinkURL$>"><$BlogPreviousItemTitle$></a></li>
								</BloggerPreviousItems>
							</ul>
						</div>

						<h3>Archives</h3>
						<div class="wrap">
							<ul>
								<BloggerArchives>
									<li><a href="<$BlogArchiveURL$>"><$BlogArchiveName$></a></li>
								</BloggerArchives>
							</ul>
						</div>

						<h3>Favorites</h3>
						<div class="wrap">
							<ul>
								<li><a href="http://www.blogger-templates.org">Blogger-Templates.org</a></li>
								<li><a href="http://www.snugglydogs.com">Cute & Funny Dog Pictures!</a></li>
							</ul>
						</div>

						<h3>RSS Feed</h3>
						<div class="wrap rss">
							<ul>
								<li><a href="<$BlogURL$>atom.xml">Subscribe to My Blog</a></li>
							</ul>
						</div>

						<h3>Search</h3>
						<div class="wrap">
							<form method="get" id="searchform" action="http://www.google.com/custom">
								<input type="text" id="s" name="q" size="15" maxlength="255" value="Type and hit Enter . . ." onblur="javascript: searchreset(this);" onclick="javascript: searchempty(this);" />
								<input type="hidden" name="domains" value="<$BlogURL$>" />
								<input type="hidden" name="sitesearch" value="<$BlogURL$>" />
							</form>
						</div>

					<!-- stop -->
					</div>
					<div class="clear"></div>
				</td>
				<td id="body-r"><div id="body-r-t"></div></td>
			</tr>
			</table>
		</div>

<!-- ================================================ -->
<!-- Citrux 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="footer">
			<div class="centerer">
				<div id="footer-t">
					<div id="footer-l"></div>
					<div id="footer-text">
						<div id="footer-line"></div>
						<div>Content property of <a href="<$BlogURL$>"><$BlogTitle$></a></div>
						<a href="http://www.blogger-templates.org/download/citrux" target="_blank">Citrux 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 id="footer-r"></div>
				</div>
			</div>
		</div>

	</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. 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; }

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