Free Designer Blogger template: Tinted Panes

by Greenlava

Tinted Panes comes with many additional custom features not available in templates offered by Blogger. At the same time it still retains (Blogger) Designer Template’s functionalities and ease of customization.  tinted panes free designer Blogger template_2


Features

This template comes with a few of the most sought after features. They are:

  1. SEO optimized page title, as explained in SEO friendly Blogger page title.
  2. Auto read more with thumbnail
    With adjustable thumbnail size and word count for the summary. (You have to edit template HTML to do this).
    Tip:
    By default, posts are actually loaded in their entirety on summary pages, even though you only see the summary. To make the browser only load the summary, you need to insert Blogger jump break. Make sure you include an image (if the post has one) and enough text for the summary before inserting the break.
    (It will not create double jump links because I have removed the original jump link code from the template)
  3. Clutter-free static pages 
    Sidebars and footers are removed from static pages. The post area is then widened to fill up the entire page width.
  4. Numbered comments
    Comments are numbered for easier referencing. To hide comment numbers, change the color to blend with comments background color.
  5. Fully customizable using Template Designer
    Tinted Panes allows you to customize the layout, number of columns, widths, fonts, backgrounds and colors right from the inside of the Template Designer.
    You are allowed to change almost every setting in Template Designer, with one exception –DO NOT SWITCH TO ANOTHER TEMPLATE (Template > Customize > Templates). Changing the template will reset it to Blogger default settings and  will remove the added features.


How to install

  1. Download the template (.txt file) and open it in a text editor (eg. Notepad).
  2. Right-click, Select All and copy.
  3. On Blogger, go to Template > Edit HTML > Proceed.
  4. Right-click inside the code window, Select All and paste in the code.
  5. Preview before saving.
  6. To keep existing widgets, click Keep Widgets button.
  7. View your blog.
  8. Rearrange the widgets if necessary.

Enjoy!

45 comments to "Free Designer Blogger template: Tinted Panes"

gamerap,  February 15, 2011 at 3:39 AM    

Good job :)

Beben Koben,  February 15, 2011 at 4:22 AM    

so simple but nice art falue master...\m/

Hạnh Beauty,  February 15, 2011 at 12:01 PM    

nice templates, thanks your share!

cheaperbooks,  February 15, 2011 at 12:27 PM    

Very nice. I like the design. it's similar to my current blog. Very neat & easy to read. can the background be changed to suit the contents & theme of our blog?
Thanks.
http://cheaper-books.blogspot.com

Greenlava,  February 15, 2011 at 1:06 PM    

@gamerap,Beben and Rùa Biển
You're welcome guys :)

@cheaperbooks
Yes you can change them in Design > Template Designer, just like any other Designer template.

cheaperbooks,  February 16, 2011 at 9:54 AM    

Can the width be increased/ extended like the wide templates? Perhaps you could have the exact template but make the sides wider for us?
I'm tempted to change my template.
Thanks :)

Greenlava,  February 16, 2011 at 3:20 PM    

@cheaperbooks
Changing column widths is easy. Just follow Template Designer: How to change column width

cheaperbooks,  February 17, 2011 at 9:49 AM    

Thanks Greenlava. Forgot that it's easy to change width with the new template designer because my current template is a bit different & requires some codes.

AkuDeqja,  February 18, 2011 at 1:33 AM    

hi greenlava

once i changed my template into tinted panes, my navigation tabs width suddenly changed also.become too smaller at left hand side,and looks weird. how i do i do to adjust the width?

Greenlava,  February 18, 2011 at 7:08 AM    

@AkuDeqja
Replace the navigation tabs with Pages gadget.
In Page Elements, click Add A Gadget and select Pages. A new Home tab (with proper formatting) will be added. After that go to Posting > Edit Pages and create your pages. One such page would be your About Me page -copy paste your existing about me post into a page.
Once you publish a page, its tab will be added into the Pages bar automatically.

AkuDeqja,  February 18, 2011 at 1:23 PM    

i did it. Thax greenlava!

but one more question, let say i created page "healthy tips" so i already post and published one of my healthy tips today, and let say for the next day i want to add more tips in my page "healthy tips" example tips 1, tips 2..... so how to do it ? (healthy tips). im kinda blur :) please help me.

Greenlava,  February 19, 2011 at 11:33 AM    

@AkuDeqja
Read this: Adding a tab that shows all posts under a category

