Adding 'Links to This Post' in the Postfooter

The text by the arrow above is the 'Links to this Post' link, or a Backlink in your postfooter section. If clicked, it'll show all the blogs/pages that are linked to that particular post of yours. Some of my older templates don't have this.

To have it on your blog, follow the instruction below. Backup the template file first just in case something goes wrong and you want to revert back to the old file.

Find this code in your xml file (use your search function):

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

This code is for the Comment link next to the Backlink. What you have to do is to paste a new group of code before (or after) the Comment link code, depending whether you want the Backlink to appear on the left or right of the Comment link.

If you want the Backlink on the left of the Comment link, put the code in red before the Comment link code, like the example below. The red code places the Backlink in the postfooter.

<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>

If you want it after, or on the right, of the Comment link, paste the red code below the Comment link code:

<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>1 <data:top.commentLabel/><b:else/><data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'><data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>

It's not done yet. You have to turn on the Backlink in the Blog Post Edit tab. Click on the small left-button for Links to this Post to turn it on.


It's pretty much done, but you might want to tweak the CSS code to change how the links, Backlink and Comment links, appear in the postfooter. Say, you might want to change its borders, colors, etc.

To do this, find the .post-footer .post-comment-link a {...} tag in your XML file. The whole code may look like this:

.post-footer .post-comment-link a {
margin: 0px 0px 0px 7px;
padding: 0px 0px 0px 9px;
border-left: 1px solid $postfooterTextColor;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}

This is where you might want to change if you want to change the appearance of both links, Comment and Backlink. For example, the border-left: 1px solid $postfooterTextColor; places a border just on the left side of the link.

Read more...

BLOGGER TUTORIAL

Blogger Template Design: Introduction

This tutorial is a very quick guide to teach you how to change or design your own Blogger templates. It's easy to understand and follow, especially to those who has no knowledge in HTML programming.

The tutorial is split into a number of sub-tutorial modules that explain specific parts of Blogger template design in detail. The best way to learn is by going through the module sequence one by one. But if you are familiar with the basics, you can jump into the more advanced modules. The earlier modules are focused on explaining the basic structure of the template design and the template code so that you understand more about a Blogger template in general. The later modules explain each section of a Blogger template in more detail and help you go through the process of coding and designing a template in a step-by-step approach.

In the tutorial, some of the names and terms are based on my own template design, but I'll explain them as general as possible so you get the bigger picture and can adapt to different template designs.

Tutorial Contents

• Tutorial 1: The Structure of a Blogger Template
• Tutorial 2: The Structure of a Blogger Template Code
• Tutorial 3: The Structure of CSS Styling Section
• Tutorial 4: Setting the Properties of a Container
• Tutorial 5: Common Containers and Elements in a Blogger Template
• Tutorial 6: Using the Generic Blogger Template
• Tutorial 7: Setting the Template Size
• Tutorial 8: The Body Section of the Blogger Template Code
• Tutorial 9: More Explanation about the Body Code
• Tutorial 10: Making a 3-Column Template and More ...
• Tutorial 11: Starting Your Own Blogger Template
• Tutorial 12: How To Embed Images as Background
  

Read more...

How to get rid of the Blogger navigation bar?

Here's a snapshot of a Blogger blog and the navigation bar (navbar) is at the top shown by the green arrow.

So, how do you get rid of it if you don't want it hanging on top of your blog? If you want to turn it on instead of off, read the section at the end of the post.

