If you are using the templates here at OBT, it is best to edit the posts, layout, and page elements in Firefox. They have been designed in Firefox. But they can be viewed in all new-version browsers.
OBT User Review:
You have the best templates! I've been downloading and dressing them up like dolls! :)
I'm not a designer nor am I coder. I'm just your average person who wants a unique but nice looking blog. You've designed these amazing templates so that changing the colors, fonts, backgrounds is sooooo easy!
Your site is just what I was looking for because Blogger templates -- well they're so cookie cutter. But with yours -- well it feels like the possibilities are endless!
Thank you so much for all your hard work!- Tanya Barnes
OBT User Review:
This is a beautiful thing! I've looked at hundreds of really nice templates many of them have some things I'm looking for but missing others, some are not developed enough for the Blogger editing tool. This one has everything and makes it very flexible and easy to use in Blogger. I'm familiar enough with coding that I can tweak most layouts but sometimes it's nice to be able to use Blogger's editing tool. Thank you so much for taking the time to REALLY make a template that is ACTUALLY for Blogger!- Lisa
Werd is an extremely flexible template with flexible multiple columns (2, 4, 5, 6, or 7 columns). You can change the columns, all background and font colors, and font types without doing any coding.
On The Road is an extremely flexible template with flexible multiple columns (2, 4, 5, or 7 columns). You can change the columns, all background and font colors, and font types without doing any coding.
The Beach 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.
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.
Aneesh of Blogger Widgets has developed a new "Related Posts" script for Blogger which displays thumbnails of images in addition to linked post titles:
Download your copy of The Blogger Template Book
Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)
If you read any popular blogging tips online (like on this site), WordPress is often the software behind the site. There’s a good reason for it too. WordPress is the best software to easily build a site and a blog without much technical know how. An increasing number of marketers are finding that it’s an [...]
Read More... [Source: eBlog Templates - Posted by FreeAutoBlogger]
If you haven’t heard the name Darren Rowse before then now is the time to listen. He’s a very popular blogger who makes 6-figures a year on his Problogger site and definitely knows his stuff. A while back he put together a month long series called “31 Days to Build a Better Blog” and it [...]
Read More... [Source: eBlog Templates - Posted by FreeAutoBlogger]
Displaying avatars beside comments in our blogs has been a long anticipated feature. Today, the Blogger Team announced that this feature is now enabled for Blogger blogs, allowing us to see the profile image or avatar of those leaving comments on our posts:
Today we have extended embedded comments to display profile images next to the comments that your visitors write. Though profile images have been available with the other commenting options, we are happy to bring them to embedded comments as part of the Blogger Birthday feature series (via Blogger Buzz)
Depending on your particular template, you may discover this is<dl id='comments-block'>
<div id='comments-block'> instead.Note: if your template included<dl expr:class='data:post.avatarIndentClass' id='comments-block'>
div instead of dl, leave this intact and replace all other elements of the line instead.Immediately before this line, paste the following section of code:<a expr:name='data:comment.anchorName'/>
If you use an "author comment highlighting" hack in your template, you will need to search for a second instance of
<b:if cond='data:comment.favicon'>
<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
</b:if>
<a expr:name='data:comment.anchorName'/>
<b:if cond='data:blog.enabledCommentProfileImages'>
<data:comment.authorAvatarImage/>
</b:if>
<a expr:name='data:comment.anchorName'/> and paste the code a second time.
It is also possible to style these images by adding declarations to the<img expr:src='data:comment.favicon' height='35px' style='margin-bottom:-2px;' width='35px'/>
<b:skin> section of our templates using the following classes:Download your copy of The Blogger Template Book
Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)
<!-- more --> where you'd like the jump link to appear.<data:post.body/> <data:post.body/>. If this is the case, you need to edit the section which has <b:if cond='data.blog.url != data:blog.homepageUrl> a line or two above this.<data:post.body/> line, add the following few lines of code:<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><data:post.jumpText/></a>
</div>
</b:if >
We could also add a :hover property with different colors for the background and text to create a different effect when a reader hovers over the "read more" text:.jump-link a {
background: #ffff00;
padding: 3px;
color: #fff;
}
If you're fairly confident with CSS, you could easily adapt these examples to include background images, rounded corners, and indeed any property which would work with a link in the post..jump-link a:hover {
background: #000000;
padding: 3px;
color: #ccc;
}
<data:post.jumpText/> with image tags, like this:<b:if cond='data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"'><img src="url_of_image" border="0" alt="Alternative text" /></a>
</div>
</b:if >]]</b:skin> tag using your browser's search function.<b:if cond='data:blog.pageType != "item"'>
<style>
.post-body img {
img {
max-width: 100px;
width: expression(this.width > 100 ? 100: true);float: right;
}<style></b:if>
Download your copy of The Blogger Template Book
Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)
<script expr:src='data:blog.homepageUrl + "feeds/posts/default/-/Featured?orderby=published&alt=json-in-script&callback=showrecentpostswiththumbs"'/> <address class='vcard body' id='about'>
<span class='primary'>
<strong><a class='fn url' expr:href='data:blog.homepageUrl'><data:blog.title/></a></strong>
<span class='role'>One Line Description</span>
</span><!-- /.primary -->
<img alt='Avatar Logo' class='photo' src='http://lh5.ggpht.com/_xn2gmPb9TfM/SqTYIFh4mQI/AAAAAAAAFXI/MjMhfBmc9To/s800/blogger-logo.jpg' width='50'/>
<span class='bio'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span>
</address><!-- /#about --><a href="url_here">link text</a>), as other CSS properties may cause the section's appearance to be misaligned.
Download your copy of The Blogger Template Book
Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)
<style type="text/css">
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,
#feedControl .gf-author,
#feedControl .gf-spacer,
#feedControl .gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/
google.load("feeds", "1");
function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();
// Add blogger label feeds.
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.setNumEntries(-1);
// Draw it.
feedControl.draw(document.getElementById("content"));
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div><style> section at the head of this code prevents the summary (usually printed by the Feed Control script) being displayed, so that only the linked title is displayed on the sitemap page. feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAMEwhere LABEL-NAME is the name of the label you are using in your blog.
or
http://www.yourblog.com/feeds/posts/-/LABEL-NAME
http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100If any of your labels include spaces, you must replace the spaces with %20 instead.
http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20TemplateFinally, the URLs of your label feeds are case sensitive. If you use any capital letters in the names of your Blogger labels, you will need to match these in the label feed URLS.
<style type="text/css">Once you have finished adding the Label feed URLs and titles to your Sitemap post, you can publish your post and enjoy using your new Blogger sitemap!
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,.gf-author,.gf-spacer,.gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY-API-KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/
google.load("feeds", "1");
function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();
// Add blogger label feeds.
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20News%20and%20Issues?max-results=100", "Blogger News and Issues");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Gadgets?max-results=100", "Gadgets");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Free%20Blogger%20Templates?max-results=100", "Free Blogger Templates");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Resources?max-results=100", "Resources");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Custom%20Domains?max-results=100", "Custom Domains");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Images%20Icons%20and%20Badges?max-results=100", "Images and Icons");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags?max-results=100", "Labels, Categories and Tags");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Monetize%20Your%20Blog?max-results=100", "Monetize Your Blog");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/RSS%20Feeds%20and%20Syndication?max-results=100", "RSS Feeds and Syndication");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/SEO%20and%20Blog%20Traffic?max-results=100", "SEO and Blog Traffic");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20Template%20Resources?max-results=100", "Template Resources");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Announcements?max-results=100", "Blogger Buster Announcements");
feedControl.setNumEntries(-1);
// Draw it.
feedControl.draw(document.getElementById("content"));
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div>
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");If your label includes more than 200 posts, you can add a third variable where the start index is 201, and so on.
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
Download your copy of The Blogger Template Book
Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)
<style type="text/css">
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,
#feedControl .gf-author,
#feedControl .gf-spacer,
#feedControl .gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/
google.load("feeds", "1");
function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();
// Add blogger label feeds.
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");
feedControl.setNumEntries(-1);
// Draw it.
feedControl.draw(document.getElementById("content"));
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div><style> section at the head of this code prevents the summary (usually printed by the Feed Control script) being displayed, so that only the linked title is displayed on the sitemap page. feedControl.addFeed("http://URL-OF-YOUR-LABEL-FEED?max-results=100", "TITLE-OF-YOUR-LABEL");http://your-blog.blogspot.com/feeds/posts/-/LABEL-NAMEwhere LABEL-NAME is the name of the label you are using in your blog.
or
http://www.yourblog.com/feeds/posts/-/LABEL-NAME
http://www.bloggerbuster.com/feeds/posts/-/Gadgets?max-results=100If any of your labels include spaces, you must replace the spaces with %20 instead.
http://www.bloggerbuster.com/feeds/posts/-/Customize%20your%20Blogger%20TemplateFinally, the URLs of your label feeds are case sensitive. If you use any capital letters in the names of your Blogger labels, you will need to match these in the label feed URLS.
<style type="text/css">Once you have finished adding the Label feed URLs and titles to your Sitemap post, you can publish your post and enjoy using your new Blogger sitemap!
/**
* Suppress everything except for title
*/
#feedControl .gf-snippet,.gf-author,.gf-spacer,.gf-relativePublishedDate {
display : none;
}
</style>
<script type="text/javascript" src="http://www.google.com/jsapi?key=MY-API-KEY"></script>
<script type="text/javascript">
/*
* How to use the Feed Control to grab, parse and display feeds.
*/
google.load("feeds", "1");
function OnLoad() {
// Create a feed control
var feedControl = new google.feeds.FeedControl();
// Add blogger label feeds.
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20News%20and%20Issues?max-results=100", "Blogger News and Issues");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Gadgets?max-results=100", "Gadgets");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Free%20Blogger%20Templates?max-results=100", "Free Blogger Templates");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Resources?max-results=100", "Resources");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Custom%20Domains?max-results=100", "Custom Domains");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Images%20Icons%20and%20Badges?max-results=100", "Images and Icons");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Labels%20Categories%20and%20Tags?max-results=100", "Labels, Categories and Tags");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Monetize%20Your%20Blog?max-results=100", "Monetize Your Blog");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/RSS%20Feeds%20and%20Syndication?max-results=100", "RSS Feeds and Syndication");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/SEO%20and%20Blog%20Traffic?max-results=100", "SEO and Blog Traffic");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Blogger%20Template%20Resources?max-results=100", "Template Resources");
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Announcements?max-results=100", "Blogger Buster Announcements");
feedControl.setNumEntries(-1);
// Draw it.
feedControl.draw(document.getElementById("content"));
}
google.setOnLoadCallback(OnLoad);
</script>
<div id="content">
Loading, please wait...</div>
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?max-results=100", "Customize your Blogger Template");If your label includes more than 200 posts, you can add a third variable where the start index is 201, and so on.
feedControl.addFeed("http://www.bloggerbuster.com/feeds/posts/default/-/Customize%20your%20Blogger%20Template?start-index=101&max-results=100", "Customize your Blogger Template (Part 2)");
Download your copy of The Blogger Template Book
Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)
| A "compact" button appears like this |  |
| A "modular" button appears like this: |  |
<data:post.body/><b:if cond = 'data:blog.pageType == "item"'>
<!-- Here is where to paste the JavaScript for the button -->
</b:if>
<b:if cond...> and </b:if> tags which we previously added in the template code.<b:if cond = 'data:blog.pageType == "item"'> <!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1020104213976883876" style="width:100%;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '21';
skin['BUTTON_STYLE'] = 'compact';
skin['BUTTON_TEXT'] = 'Recommend it!';
skin['BUTTON_ICON'] = 'heart';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderOpenSocialGadget(
{ id: 'div-1020104213976883876',
url:'http://www.google.com/friendconnect/gadgets/recommended_pages.xml',
height: 21,
site: '06135972569882299778',
'view-params':{"pageUrl":location.href,"pageTitle":(document.title ? document.title : location.href),"docId":"recommendedPages"}
},
skin);
</script>
</b:if>
Download your copy of The Blogger Template Book
Your complete guide to choosing, installing and optimizing Blogger templates (PDF 114 pages)
Posty
Komentarze