zulkbo,  February 20, 2011 at 11:29 PM    

salam ..
memang cantik dan mesra SEO template ni
saya gunakan di blog percubaan saya..naik
SEO flow nya..masih teragak2 nak tukar
di blog utama

Greenlava,  February 21, 2011 at 7:53 AM    

@zulkbo
Test dulu sampai puashati, pastu baru tukar.

jenie=),  March 1, 2011 at 9:33 AM    

great post...i am recommending you to my sister, new to blogging for whatever she needs to learn.

and such is my reason AGAIN for being here. reading, learning, and hoping you can help me with my most recent problem. IMAGE SHACK!!! http://stream.imageshack.us/content.php?page=register_domain. It suddenly popped in two of my blogs and have this ugly picture of a frog with some kind of advertisement. how can i take it off? i noticed other blogs having them too. how can they do that? and they just choose randomly which blog? are they not over stepping their bounds with just suddenly doing that?

please, i need your response asap. thanks.

Greenlava,  March 1, 2011 at 3:00 PM    

@jenie=)
I think it affects all sites.
You have to register your domain here: http://stream.imageshack.us/content.php?page=register_domain.
They will review before reinstating your blog. How long will it take? I don't know.
This is one of the reasons I host all my pictures on Blogger (even the buttons, background images etc.). Here's how:
Free unlimited bandwidth image hosting for Blogger blogs

JENIE=),  March 3, 2011 at 12:23 PM    

good to hear that. but really? then how come it just suddenly disappeared without me doing anything??? i thought there is this one blog that hacked my site. His website actually appeared on my site with the frog advertisement and asked him about it. right after, those frogs vanished. a coincidence perhaps?

im glad though that its all gone. still, your advise it great. will browse through it now. thanks a bunch!

Steve,  April 13, 2011 at 4:16 PM    

I have applied the new template, but I now have no blogger edit/navigation buttons, ie to posts anything!

Steve,  April 13, 2011 at 4:27 PM    

Ok if I go to my dashboard by clicking blogger at bottom of the page, I can add posts. But page posts will only edit in html.

JL,  May 9, 2011 at 3:12 PM    

Hi,
I'm using this template and like it very much.
I would like to replace the area of grey color on single static pages (not all) by an image.
Is it possible?
Tried to change the background, but the grey area is obviously not the background.

Greenlava,  May 10, 2011 at 12:52 AM    

@JL
Which background is that?
If it's the background of the post area, add this code in the page's HTML (via post editor).
[style]
.main-outer {background: url("PUT IMAGE URL HERE") no-repeat;
}
[style]

If it's the (darker grey) blog background, add this instead:
[style]
body {background: url("PUT IMAGE URL HERE") no-repeat;
}
[style]

JL,  May 10, 2011 at 2:00 PM    

Hi Greenlava,

thanks for your immediate reply.
Since I started my blog, yours have been my favourite place to search for some inspiration. Hope, I can find a solution here again.
Both formula are working, but not in the way I like.
First one changes the background around the post area.
The second one changes the background of the whole screen.
What I'm looking for, is to change the grey area with rounded corners which contains the content.
I only want to do that on some single static pages, to adjust the background a little bit to the topic.
Any idea?
Thanks

JL,  May 10, 2011 at 2:06 PM    

Hi again,

I just realised that my description might be confusing.
I want to replace the color of the post area (grey with rounded corners) by an image which should be repeated if necessary. It's rather more some kind of a pattern or a texture than an image.

Greenlava,  May 10, 2011 at 5:26 PM    

@JL
Use this snippet then:
[style]
.post-outer {background: url("PUT IMAGE URL HERE") repeat;
}
[style]

remember this snippet should be added into your page content HTML (Posting > Edit Pages...), not your template HTML (Design > Edit HTML).

JL,  May 10, 2011 at 7:01 PM    

That's it!

Thank you very much. Very helpful.
I'm still thinking about another idea.
I don't want to put more than 10 posts on my homepage.
Is it possible to extend the read more feature with thumbnail to a second ore even more pages each containing 10 posts? Like hompage 1, homepage 2 and so on.
It's only an idea. Not really important.
I would only try it, if there is a simple way. I'm not an expert in HTML or CSS. That's wy I'm using "Blogger"!
Anyway, thank you again.
Your blog is in the first position of the blogs I recommend.