To Turn Off the Blogger Navigation Bar
Just copy the Navbar1 code below and paste it anywhere inside your blog XML file as a CSS code after the /* Variable definitions section. If you're not sure what this means, follow these steps:

#Navbar1 {
margin: 0;
padding: 0;
display: none;
visibility: hidden;
}

1. Login to your blog and click the Edit HTML tab inside the Template tab.
2. Inside the file, locate the section body { ..... } and paste the Navbar1 code below this section, after the closing bracket.
3. Click 'SAVE TEMPLATE'.
4. That's it. You're done.

************************

It's easy to get rid of it. But know that the Navbar serves some purposes. The most valuable purpose for you is that it helps other Bloggers stumble upon your blog when they click the NEXT button on the Navbar searching for other blogs randomly. Not to mention that it's easy go to the login page if you have the Navbar on; otherwise, you have to open up the Blogger login page to login.

So, you decide which is the best for you. To have it on or off?

Update: How to turn on the Blogger navigation bar?
If you're using my templates, most of them don't have the Blogger navigation bar. But, if, you'd like to turn it on, simply look for the following code and delete the code in red.

#Navbar1 {
margin: 0;
padding: 0;
display: none;
visibility: hidden;
}

Read more...

How to Change Background Opacity?

You can change the Blogger template opacity/transparency level easily by changing a few numbers in the code. Here's how to do it:

Click on the Layout: Edit HTML tab. Then, search for the code below:

#content-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 3px 3px;
width: 805px;
position: relative;
text-align: left;
background: $blogbgColor;
border-right: 1px solid $blogBorderColor;
filter:alpha(opacity=75);
-moz-opacity:0.75;
opacity:0.75;
}

Change the transparency level by changing the numbers highlighted in red. Vary the numbers between 0 to 100 for the line 1, or 0 to 1.0 for the lines 2 and 3. All the numbers must be at the same level, for example 75 for line 1 is equal to 0.75 for lines 2 and 3. The lower the number, the more transparent your blog is. If you don't want it to be transparent, set the values to 100, or 1.0.

Read more...

Choose Your Header

Top 5 Free Blog Header Image Websites

Your blog is a representation of who you are so it should be unique, right? The only problem is most free Blogger templates (if not all) are available to anyone so chances of you stumbling across another site that looks very similar to yours is going to be high. It's like going to a party and bumping into another girl who's wearing the exact same dress as you. It's something you hate and try to avoid.

The good news is you can easily make your Blogger site unique just by changing or adding a header image. Usually that move alone will make your blog stand out from the crowd (as well as customizing your sidebar widgets).

So here's a couple header image sites I'd like to recommend to help you dress up and personalize your blog.

1. 45 Free Beautiful Blog Headers – This is a great list compiled by Smashing Magazine. Some of the headers include the .psd source files so you can really customize the header if you've got Photoshop experience.
2. Free Webpage Headers – A very nice collection of hundreds of 800 x 200 website headers which can easily be used for Blogger. Images are organized by category which makes it much easier to find what you're looking for.
3. Dreamstime – This is actually a pay for image site but they have a free images section you can benefit from. Click on the "Free Images" tab once you get to their home page.
4. stock.xchng – By looking at the name of their site you wouldn't think it was any good but looks can be deceiving. They've got thousands of free images that would work for your blog header or for inserting them into a blog post.
5. Stock Vault – This free image site is dubbed the stock photo sharing website where designers and photographers can meet to share their images. Decent selection and more targeted towards designers but you might be able to find some goodies for your blog.
6. FreeFoto – This last one is a bonus since the list was only supposed to be 5. It's a pretty good site where you can find all sorts of images for your blog header, etc.

Premium Image Sites

Here's some other sites that are great but you have to buy the images. In most cases it's actually worth spending a few dollars just to get a perfect header image for your site. Remember, your blog is a representation of you so it's a good idea to dress it up nicely.

1. Fotolia – This is my favorite stock image site since you can find some great unique blog header images for as little as $1. Easy sign up process and you buy credits once you setup your account.
2. Stockxpert – Here's another good one if you can't find anything you like on Fotolia. Same plan since you pay per image starting at $1.
3. Shutterstock – This site is different than others since you pay on monthly basis and can download up to 750 images over the course of 30 days. It's great if you just need a ton of images in a short period. Sign up for one month, download your 750 max, and then cancel your account.
4. Photo Library (also known as Index Stock) – It's kind of hard to navigate their site but the images aren't watermarked meaning you can right click and save them.
5. Getty Images – This is truely the cream of the crop when it comes to high quality images. These images would be overkill for your personal blog but it's still a beautiful site to check out.
6. Photos.com – Another great high-end photo download site. You pay $99 per month but can download as many photos as you want. This is a great package for small businesses or corporations looking for stock photos for their website.
7. Creastock.com – They offer royalty free high quality stock photos and images but their price point is a little higher than I prefer. This site is more for the true professional looking for really high quality art for their site.

This list should give you more than enough sites of places to get free images for your blog. I'd love to hear if you've got some other sites our readers might be interested in as well. Also, if you've pimped out your blog with a new header image post your link below to share with everyone!

Ready to super charge your blog? Check out our professional premium blogger templates or make money by joining our blog affiliate program!

If you like this post then please consider subscribing to our eBlog Templates RSS feed. You can also subscribe by email and have new templates and articles sent directly to your inbox.

Read more...

Making Header Change

How to upload your own header image

This guide will show you how to upload a header image with Blog Title and Description as part of the graphic. For this to work, you have to hide the default Blog Title and Description texts.

*****

It's much better to use your own header image than the image already defined by the designer or just the simple plain background. For one thing, you can be sure to have a unique header compared to the rest of the blogs. The second reason is that you can write your blog Title and Description with much nicer fonts and color combinations.

Before that, you have to make sure that your image size will align well with the rest of the Header section. Turning the Title and Description text on or off can also mess up you alignment. For my templates, I've already given instructions for perfect alignment.


So, how to do this? Simple...

1. Go to the Layout > Template > Page Element. From there, click the Edit button for your Header. The screen below will pop up.

2. Upload an image from your computer. Make sure that your image size is correct or otherwise your Header will be misaligned! Save your changes. (Don't forget to fill in your Title and Description in the text box above! You can turn the text off later.)

3. To hide the default Blog Title and Description text, click the Header Edit button again. Another screen will pop up, but with a slightly different option (see the screen below). Select the 'Placement: Instead of title and description'. This will hide your Title and Description from showing up on the blog (but still kept as your blog's information). If you don't want to hide your Title and Description text, simply click the other option.

4. That's it. All you really have to do is make sure that you've got a nice image to put up as your blog's header.

Read more...

Setting Large Image

How To Get Large Picture Sizes

I thought I would give a little background into how I was able to get larger picture sizes than the standard sizes that Blogger allows. After some searching around the internet, I finally found a tutorial that was only a two step process, versus many other tutorials with five and six steps. You can find that tutorial on Our Blogger Templates: How To Post Large Photos In Blogger Blogspots. There are a few steps you need to do first to set up your blog to accept the larger picture sizes, however.

I use Blogger's Minima template in black. I like its simple format that lets the pictures pop on the page. However, whatever template you use shouldn't matter if you make the necessary changes within the html of the template.

The following assumes some knowlege of html, but not much. If you're unsure of what you are doing, I suggest creating a test blog that only you can see. You can then do all of your template and background changes there, then copy and paste the code to your blog. This allows you to play around with your blog without it being in mid-change when someone stops by your blog to visit.

First you need to change the size of your blog's template. You need to go into Edit Template. I changed my outer wrapper and header wrapper to 1100 px. My main wrapper is set at 840px and the sidebar-wrapper is at 220px. These allow for the larger sized pictures. You don't have to use these exact measurements. Just make sure that your outer and header wrappers are large enough that both the main and side wrappers will fit into them. You need to make sure your main wrapper is slightly larger than the width in which you set your pictures. I chose to have my pictures be 800px wide.

You will need to set up an account on an online picture hosting site. I use Photo Bucket.

The following steps will be necessary everytime you post a picture:

1. First you need to load your pictures to Photo Bucket (or whatever hosting site you chose).

2. When you post a picture, go to the Edit HTML tab(not compose tab) and paste in one of the following:

I use the top for horizontal pics and the bottom for vertical pics. You can adjust the sizes to anything you want, but this works with the width I've set up for my blog layout. I keep these html settings saved on my computer and just copy and paste in the one I need. Then just paste in the url that you get from Photo Bucket (or whatever service you use) and replace the url within the quotations.

Read more...

Post Large Image

How to Post Large Photos in Blogger Blogspots

Using the standard "Add Image" button in Blogger's text editor, you can only post photos or images with limited size, even if you choose the "Large Image" option.

Check out this test blog to see how the image fills up the entire post area. If you use the Blogger's Add Image button, the largest image you can post will be much smaller than this.


Follow these instructions to post large photos or images in your blog:

• Store your photos in an online image hosting service. I would suggest the free Photobucket powered by Google.
  
• Copy the direct link to the photo you want to post. In Photobucket, the direct link to your photo is located in the "Direct Link - Layout Pages" tab below your photo.
  
• In your Blogger Create Post panel, click the Edit HTML in the text editor.
• To post the photo or image, type the code below in the Blogger text Editor:

<img src="http://PhotoURL" width="100px" height="100px" />

• Change PhotoURL to the actual URL (the direct link) of the photo you want to post.
• Set the width and height of your photos appropriately. If you want it to be the actual size, simply delete the red part. If you just want to set the width and let the height changes accordingly to scale, simply set the width only, not the height.

Read more...

Add Menu Bar

Menubar for easy navigation

Here's a sample of where a menubar, aka a linkbar, is located - just below the header - easy for navigation. The basic templates in Blogger don't have this menubar.

All of the templates designed here have been coded to have this linkbar. To add links in the linkbar, go to the Layout --> Page Elements tab and click the Linkbar Edit link (see the red line below). The rest is easy!

Read more...

Change The Font

Colors and fonts are easy to customize...

>> Browse templates, Money tips, 9 comments

What do I mean by this?


Here's what it means. If you want to quickly change some colors or fonts, you'll go to the Layout --> Fonts and Colors page like the one on top. This is the easiest way to customize your own template if you don't know how to play around with the code.

But sometimes the things you can change are limited. For example, if you use the basic templates provided by Blogger, you have only about 10 - 20 items to customize. Other free templates also provided a limited number of things to change from, at most probably about 40 items.

But when using the templates provided here at Ourblogtemplates.com, you can change around 70 - 100 items, depending on the templates you use. That's way a lot more than the rest. This option is great if you got easily bored looking at the same templates, or if you want something a little bit different with your own taste.

If some of the items you want to customize don't change if you choose different colors or fonts, don't worry because those items might have been left there from a previously designed templates and are not meant for the templates you're using. The rest of the customizable items will work just fine.

If you're still not sure what I mean by all this, just try using one template designed here on a test blog that you can easily create (don't try on your main blog yet if you're not sure). You'll see how easy it is to customize the template.

Read more...

The Source for Making Readmore...

Expandable Posts

What is it?
The "Read more..." option (aka "expandable posts") allows you to show a shorter version of a longer post, or a summarized version, in the main page of the blog. The readers can then expand the post to its longer full version in the post-page by clicking the "Read more..." button. This option is great if you have posts that are too long to be shown on the main page.

For this code, the "Read more..." link will only show up for the posts that have been selected to show the link, which is a good thing. There are other versions of the code that won't function properly: the "Read more..." link shows up even if you don't want it to show up.

To get all the templates with this Expandable Posts function, make sure the templates are labeled with Expandable posts.

How to use it?
Most of the new templates here have been added with the 'Expandable Posts' code. You pretty much don't have to do anything much. The only thing you need to do is to separate each post you publish into two parts:

1. The summary part that will show up both in the shorter version and the full version.
2. The other part that shows up only in the full version in its post-page.
   

To do this, you first have to click the 'Edit Html' button, and add the following code (in red) into your post editor and separate your post according to the example below. You can continue writing in the 'Compose' mode but the fullpost-separator tags won't show up.

Type your summary here
<span id="fullpost">
Type rest of the post here
</span>

This is how it looks in the Post Editor (with the 'Edit Html' mode):


How to make it easier?
You can make it easier not to type the fullpost-separator tags everytime you post. To do this, go to the Settings --> Formatting tab. At the bottom is the Post Template form. Type in only the code in red above (the fullpost-separator tags) into the Post Template form.

You're done. The fullpost-separator tags will be automatically inserted in the Post Editor everytime you want to post. You can see the tags in the 'Edit HTML' mode to see where to place your posts accordingly.

How to change the "Read more..." text?
You can easily change the text to whatever you want, e.g. "Continue reading...", "[...]", and so on. Just go to the Layout --> Edit HTML tab and click the Expand Widget Templates box. Search for the "read more..." string (the red line below) in the XML code and simply change it to whatever you want. See the example below:


What if I don't want the "Read more..." code?
Delete it. Go to the Edit HTML tab and click the Expand Widget Templates box. Search for the "data:post.body" string (the red line below) in the XML code and delete the code in red only.

<div class='post-body' expr:id='&quot;post-&quot; data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read more...</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; &quot;<data:post.id/>&quot;);
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>

Read more...

Information of The Source Template

Blogger Templates: Noblarum

>> Browse templates, Money tips, 6 comments

Noblarum is an extremely flexible template based on The Professional Template. It has multiple columns that are flexible - it can either be a 3, 5, 6, or 8 column template without you having to do any coding. You can easily change all the colors and fonts without doing any coding. And you can change the header image to anything you want without any coding too.

Download Template | See the Demo | Newest Templates

This free Blogger template is based on a professional template theme. It can be either a 3, 5, 6, or 8 column template. If you want a 3 or 5 column template, simply don't fill in the smaller sidebars on the right and the lowerbar widgets; then make its colors blend with the post column.

The right narrow sidebar is 120 px wide, and the main left sidebar is 300 px wide, perfect for vertical and square Adsense boxes. The two smaller left-sidebars are 132 px wide. All the 3 lowerbar columns are 278 px wide.

Comment Box

To have your comment box function properly, go to Settings > Comments, look for the Comment Form Placement and click on the 'Embedded below post' button. That's all you have to do if you use this template. The codes have already been modified for you. See this post for more detail.

Features

• The "Read more..." function is available to shorten posts.
  
• Almost all colors and fonts are easy to customize.
• Blog Posts Edit buttons are fully functional.
• Flexible number of sidebars.
  
• Menubar below the header for easy navigation.
• Header image can be easily changed.
• Tested ok in all browsers using Browsershots.org.
• Read this if your comment form doesn't work.
  

Important: Change your template without loosing any sidebar widgets.
Help links: template installation guides and instructions.

Header Image
To put the header image in your blog, click on the image below to open up a larger size and save it into your computer. Then, upload the image using the Layout > Page Elements > Header Edit tab. If you want to use your own image for the header, the image width has to be 970 pixels (with any height).

Image Credit: ewallpapers.

Terms of Use
This new XML Blogger template is free but please value our hours of design work by leaving the credit at the bottom of the screen to Ourblogtemplates.com intact. But you can label whatever you want at the blog footer.

Read more...

Text Source of This Blog

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<b:include data='blog' name='all-head-content'/>
<title><data:blog.pageTitle/></title>

<b:skin><![CDATA[

/* ************ START OF CSS STYLING ************ */

/* -----------------------------------------------------------------------
Blogger Template Design: Noblarum
Design by: Ourblogtemplates.com
Terms of Use: Free template with credit linked to Ourblogtemplates.com
----------------------------------------------------------------------- */


/* Variable definitions
========================
<Variable name="bodybgColor" description="Body Background Color"
type="color" default="#FFBBE8" value="#b3b3b3">
<Variable name="blogframeColor" description="Blog Background Color"
type="color" default="#800040" value="#b3b3b3">
<Variable name="blogBorderColor" description="Blog Border Color"
type="color" default="#800040" value="#b3b3b3">
<Variable name="headerbgColor" description="Header Background Color"
type="color" default="#ffffff" value="#FBE319">
<Variable name="headerBorderColor" description="Header Border Color"
type="color" default="#800040" value="#FBE319">
<Variable name="blogTitleColor" description="Blog Title Color"
type="color" default="#800040" value="#FBE319">
<Variable name="blogDescriptionColor" description="Blog Description Color"
type="color" default="#800040" value="#cccccc">


<Variable name="linkbarbgColor" description="Linkbar Background Color"
type="color" default="#C94093" value="#000000">
<Variable name="linkbarmainBorderColor" description="Linkbar Main Border Color"
type="color" default="#C94093" value="#FBE319">
<Variable name="linkbarBorderColor" description="Linkbar Border Color"
type="color" default="#9D1961" value="#000000">
<Variable name="linkbarTextColor" description="Linkbar Text Color"
type="color" default="#ffffff" value="#FBE319">
<Variable name="linkbarHoverBgColor" description="Linkbar Hover Background Color"
type="color" default="#ffffff" value="#FBE319">
<Variable name="linkbarHoverTextColor" description="Linkbar Hover Text Color"
type="color" default="#9D1961" value="#000000">
<Variable name="middlebarbgColor" description="Middlebar Background Color"
type="color" default="#ffffff" value="#ffffff">

<Variable name="contentbgColor" description="Content Background Color"
type="color" default="#ffffff" value="#FBE319">
<Variable name="contentBorderColor" description="Content Border Color"
type="color" default="#9D1961" value="#FBE319">
<Variable name="postbgColor" description="Post Background Color"
type="color" default="#ffffff" value="#f3f3f3">
<Variable name="postBorderColor" description="Post Border Color"
type="color" default="#ffffff" value="#f3f3f3">
<Variable name="postTitleColor" description="Post Title Color"
type="color" default="#000000" value="#000000">
<Variable name="posttitlebgColor" description="Post Title Background Color"
type="color" default="#000000" value="#ffffff">
<Variable name="posttitleBorderColor" description="Post Title Border Color"
type="color" default="#000000" value="#f3f3f3">
<Variable name="dateHeaderColor" description="Date Header Color"
type="color" default="#000000" value="#b3b3b3">
<Variable name="textColor" description="Text Color"
type="color" default="#191919" value="#808080">
<Variable name="mainLinkColor" description="Main Link Color"
type="color" default="#333333" value="#808080">
<Variable name="mainHoverLinkColor" description="Main Hover Link Color"
type="color" default="#9D1961" value="#000000">
<Variable name="mainVisitedLinkColor" description="Main Visited Link Color"
type="color" default="#9D1961" value="#808080">
<Variable name="blockquotebgColor" description="Blockquote Background Color"
type="color" default="#191919" value="#f3f3f3">
<Variable name="blockquoteBorderColor" description="Blockquote Border Color"
type="color" default="#191919" value="#f3f3f3">
<Variable name="blockQuoteColor" description="Blockquote Color"
type="color" default="#191919" value="#808080">
<Variable name="codeTextColor" description="Code Text Color"
type="color" default="#660000" value="#808080">
<Variable name="imagebgColor" description="Photo Background Color"
type="color" default="#f5f5f5" value="#ffffff">
<Variable name="imageBorderColor" description="Photo Border Color"
type="color" default="#f5f5f5" value="#ffffff">


<Variable name="postfooterBgColor" description="Postfooter Background Color"
type="color" default="#b8659C" value="#eeeeee">
<Variable name="postfooterBorderColor" description="Postfooter Border Color"
type="color" default="#b8659C" value="#ffffff">
<Variable name="postfooterTextColor" description="Postfooter Text Color"
type="color" default="#b8659C" value="#b3b3b3">
<Variable name="postfooterLinkColor" description="Postfooter Link Color"
type="color" default="#b8659C" value="#b3b3b3">
<Variable name="commentTabLinkColor" description="Comment Tab Link Color"
type="color" default="#b8659C" value="#b3b3b3">
<Variable name="feedlinksColor" description="Feed Links Color"
type="color" default="#9D1961" value="#b3b3b3">


<Variable name="sidebar1bgColor" description="Sidebar1 Background Color"
type="color" default="#FFBBE8" value="#f3f3f3">
<Variable name="sidebar1BorderColor" description="Sidebar1 Border Color"
type="color" default="#C94093" value="#e6e6e6">
<Variable name="sidebar1HeaderBgColor" description="Sidebar1 Header Background Color"
type="color" default="#ffffff" value="#eeeeee">
<Variable name="sidebar1HeaderBorderColor" description="Sidebar1 Header Border Color"
type="color" default="#C94093" value="#FBE319">
<Variable name="sidebar1HeaderColor" description="Sidebar1 Header Color"
type="color" default="#000000" value="#333333">
<Variable name="sidebar1TextColor" description="Sidebar1 Text Color"
type="color" default="#9D1961" value="#808080">
<Variable name="sidebar1LinkColor" description="Sidebar1 Link Color"
type="color" default="#9D1961" value="#808080">
<Variable name="sidebar1HoverLinkColor" description="Sidebar1 Hover Link Color"
type="color" default="#000000" value="#0033FF">
<Variable name="sidebar1VisitedLinkColor" description="Sidebar1 Visited Link Color"
type="color" default="#000000" value="#808080">
<Variable name="sidebarListLineColor" description="Sidebar List Line Color"
type="color" default="#000000" value="#e6e6e6">
<Variable name="profileBorderColor" description="Profile Border Color"
type="color" default="#000000" value="#ffffff">


<Variable name="lowerbarbgColor" description="Lowerbar Background Color"
type="color" default="#ffffff" value="#000000">
<Variable name="lowerbarBorderColor" description="Lowerbar Border Color"
type="color" default="#C94093" value="#FBE319">
<Variable name="sublowerbarbgColor" description="Sublowerbar Background Color"
type="color" default="#ffffff" value="#000000">
<Variable name="sublowerbarBorderColor" description="Sublowerbar Border Color"
type="color" default="#C94093" value="#333333">
<Variable name="lowerbarHeaderColor" description="Lowerbar Header Color"
type="color" default="#000000" value="#b3b3b3">
<Variable name="lowerbarTitleBgColor" description="Lowerbar Header Background Color"
type="color" default="#C94093" value="#191919">
<Variable name="lowerbarHeaderBorderColor" description="Lowerbar Header Border Color"
type="color" default="#C94093" value="#333333">
<Variable name="lowerbarTextColor" description="Lowerbar Text Color"
type="color" default="#9D1961" value="#808080">
<Variable name="lowerbarLinkColor" description="Lowerbar Link Color"
type="color" default="#9D1961" value="#808080">
<Variable name="lowerbarHoverLinkColor" description="Lowerbar Hover Link Color"
type="color" default="#000000" value="#b3b3b3">
<Variable name="lowerbarVisitedLinkColor" description="Lowerbar Visited Link Color"
type="color" default="#000000" value="#808080">
<Variable name="lowerbarListLineColor" description="Lowerbar List Line Color"
type="color" default="#000000" value="#d5cDc3">


<Variable name="commentbgColor" description="Comment Background Color"
type="color" default="#9D1961" value="#ffffff">
<Variable name="commentBorderColor" description="Comment Border Color"
type="color" default="#C94093" value="#ffffff">
<Variable name="commentboxBgColor" description="Comment Box Background Color"
type="color" default="#9D1961" value="#f8f8f8">
<Variable name="commentboxBorderColor" description="Comment Box Border Color"
type="color" default="#C94093" value="#FBE319">
<Variable name="commentTitleColor" description="Comment Header Color"
type="color" default="#000000" value="#000000">
<Variable name="commentauthorBgColor" description="Comment Author Background Color"
type="color" default="#9D1961" value="#000000">
<Variable name="commentauthorColor" description="Comment Author Color"
type="color" default="#9D1961" value="#FBE319">
<Variable name="commentTimeStampColor" description="Comment Timestamp Color"
type="color" default="#C94093" value="#cccccc">
<Variable name="commentTextColor" description="Comment Text Color"
type="color" default="#4c4c4c" value="#808080">


<Variable name="footerbgColor" description="Footer Background Color"
type="color" default="#ffffff" value="#FBE319">
<Variable name="footerBorderColor" description="Footer Border Color"
type="color" default="#000000" value="#FBE319">
<Variable name="footerHeaderColor" description="Footer Header Color"
type="color" default="#000000" value="#000000">
<Variable name="footerTextColor" description="Footer Text Color"
type="color" default="#C94093" value="#000000">
<Variable name="footerLinkColor" description="Footer Link Color"
type="color" default="#C94093" value="#000000">
<Variable name="footerHoverLinkColor" description="Footer Hover Link Color"
type="color" default="#C94093" value="#4c4c4c">
<Variable name="footerVisitedLinkColor" description="Footer Visited Link Color"
type="color" default="#C94093" value="#000000">


<Variable name="blogTitleFont" description="Blog Title Font"
type="font"
default="normal bold 273% Georgia, Times, serif"
value="normal bold 319% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="blogDescriptionFont" description="Blog Description Font"
type="font"
default="normal normal 104% georgia,helvetica,verdana,Georgia, serif"
value="italic bold 126% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="linkbarTextFont" description="Linkbar Text Font"
type="font"
default="normal normal 77% Verdana, sans-serif"
value="normal bold 72% Arial, sans-serif">
<Variable name="postTitleFont" description="Post Title Font"
type="font"
default="normal bold 180% Georgia, Times, serif"
value="normal normal 188% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="dateHeaderFont" description="Date Header Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal normal 69% Arial, sans-serif">
<Variable name="textFont" description="Text Font"
type="font"
default="normal normal 90% Arial, sans-serif"
value="normal normal 80% Arial, sans-serif">
<Variable name="quoteFont" description="Blog Quote Font"
type="font"
default="normal normal 92% helvetica,tahoma,verdana,arial,times,Sans-serif"
value="italic normal 105% Arial, sans-serif">
<Variable name="sidebarHeaderFont" description="Sidebar Title Font"
type="font"
default="normal bold 117% Arial, sans-serif"
value="normal bold 89% Arial, sans-serif">
<Variable name="sidebarTextFont" description="Sidebar Text Font"
type="font"
default="normal normal 78% Arial, Verdana, sans-serif"
value="normal normal 67% Arial, sans-serif">
<Variable name="postfooterTextFont" description="Post-Footer Text Font"
type="font"
default="normal normal 93% Arial, sans-serif"
value="normal normal 82% Arial, sans-serif">
<Variable name="commentTitleFont" description="Comment Title Font"
type="font"
default="normal bold 120% Arial, sans-serif"
value="normal bold 124% Times, serif">
<Variable name="commentTextFont" description="Comment Text Font"
type="font"
default="normal normal 95% Arial, sans-serif"
value="normal normal 101% Arial, sans-serif">
<Variable name="footerHeaderFont" description="Footer Header Font"
type="font"
default="normal bold 131% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal normal 113% Trebuchet, Trebuchet MS, Arial, sans-serif">
<Variable name="footerTextFont" description="Footer Text Font"
type="font"
default="normal normal 76% Trebuchet, Trebuchet MS, Arial, sans-serif"
value="normal bold 95% Trebuchet, Trebuchet MS, Arial, sans-serif">
*/