JL,  May 10, 2011 at 8:08 PM    

Hi,
sorry about my last question.
Just realised the homepage is extendet automatically.
The older posts are showing up in the way as the ones on the first site.

cheaperbooks,  May 24, 2011 at 9:29 PM    

Hi Greenlava,

How do i remove the date/day above the post since i can add it at the bottom e.g in your demo - Posted by Greenlava at 9:19 PM 4 comments. What codes need to be removed?

Thanks

Greenlava,  May 27, 2011 at 9:52 PM    

@cheaperbooks
That's the date header.
To hide, go to Design > Template Designer > Advanced > Add CSS and add this CSS snippet:

.date-header {display:none;}

cheaperbooks,  May 27, 2011 at 10:27 PM    

Thank you Greenlava. I've added CSS. Wow, it looks really good and neat. Is there a replacement for Yahoo Pipes? It takes time to load. Ocassionally, it doesn't load at all.

Thank you so much for all your help.

Greenlava,  June 2, 2011 at 12:36 PM    

@cheaperbooks
If you want to keep the alphabetical order, I'm afraid there's no substitute for now.

Williams Adams,  June 16, 2011 at 8:53 AM    

Hi,i don't know what the probem might be,i tried uploading the template but it kept saying unable to save template and that the template is not properly formed.Please how do i go about it?.
Thanks.

Greenlava,  June 16, 2011 at 6:04 PM    

@Cassei
Maybe you want to try it on a dummy blog first.

Templatesall,  August 29, 2011 at 12:13 AM    

Can the width be increased/ extended like the wide templates? Perhaps you could have the exact template but make the sides wider for us?
I'm tempted to change my template.
Thanks :)

Can I publish on my blog Download And Submit Templates

Greenlava,  August 30, 2011 at 6:51 PM    

@Templatesall
Sidebar widths can be adjusted in Design > Template Designer > Adjust widths.
Yes you can publish it on your blog.

Anonymous,  January 2, 2012 at 11:20 AM    

Can you show where to set up the word count in the html and how to install the jump . thanks

Greenlava,  January 4, 2012 at 5:32 PM    

@Anonymous
Please refer to this tutorial: Blogger Auto Read more with thumbnail
I use the code from that tutorial in this template.

Endi,  April 8, 2012 at 6:40 PM    

thgis template very usefull i like it.. :)

pipoq,  June 2, 2012 at 3:50 PM    

sy nak tau, kat bahagian komen memang tak boleh nak ubahsuai ye ?

contohnya macam nak gunakan intense debate punya komen ke, atau tukar gaya komen lain sikit.

http://pipoq.blogspot.com

Greenlava,  June 4, 2012 at 11:14 AM    

@pipoq
Boleh, no problem.

Vukoc,  August 21, 2012 at 12:39 AM    

Nice, great template! its simple but designed!
can the whole header replace by image?

Greenlava,  August 22, 2012 at 9:08 PM    

@Vukoc
Yes you can. Go to Layout, click Edit on the Header gadget and upload your image.

Jan,  October 7, 2012 at 12:32 PM    

I am getting to step three and then not seeing the Browse button to choose a template from you computer. Where do I find Browse?
All help will be greatly appreciated.

I get so frustrated with blogger. Just when I figure out how it works they change everything
I am making a practice blog to learn on. My regular blog had Pages at the top that were linked to my labels. I used your tutorial to
put the label links on the pages, but after saving they change back to javascript and not my label addys it put for each page. So I thought I would try the tutorial to make a blog with Panes at the top.

Greenlava,  October 7, 2012 at 9:43 PM    

@Jan
Please follow the following instructions:
1. Open the downloaded file in Notepad.
2. Select All and copy.
3. Go to Template > Edit HTML > Proceed.
4. Right-click inside the code window, Select All and paste in the code.
5. Preview before saving.

Nickie O'Hara,  April 8, 2013 at 2:12 AM    

Hi there - great template. Is there a way to have the first post in full and then the others as snippets like in your "Simply Faster" template. I prefer the boxed look of this template but like the fact that the latest post is in full in the other template.

Thanks

Johny,  May 27, 2013 at 1:38 PM    

Amazing Template, Fast loading and clean design..

Post a Comment

We love to hear from you! Leave us a comment.

To ensure proper display, HTML/XML/Javascript need to be escaped first using this escape tool.