/* ----- GLOBAL ----- Blogger template design by Ourblogtemplates.com */

* {margin:0; padding:0;}

body {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: center;
color: $textColor;
background: $bodybgColor url() repeat top right;
/* background-attachment: fixed; */
font-family: arial,verdana,helvetica,tahoma,Sans-serif;
font-size: 100%;
width: 100%;
}

#outer-wrapper {
margin: 0 auto; /* auto - to make the template lay in the screen center */
padding: 0px 0px 0px 0px;
margin-top: 0px;
margin-bottom: 15px;
position: relative;
width: 100%;
text-align: center;
}

#blog-wrapper {
margin: 0 auto; /* auto - to make the template lay in the screen center */
padding: 7px;
margin-top: 0px;
margin-bottom: 35px;
text-align: center;
position: relative;
width: 980px;
background: $blogframeColor;
border: 1px solid $blogBorderColor;
}

#spacer {clear: both; margin: 0; padding: 0;}

/* global link attributes */
a {color: $mainLinkColor; text-decoration: underline;}
a:hover {color: $mainHoverLinkColor; text-decoration: underline;}
a:visited {color: $mainVisitedLinkColor; text-decoration: underline;}

/* Blogger Navigation Bar */
#Navbar1 {
margin: 0;
padding: 0;
visibility: hidden;
display: none;
}



/* ----- TOP ADS ----- Blogger template design by Ourblogtemplates.com */

#topads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}

#topads {margin: 0; padding: 0;}

#topads .widget {margin: 0; padding: 5px 0;}



/* ----- HEADER ----- Blogger template design by Ourblogtemplates.com */

#header-wrapper {
margin: 0px 0px 0px 0px;
padding: 4px;
width: 970px;
background: $headerbgColor;
border: 1px solid $headerBorderColor;
}

#header {
width: 970px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
}

#header h1 {
font: $blogTitleFont;
font-variant: small-caps;
margin: 0px 0px 0px 0px;
padding: 130px 15px 0px 25px;
color: $blogTitleColor;
}

#header h1 a {
text-decoration: none;
color: $blogTitleColor;
}

#header h1 a:hover {
text-decoration: underline;
color: $blogDescriptionColor;
}

#header .description {
color: $blogDescriptionColor;
font: $blogDescriptionFont;
margin: 0px 0px 0px 0px;
padding: 0px 15px 25px 25px;
}

#header h1 p, #header .description p {margin:0;padding:0}

#header a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 0;
}



/* ----- LINKBAR ----- Blogger template design by Ourblogtemplates.com */

#linkbar-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 978px;
position: relative;
background: $linkbarbgColor;
border-left: 1px solid $linkbarmainBorderColor;
border-right: 1px solid $linkbarmainBorderColor;
}

#linkbar .widget {
margin: 0px 0px 0px 0px;
padding: 4px 0px 7px 20px;
text-align: left;
}

#linkbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
list-style-type:none;
}

#linkbar li {
display: inline;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#linkbar h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
display: none;
visibility: hidden;
}

#linkbar a {
clear: both;
margin: 0px -4px 0px 0px;
padding: 7px 25px 8px 25px;
width:100%;
text-decoration:none;
font: $linkbarTextFont;
color: $linkbarTextColor;
border-right: 1px solid $linkbarBorderColor;
border-left: 0px solid $linkbarBorderColor;
}

#linkbar a:hover {
color: $linkbarHoverTextColor;
background: $linkbarHoverBgColor;
}



/* ----- MIDDLE ADS ----- Blogger template design by Ourblogtemplates.com */

#middleads-wrapper {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
width: 980px;
position: relative;
text-align: center;
}

#middleads, #middleads2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
/* background: $middlebarbgColor;
border-top: 1px solid $contentBorderColor;
border-left: 1px solid $contentBorderColor;
border-right: 1px solid $contentBorderColor; */
}

#middleads .widget, #middleads2 .widget {
margin: 0;
padding: 10px 0;
}

/* ----- MAIN ----- Blogger template design by Ourblogtemplates.com */

#content-wrapper {
width: 978px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 10px 0px;
position: relative;
text-align: left;
background: $contentbgColor;
border: 1px solid $contentBorderColor;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main-wrapper {
float: left;
width: 486px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#main {
width: 476px;
margin: 4px;
padding: 20px 0 0 0;
color: $textColor;
font: $textFont;
background: $postbgColor;
border: 1px solid $postBorderColor;
}

#main .widget {
margin: 0px 0px 0px 0px;
padding: 0px 25px 20px 25px;
}

.post {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.6em;
text-align: justify;
}

.post h3 {
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 0px;
color: $postTitleColor;
font: $postTitleFont;
text-decoration: none;
text-align: left;
line-height: 1.4em;
/* text-transform: uppercase; */
border-bottom: 2px solid $posttitleBorderColor;
}

.post h3 a, .post h3 a:visited {
color: $postTitleColor;
text-decoration: none;
}

.post h3 a:hover {
color: $dateHeaderColor;
text-decoration: none;
}

.post-header-line-1 {
}

h2.date-header {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
text-align: left;
color: $dateHeaderColor;
font: $dateHeaderFont;
text-decoration: none;
text-transform: uppercase;
}

.date-header span {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-body p {
/* Fix bug in IE5/Win with italics in posts */
margin: 0px 0px 0px 0px;
padding: 1px 0px 1px 0px;
display: inline; /* to fix floating-ads wrapping problem in IE */
height: 1%;
overflow: visible;
}

.post-body p a, .post-body p a:visited {
color: $mainLinkColor;
text-decoration: underline;
}

.post-body a:hover {
text-decoration: underline;
color: $mainHoverLinkColor;
}

.post ul {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
list-style-type: disc;
line-height: 1.6em;
font-size: 95%;
}

.post ol {
margin: 0px 0px 0px 0px;
padding: 12px 0px 12px 30px;
line-height: 1.6em;
font-size: 95%;
}

.post li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 8px 0px;
}

a img {
margin: 5px 5px 5px 5px;
padding: 0px 0px 0px 0px;
}

.post img {
margin: 0px;
padding: 5px;
background: $imagebgColor;
border: 1px solid $imageBorderColor;
}

/* ----- POST-FOOTER ----- Blogger template design by Ourblogtemplates.com */


.post-footer {
display: block;
margin: 15px 0px 25px 0px;
padding: 7px 20px 7px 20px;
text-align: left;
font: $postfooterTextFont;
color: $postfooterTextColor;
font-weight: normal;
line-height: 1.6em;
text-decoration: none;
background: $postfooterBgColor;
border: 1px solid $postfooterBorderColor;
}

.post-footer-line {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer-line-1, .post-footer-line-2, .post-footer-line-3 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer a {
color: $postfooterLinkColor;
text-decoration: none;
}

.post-footer a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-comment-link a {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTabLinkColor;
font-weight: normal;
text-decoration: none;
}

.post-footer .post-comment-link a:hover {
color: $mainHoverLinkColor;
text-decoration: underline;
}

.post-footer .post-icons {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.post-footer img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
background: $postfooterBgColor;
}

#blog-pager {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
text-align: center;
font: $postfooterTextFont;
color: $feedlinksColor;
}

#blog-pager a {color: $feedlinksColor}
#blog-pager a:hover {color: $mainHoverLinkColor}

#blog-pager-newer-link {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#blog-pager-older-link {
float: right;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.feed-links {
margin: 10px 0px 0px 0px;
padding: 0px 0px 0px 0px;
clear: both;
text-align: left;
font: $postfooterTextFont;
color: $feedlinksColor;
}

.feed-links a, .feed-links a:visited {color: $feedlinksColor}
.feed-links a:hover {color: $mainHoverLinkColor}



/* ----- BLOCKQUOTE ----- */

blockquote {
margin: 10px 0px 10px 15px;
padding: 10px 15px 10px 15px;
font: $quoteFont;
line-height: 1.6em;
color: $blockQuoteColor;
background: $blockquotebgColor;
border: 2px solid $blockquoteBorderColor;
}


/* ----- CODE ----- */

code {
color: $codeTextColor;
font-size: 110%;
}



/* ----- SIDEBAR ----- Blogger template design by Ourblogtemplates.com */

#side-wrapper1 {
width: 156px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#side-wrapper2 {
width: 336px;
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#side-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.sidebar {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
text-align: left;
font: $sidebarTextFont;
}

#sidebar1 {
width: 152px;
margin: 4px 4px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}

#sidebar2 {
width: 332px;
margin: 4px 0px 0px 4px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}

#sidebar3 {
width: 164px;
margin: 0px 4px 0px 4px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}

#sidebar4 {
width: 164px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $sidebar1TextColor;
line-height: 1.8em;
}

#sidebar1 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

#sidebar2 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

#sidebar3 .widget, #sidebar4 .widget {
margin: 0px 0px 4px 0px;
padding: 15px 15px 15px 15px;
background: $sidebar1bgColor;
border: 1px solid $sidebar1BorderColor;
}

/* sidebar heading ----- Blogger template design by Ourblogtemplates.com */

#sidebar1 h2, #sidebar2 h2, #sidebar3 h2, #sidebar4 h2 {
margin: -15px -15px 10px -15px;
padding: 5px 15px 5px 15px;
text-align: left;
color: $sidebar1HeaderColor;
font: $sidebarHeaderFont;
text-transform: uppercase;
text-decoration: none;
background: $sidebar1HeaderBgColor;
border-bottom: 1px solid $sidebar1HeaderBorderColor;
}

.sidebar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.sidebar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.8em;
list-style-type: none;
border-bottom: 0px solid $sidebarListLineColor;
}

#sidebar1 a, #sidebar2 a, #sidebar3 a , #sidebar4 a {
color: $sidebar1LinkColor;
text-decoration: none;
}

#sidebar1 a:hover, #sidebar2 a:hover, #sidebar3 a:hover, #sidebar4 a:hover {
text-decoration: none;
color: $sidebar1HoverLinkColor;
}

#sidebar1 a:visited, #sidebar2 a:visited, #sidebar3 a:visited, #sidebar4 a:visited {
text-decoration: none;
color: $sidebar1VisitedLinkColor;
}

.sidebar a img {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border: 1px solid $profileBorderColor;
}



/* ----- PROFILE ----- Blogger template design by Ourblogtemplates.com */

.profile-img {
margin: 7px;
padding: 0px;
border: 1px solid $sidebarListLineColor;
}

.profile-textblock {
margin: 0px 0px 0px 0px;
padding: 3px 0px 3px 0px;
clear: both;
line-height: 1.6em;
/* border-top: 1px solid $sidebarListLineColor;
border-bottom: 1px solid $sidebarListLineColor; */
}

.profile-datablock {
margin: 2px 0px 5px 0px;
padding: 0px 0px 0px 0px;
}

.profile-data {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-weight: normal;
font-style: italic;
}

.profile-link {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}



/* ----- COMMENT ----- Blogger template design by Ourblogtemplates.com */
#comments {
margin: 0px 0px 0px 0px;
padding: 0px 0px 20px 0px;
text-align: left;
color: $commentTextColor;
font: $commentTextFont;
}

.comments-singleblock {
margin: 15px 0px 15px 0px;
padding: 15px;
background: $commentboxBgColor;
border: 1px solid $commentboxBorderColor;
}

/* comment-header */
#comments h4 {
margin: 20px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTitleColor;
font: $commentTitleFont;
text-transform: uppercase;
}

.deleted-comment {
font-style:italic;
color:gray;
margin: 5px 0px 5px 0px;
}

.comment-author {
margin: -15px -15px 0px -15px;
padding: 5px 15px 5px 15px;
color: $commentauthorColor;
font-weight: normal;
background: $commentauthorBgColor;
border-bottom: 1px solid $commentboxBorderColor;
}

.comment-author a {color: $commentauthorColor; text-decoration: none;}
.comment-author a:hover {color: $commentTimeStampColor; text-decoration: underline;}
.comment-author a:visited {color: $commentauthorColor; text-decoration: none;}
.comment-body {margin: 0; padding: 10px 0px 0px 30px;}
.comment-body p {margin: 0; padding: 0; line-height: 1.6em;}
.comment-footer, .comment-footer a {margin: 0px 0px 0px 0px; padding: 4px 0px 0px 0px;}

.comment-timestamp {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
color: $commentTimeStampColor;
}

.comment-timestamp a {
color: $commentTimeStampColor;
text-decoration: none;
}

.comment-timestamp a:hover {color: $commentauthorColor; text-decoration: underline;}

#comments ul {margin: 0; padding: 0; list-style-type: none;}
#comments li {margin: 0; padding: 0;}

a.comment-link {
/* ie5.0/win doesn't apply padding to inline elements,
so we hide these two declarations from it */
padding: 0px 0px 0px 0px;
}

html>body a.comment-link {
/* respecified, for ie5/mac's benefit */
padding-left: 0px;
}

#backlinks-container {margin-top: 30px}


/* ----- LOWER SECTION ----- Blogger template design by Ourblogtemplates.com */

#lower-wrapper {
margin: 0px 0px 0px 0px;
padding: 4px 0px 0px 0px;
width: 978px;
font: $sidebarTextFont;
color: $lowerbarTextColor;
background: $lowerbarbgColor;
border: 1px solid $lowerbarBorderColor;
}

#lowerbar-wrapper {
float: left;
margin: 0px 0px 0px 4px;
padding: 0px 0px 0px 0px;
width: 320px;
text-align: left;
line-height: 1.8em;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 4px;
padding: 0px 0px 0px 0px;
width: 100%;
text-align: center;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

.lowerbar .widget {
margin: 0 0 4px 0;
padding: 20px 20px 20px 20px;
border: 1px solid $sublowerbarBorderColor;
background: $sublowerbarbgColor;
}

.lowerbar {margin: 0; padding: 0;}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 10px 0px 10px 0px;}

.lowerbar h2 {
margin: -20px -20px 10px -20px;
padding: 5px 20px 5px 20px;
color: $lowerbarHeaderColor;
font: $sidebarHeaderFont;
text-align: left;
text-transform: uppercase;
background: $lowerbarTitleBgColor;
border-bottom: 1px solid $lowerbarHeaderBorderColor;
}

.lowerbar ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

.lowerbar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
line-height: 1.8em;
list-style-type: none;
border-bottom: 0px solid $lowerbarListLineColor;
}

.lowerbar a {color: $lowerbarLinkColor; text-decoration: none;}
.lowerbar a:hover {text-decoration: underline; color: $lowerbarHoverLinkColor;}
.lowerbar a:visited {text-decoration: none; color: $lowerbarVisitedLinkColor;}



/* ----- FOOTER ----- Blogger template design by Ourblogtemplates.com */

#footer-wrapper {
clear: both;
display: inline; /* handles IE margin bug */
float: left;
width: 980px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

#footer {
margin: 0px 0px 0px 0px;
padding: 20px 0px 0px 0px;
width: 978px;
text-align: left;
color: $footerTextColor;
font: $footerTextFont;
line-height: 1.6em;
background: $footerbgColor;
border: 1px solid $footerBorderColor;
}

#footer h2 {
margin: 0px 0px 0px 0px;
padding: 0px 0px 5px 0px;
color: $footerHeaderColor;
font: $footerHeaderFont;
}

#footer .widget {
margin: 0px 0px 0px 0px;
padding: 0px 20px 20px 20px;
}

.footer p {margin: 0; padding: 0}

.footer a {
color: $footerLinkColor;
text-decoration: none;
}

.footer a:hover {
color: $footerHoverLinkColor;
text-decoration: underline;
}

.footer a:visited {
color: $footerVisitedLinkColor;
text-decoration: none;
}



/* ----- BOTTOM ADS ----- Blogger template design by Ourblogtemplates.com */

#bottomads-wrapper {
margin: 0;
padding: 0;
position: relative;
text-align: center;
width: 100%;
}

#bottomads {margin: 0; padding: 10px 0;}

#bottomads .widget {margin: 0; padding: 5px 0;}



/* ----- CREDIT ----- */

#credit {
margin: 0px 0px 0px 0px;
padding: 2px 0px 0px 0px;
width: 100%;
height: 26px;
clear: both;
font-family: verdana, helvetica;
font-size: 70%;
color: #444444;
font-weight: normal;
background: #777777;
}

#creditleft {
margin: 0px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: left;
text-align: left;
display: inline;
width: 71%;
background: #ffffff;
}

#creditright {
margin: -33px 0px 0px 0px;
padding: 7px 0px 0px 0px;
height: 26px;
position: relative;
float: right;
text-align:right;
display: inline;
width: 30%;
background: #ffffff;
}

#creditleft p {
margin: 0;
padding: 0
}

#creditright p {
margin: 0;
padding: 0
}

#creditleft a, .creditleft a:hover, .creditleft a:visited {
color: #444444;
text-decoration: underline;
}

#creditright a, .creditright a:hover, .creditright a:visited {
color: #444444;
text-decoration: underline;
}




/* ************ END OF CSS STYLING ************ */



/** Page structure tweaks for layout editor wireframe */

body#layout #main,
body#layout #sidebar {
padding: 0;
}
]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = &#39;inline&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;none&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;inline&#39;;
}
}


function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = &#39;none&#39;;
}
if (spans[i].id == &quot;showlink&quot;)
spans[i].style.display = &#39;inline&#39;;
if (spans[i].id == &quot;hidelink&quot;)
spans[i].style.display = &#39;none&#39;;
}
post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName(&#39;span&#39;);
var found = 0;
for (var i = 0; i &lt; spans.length; i++) {
if (spans[i].id == &quot;fullpost&quot;) {
spans[i].style.display = &#39;none&#39;;
found = 1;
}
if ((spans[i].id == &quot;showlink&quot;) &amp;&amp; (found == 0))
spans[i].style.display = &#39;none&#39;;
}
}

</script>
</b:if>

</head>

<body>
<div id='outer-wrapper'>

<!-- skip links for text browsers -->
<span id='skiplinks' style='display:none;'>
<a href='#main'>skip to main </a> |
<a href='#sidebar'>skip to sidebar</a>
</span>

<div id='topads-wrapper'>
<b:section class='topads' id='topads' preferred='yes'/>
</div>

<div style='clear: both;'/>

<div id='blog-wrapper'>

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Noblarum (Header)' type='Header'>
<b:includable id='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</b:includable>
<b:includable id='description'>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</b:includable>
<b:includable id='main'>

<b:if cond='data:useImage'>
<b:if cond='data:imagePlacement == &quot;REPLACE&quot;'>
<!--Show just the image, no text-->
<div id='header-inner'>
<a expr:href='data:blog.homepageUrl' style='display: block'>
<img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + &quot;_headerimg&quot;' expr:src='data:sourceUrl' expr:width='data:width' style='display: block'/>
</a>
</div>
<b:else/>
<!--Show image as background to text-->
<div expr:style='&quot;background-image: url(\&quot;&quot; + data:sourceUrl + &quot;\&quot;); &quot; + &quot;background-repeat: no-repeat; &quot; + &quot;width: &quot; + data:width + &quot;px; &quot; + &quot;height: &quot; + data:height + &quot;px;&quot;' id='header-inner'>
<div class='titlewrapper' style='background: transparent'>
<h1 class='title' style='background: transparent; border-width: 0px'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
<b:else/>
<!--No header image -->
<div id='header-inner'>
<div class='titlewrapper'>
<h1 class='title'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<data:title/>
<b:else/>
<a expr:href='data:blog.homepageUrl'><data:title/></a>
</b:if>
</h1>
</div>
<div class='descriptionwrapper'>
<p class='description'><span><data:description/></span></p>
</div>
</div>
</b:if>
</b:includable>
</b:widget>
</b:section>
</div>

<div style='clear: both;'/>

<div id='linkbar-wrapper'>
<b:section class='linkbar' id='linkbar' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Linkbar' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div style='clear: both;'/>

<div id='middleads-wrapper'>
<b:section class='middleads' id='middleads' preferred='yes'/>
</div>

<div style='clear: both;'/>

<div id='content-wrapper'>

<div id='side-wrapper2'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
<b:widget id='Text3' locked='false' title='Lorem Ipsum' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
<b:widget id='Text4' locked='false' title='Lorem Ipsum' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
<div style='clear: both;'/>

<div id='side-wrapper'>
<b:section class='sidebar' id='sidebar3' preferred='yes'>
<b:widget id='LinkList2' locked='false' title='Links' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<b:if cond='data:team == &quot;true&quot;'> <!-- team blog profile -->
<ul>
<b:loop values='data:authors' var='i'>
<li><a expr:href='data:i.userUrl'><data:i.display-name/></a></li>
</b:loop>
</ul>

<b:else/> <!-- normal blog profile -->

<b:if cond='data:photo.url != &quot;&quot;'>
<a expr:href='data:userUrl'><img class='profile-img' expr:alt='data:photo.alt' expr:height='data:photo.height' expr:src='data:photo.url' expr:width='data:photo.width'/></a>
</b:if>

<dl class='profile-datablock'>
<dt class='profile-data'><data:displayname/></dt>

<b:if cond='data:showlocation == &quot;true&quot;'>
<dd class='profile-data'><data:location/></dd>
</b:if>

<b:if cond='data:aboutme != &quot;&quot;'><dd class='profile-textblock'><data:aboutme/></dd></b:if>
</dl>
<a class='profile-link' expr:href='data:userUrl'><data:viewProfileMsg/></a>
</b:if>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='side-wrapper'>
<b:section class='sidebar' id='sidebar4' preferred='yes'>
<b:widget id='LinkList3' locked='false' title='Templates' type='LinkList'>
<b:includable id='main'>

<b:if cond='data:title'><h2><data:title/></h2></b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Text6' locked='false' title='Lorem' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div style='clear: both;'/>
</div> <!-- end side-wrapper2 -->

<div id='main-wrapper'>
<b:section class='main' id='main' preferred='yes'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<span id='blog-pager-newer-link'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
</span>
</b:if>

<b:if cond='data:olderPageUrl'>
<span id='blog-pager-older-link'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
</span>
</b:if>

<b:if cond='data:blog.homepageUrl != data:blog.url'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
<b:else/>
<b:if cond='data:newerPageUrl'>
<a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
</b:if>
</b:if>

</div>
<div class='clear'/>
</b:includable>
<b:includable id='backlinks' var='post'>
<a name='links'/><h4><data:post.backlinksLabel/></h4>
<b:if cond='data:post.numBacklinks != 0'>
<dl class='comments-block' id='comments-block'>
<b:loop values='data:post.backlinks' var='backlink'>
<div class='collapsed-backlink backlink-control'>
<dt class='comment-title'>
<span class='backlink-toggle-zippy'>&#160;</span>
<a expr:href='data:backlink.url' rel='nofollow'><data:backlink.title/></a>
<b:include data='backlink' name='backlinkDeleteIcon'/>
</dt>
<dd class='comment-body collapseable'>
<data:backlink.snippet/>
</dd>
<dd class='comment-footer collapseable'>
<span class='comment-author'><data:post.authorLabel/> <data:backlink.author/></span>
<span class='comment-timestamp'><data:post.timestampLabel/> <data:backlink.timestamp/></span>
</dd>
</div>
</b:loop>
</dl>
</b:if>
<p class='comment-footer'>
<a class='comment-link' expr:href='data:post.createLinkUrl' expr:id='data:widget.instanceId + &quot;_backlinks-create-link&quot;' target='_blank'><data:post.createLinkLabel/></a>
</p>
</b:includable>
<b:includable id='post' var='post'>
<div class='post'>
<a expr:name='data:post.id'/>
<b:if cond='data:post.title'>
<h3 class='post-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

<div class='post-header-line-1'>
<b:if cond='data:post.dateHeader'>
<h2 class='date-header'><data:post.dateHeader/></h2>
</b:if>
</div>

<div class='post-body' expr:id='&quot;post-&quot; + data:post.id'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style>#fullpost{display:inline;}</style>
<p><data:post.body/></p>
<b:else/>
<style>#fullpost{display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<a expr:href='data:post.url'>Read more...</a>
</span>
<script type='text/javascript'>
checkFull(&quot;post-&quot; + &quot;<data:post.id/>&quot;);
</script>
</b:if>

<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

<div class='post-footer'>

<div class='post-footer-line post-footer-line-1'>
<span class='post-author'>
<b:if cond='data:top.showAuthor'>
<data:top.authorLabel/> <data:post.author/>
</b:if>
</span>
<span class='post-timestamp'>
<b:if cond='data:top.showTimestamp'>
<data:top.timestampLabel/>
<b:if cond='data:post.url'>
<a class='timestamp-link' expr:href='data:post.url' title='permanent link'><data:post.timestamp/></a>
</b:if>
</b:if>
</span>
<span class='post-backlinks post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.showBacklinks'>
<a class='comment-link' expr:href='data:post.url + &quot;#links&quot;'>,&#160;<data:top.backlinkLabel/></a>
</b:if>
</b:if>
</span>
<span class='post-comment-link'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><b:if cond='data:post.numComments == 1'>,&#160;1 <data:top.commentLabel/><b:else/>,&#160;<data:post.numComments/> <data:top.commentLabelPlural/></b:if></a>
</b:if>
</b:if>
</span>
<span class='post-icons'>
<!-- email post links -->
<b:if cond='data:post.emailPostUrl'>
<span class='item-action'>
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_email.gif'/>
</a>
</span>
</b:if>
<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>
</span>
</div>

<div class='post-footer-line post-footer-line-2'>
<span class='post-labels'>
<b:if cond='data:post.labels'>
<data:postLabelsLabel/>
<b:loop values='data:post.labels' var='label'>
<a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
</b:loop>
</b:if>
</span>
</div>

<div class='post-footer-line post-footer-line-3'/>
</div>
</div>
</b:includable>
<b:includable id='commentDeleteIcon' var='comment'>
<span expr:class='&quot;item-control &quot; + data:comment.adminClass'>
<a expr:href='data:comment.deleteUrl' expr:title='data:top.deleteCommentMsg'>
<span class='delete-comment-icon'>&#160;</span>
</a>
</span>
</b:includable>
<b:includable id='status-message'>
<b:if cond='data:navMessage'>
<div class='status-msg-wrap'>
<div class='status-msg-body'>
<data:navMessage/>
</div>
<div class='status-msg-border'>
<div class='status-msg-bg'>
<div class='status-msg-hidden'><data:navMessage/></div>
</div>
</div>
</div>
<div style='clear: both;'/>
</b:if>
</b:includable>
<b:includable id='feedLinks'>
<b:if cond='data:blog.pageType != &quot;item&quot;'> <!-- Blog feed links -->
<b:if cond='data:feedLinks'>
<div class='blog-feeds'>
<b:include data='feedLinks' name='feedLinksBody'/>
</div>
</b:if>

<b:else/> <!--Post feed links -->
<div class='post-feeds'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.allowComments'>
<b:if cond='data:post.feedLinks'>
<b:include data='post.feedLinks' name='feedLinksBody'/>
</b:if>
</b:if>
</b:loop>
</div>
</b:if>
</b:includable>
<b:includable id='comment-form' var='post'>
<div class='comment-form'>
<a name='comment-form'/>
<h3><data:postCommentMsg/></h3>
<p><data:blogCommentMessage/></p>
<iframe allowtransparency='true' expr:src='data:post.commentFormIframeSrc' frameborder='0' height='275' id='comment-editor' scrolling='auto' width='100%'/>
</div>
</b:includable>
<b:includable id='backlinkDeleteIcon' var='backlink'>
<span expr:class='&quot;item-control &quot; + data:backlink.adminClass'>
<a expr:href='data:backlink.deleteUrl' expr:title='data:top.deleteBacklinkMsg'>
<img src='http://www.blogger.com/img/icon_delete13.gif'/>
</a>
</span>
</b:includable>
<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>
<b:if cond='data:post.numComments == 1'>
1 <data:commentLabel/>:
<b:else/>
<data:post.numComments/> <data:commentLabelPlural/>:
</b:if>
</h4>

<dl id='comments-block'>
<b:loop values='data:post.comments' var='comment'>
<div class='comments-singleblock'>
<dt class='comment-author' expr:id='&quot;comment-&quot; + data:comment.id'>
<a expr:name='&quot;comment-&quot; + data:comment.id'/>
<b:if cond='data:comment.authorUrl'>
<a expr:href='data:comment.authorUrl' rel='nofollow'><data:comment.author/></a>,&#160;
<b:else/>
<data:comment.author/>,&#160;
</b:if>
<span class='comment-timestamp'>
<a expr:href='&quot;#comment-&quot; + data:comment.id' title='comment permalink'>
<data:comment.timestamp/>
</a>
<b:include data='comment' name='commentDeleteIcon'/>
</span>
</dt>
<dd class='comment-body'>
<b:if cond='data:comment.isDeleted'>
<span class='deleted-comment'><data:comment.body/></span>
<b:else/>
<p><data:comment.body/></p>
</b:if>
</dd>
<dd class='comment-footer'>

</dd>
</div>
</b:loop>
</dl>

<p class='comment-footer'>
<a expr:href='data:post.addCommentUrl' expr:onclick='data:post.addCommentOnclick'><data:postCommentMsg/></a>
</p>
</b:if>

<div id='backlinks-container'>
<div expr:id='data:widget.instanceId + &quot;_backlinks-container&quot;'>
<b:if cond='data:post.showBacklinks'>
<b:include data='post' name='backlinks'/>
</b:if>
</div>
</div>
</div>
</b:includable>
<b:includable id='main' var='top'>
<!-- posts -->
<div class='blog-posts'>

<b:include data='top' name='status-message'/>

<data:adStart/>
<b:loop values='data:posts' var='post'>
<b:include data='post' name='post'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:include data='post' name='comments'/>
<b:include data='post' name='comment-form'/>
</b:if>
</b:loop>
<data:adEnd/>
</div>

<!-- navigation -->
<b:include name='nextprev'/>

<!-- feed links -->
<b:include name='feedLinks'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='side-wrapper1'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
<b:widget id='Label2' locked='false' title='Labels' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div expr:class='&quot;widget-content &quot; + data:display + &quot;-label-widget-content&quot;'>
<b:if cond='data:display == &quot;list&quot;'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span dir='ltr'>(<data:label.count/>)</span>
</b:if>
</li>
</b:loop>
</ul>
<b:else/>
<b:loop values='data:labels' var='label'>
<span expr:class='&quot;label-size label-size-&quot; + data:label.cssSize'>
<b:if cond='data:blog.url == data:label.url'>
<span expr:dir='data:blog.languageDirection'><data:label.name/></span>
<b:else/>
<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>
</b:if>
<b:if cond='data:showFreqNumbers'>
<span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</b:if>
</span>
</b:loop>
</b:if>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>
<b:widget id='Text5' locked='false' title='Lorem' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<!-- spacer for skins that sets sidebar and main to be the same height-->
<div style='clear: both;'/>

</div> <!-- end content-wrapper -->

<div id='middleads-wrapper'>
<b:section class='middleads2' id='middleads2' preferred='yes'/>
</div>

<div style='clear: both;'/>

<div id='lower-wrapper'>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar1' preferred='yes'>
<b:widget id='Text2' locked='false' title='About This Blog' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar2' preferred='yes'>
<b:widget id='Feed1' locked='false' title='Our Blogger Templates' type='Feed'>
<b:includable id='main'>
<h2><data:title/></h2>
<div class='widget-content' expr:id='data:widget.instanceId + &quot;_feedItemListDisplay&quot;'>
<span style='filter: alpha(25); opacity: 0.25;'>
<a expr:href='data:feedUrl'><data:loadingMsg/></a>
</span>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div id='lowerbar-wrapper'>
<b:section class='lowerbar' id='lowerbar3' preferred='yes'>
<b:widget id='BlogArchive1' locked='false' title='Blog Archive' type='BlogArchive'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content'>
<div id='ArchiveList'>
<div expr:id='data:widget.instanceId + &quot;_ArchiveList&quot;'>
<b:if cond='data:style == &quot;HIERARCHY&quot;'>
<b:include data='data' name='interval'/>
</b:if>
<b:if cond='data:style == &quot;FLAT&quot;'>
<b:include data='data' name='flat'/>
</b:if>
<b:if cond='data:style == &quot;MENU&quot;'>
<b:include data='data' name='menu'/>
</b:if>
</div>
</div>
<b:include name='quickedit'/>
</div>
</b:includable>
<b:includable id='flat' var='data'>
<ul>
<b:loop values='data:data' var='i'>
<li class='archivedate'>
<a expr:href='data:i.url'><data:i.name/></a> (<data:i.post-count/>)
</li>
</b:loop>
</ul>
</b:includable>
<b:includable id='menu' var='data'>
<select expr:id='data:widget.instanceId + &quot;_ArchiveMenu&quot;'>
<option value=''><data:title/></option>
<b:loop values='data:data' var='i'>
<option expr:value='data:i.url'><data:i.name/> (<data:i.post-count/>)</option>
</b:loop>
</select>
</b:includable>
<b:includable id='interval' var='intervalData'>
<b:loop values='data:intervalData' var='i'>
<ul>
<li expr:class='&quot;archivedate &quot; + data:i.expclass'>
<b:include data='i' name='toggle'/>
<a class='post-count-link' expr:href='data:i.url'><data:i.name/></a>
<span class='post-count' dir='ltr'>(<data:i.post-count/>)</span>
<b:if cond='data:i.data'>
<b:include data='i.data' name='interval'/>
</b:if>
<b:if cond='data:i.posts'>
<b:include data='i.posts' name='posts'/>
</b:if>
</li>
</ul>
</b:loop>
</b:includable>
<b:includable id='toggle' var='interval'>
<b:if cond='data:interval.toggleId'>
<b:if cond='data:interval.expclass == &quot;expanded&quot;'>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy toggle-open'>&#9660;&#160;</span>
</a>
<b:else/>
<a class='toggle' href='javascript:void(0)'>
<span class='zippy'>
<b:if cond='data:blog.languageDirection == &quot;rtl&quot;'>
&#9668;&#160;
<b:else/>
&#9658;&#160;
</b:if>
</span>
</a>
</b:if>
</b:if>
</b:includable>
<b:includable id='posts' var='posts'>
<ul class='posts'>
<b:loop values='data:posts' var='i'>
<li><a expr:href='data:i.url'><data:i.title/></a></li>
</b:loop>
</ul>
</b:includable>
</b:widget>
</b:section>
</div>

<div style='clear: both;'/>

<div id='lowerads-wrapper'>
<b:section class='lowerads' id='lowerads' preferred='yes'/>
</div>

<div style='clear: both;'/>

</div> <!-- end lower-wrapper -->

<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>

<b:include name='quickedit'/>
</b:includable>
</b:widget>
</b:section>
</div>

<div style='clear: both;'/>

</div> <!-- end blog-wrapper -->

<div id='bottomads-wrapper'>
<b:section class='bottomads' id='bottomads' preferred='yes'/>
</div>

</div> <!-- end outer-wrapper -->

<!-- Please don't remove the credits below as we spent many hours creating this blogger template. It's only reasonable that you keep the link to Ourblogtemplates.com. -->

<div id='credit'>

<div id='creditleft'>
<p><b>&#160;&#160;&#169; <a href='http://www.ourblogtemplates.com/'>Blogger template</a> <i>Noblarum</i> by <a href='http://www.ourblogtemplates.com/'>Ourblogtemplates.com</a> 2009</b></p>
</div>

<div id='creditright'>
<p><b>Back to <a href='#outer-wrapper'>TOP</a>&#160;&#160;</b></p>
</div>

</div> <!-- end credit -->

</body>
</html>

Read more...