TEMPLATES
Friday, November 30, 2007
Popularity Rankings Based on How Readers Rate Your Blog Posts
Outbrain, that provides the excellent star ratings widget for Blogger and other blogs, has added some new features that makes this service almost irresistible for most bloggers.
First, you can now install the star rating widget to your RSS feeds that are syndicated via FeedBurner. That means your blog subscribers, who always stay inside RSS readers, will still be able to rate your blog posts.
The second feature is the Ratings Intelligence Reports for your blog - Outbrain aggregates ratings data of your blog posts from both the blog and the associated RSS feeds.
It then prepares a “real-time” report showing data about how your audience rated each post and a popularity ranking (what your audience likes best). If you want something similar for your own blog, install this JavaScript code in your blog template, then add this feedflare to your FeedBurner feed (optional) and finally register your blog to enable Outbrain gather your Blog Intelligence reports. And Outbrain ratings widget is also available with FeedBlitz RSS to Email newsletters - so that makes it possible even for your email subscribers to rate your blog posts. It’s all pretty simple but at the same time, extremely useful.
Tuesday, November 27, 2007
Blogger Template : Tech Geek
Tech Geek is an simple and clean 3 column blogger template made for information technology style of blogs. Of course it can be used for any other purpose as well.
Download the template here
Preview on my demo blog
To edit the blog slogan find "Tech Geek" inside edit html mode and change to whatever you like.
To change the blog description find "Bring it to the point" inside edit html mode and change to whatever you like.
Blogger Template : Celebrity
Celebrity is my newest wordpress to blogger port. This template is ideal for celebrity style of blogs. In the rar package are the original header and footer psd files allowing you further individual styling.
Download the template here
Preview the template here
To edit blog description find "my blog description" inside edit html mode and change to your blog description.
To edit the navigation find "Navigation" and edit the links on the next few lines.
Tuesday, November 20, 2007
Blogger Template : Christmas
Christmas is a holiday theme with a vivid red and green color scheme. The header graphic depicts a wintertime forest of white Christmas trees with a subtle image of Santa Claus and his reindeer flying over the snowy treetops in the distance on Christmas Eve. You can even make out the faint glow of Rudolf's nose!
Download the template here
Preview the template on my small Christmas store
you are welcome to buy something btw :)
To edit blog slogan and description find "My blog slogan" and "my blog description" inside the edit html mode and change it to whatever you like.
Have fun
Sunday, November 18, 2007
Related posts widget for blogger
This widget or hack call it how you like is often requested by fellow bloggers.
Here is the tutorial how to install related posts based on labels underneath your blog posts.
First of all you must know that it won`˙t work if your labels use any reserved url characters.
Go to templates edit html and click on expand widget templates and copy the whole code inside a plain text editor like notepad. You might consider backing up your template if something runs wrong.
Now paste the following in the page header :
<script type="text/javascript">
//<![CDATA[
var relatedTitles = new Array();
var relatedTitlesNum = 0;
var relatedUrls = new Array();
function related_results_labels(json) {
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
relatedTitles[relatedTitlesNum] = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
relatedUrls[relatedTitlesNum] = entry.link[k].href;
relatedTitlesNum++;
break;
}
}
}
}
function removeRelatedDuplicates() {
var tmp = new Array(0);
var tmp2 = new Array(0);
for(var i = 0; i < relatedUrls.length; i++) {
if(!contains(tmp, relatedUrls[i])) {
tmp.length += 1;
tmp[tmp.length - 1] = relatedUrls[i];
tmp2.length += 1;
tmp2[tmp2.length - 1] = relatedTitles[i];
}
}
relatedTitles = tmp2;
relatedUrls = tmp;
}
function contains(a, e) {
for(var j = 0; j < a.length; j++) if (a[j]==e) return true;
return false;
}
function printRelatedLabels() {
var r = Math.floor((relatedTitles.length - 1) * Math.random());
var i = 0;
document.write('<ul>');
while (i < relatedTitles.length && i < 20) {
document.write('<li><a href="' + relatedUrls[r] + '">' + relatedTitles[r] + '</a></li>');
if (r < relatedTitles.length - 1) {
r++;
} else {
r = 0;
}
i++;
}
document.write('</ul>');
}
//]]>
</script>
Scroll down to the blog1 widget, and find the following:
<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 != "true"'>,</b:if>
</b:loop>
</b:if>
and change it to :
<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 != "true"'>,</b:if>
<b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=10"' type='text/javascript'/>
</b:if>
</b:loop>
</b:if>
Save the code back to your template html and go to page elements and add a new HTML/Javascript widget underneath the main blog posts widget with this code :
<script type="text/javascript">
removeRelatedDuplicates();
printRelatedLabels();
</script>
Now go back to Template -> Edit HTML, check the check box to expand the template code, and find the HTML/Javascript widget you just added. It'll look something like the following. Add the lines in bold:
<b:widget id='HTML13' locked='false' title='Related Posts' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.pageType == "item"'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>
There's a few numbers you can tweak to show more or less related posts. In the first code box there is a part that says i < 20 and the 3rd code box has a part that says max-results=10. You can play around with these numbers if you want. After playing around a little these numbers seem to give a good trade-off between the speed of page-load and the number of related posts displayed.PurpleMoggy
Blogger Template : The Hobbit
This is a really great template for all you lord of the rings and hobbit fans.
Download the template here
Preview the template here
For template setup open read more
There is only one thing you need to edit inside the edit html screen.
Find :
"Change this to your site slogan"
and enter your slogan.
On the next line find :
"My blog description"
and change this to your blog description.
Saturday, November 17, 2007
Blogger Template : Visionary
Another great blogger template is ready to be downloaded. This one is an port of the visionary wordpress template made by Justin Tadlock. Besides being ultra cool for magazine type of blogs it features animated sidebar tabs.
Download this template here
Preview the template here
For template setup open read more
"
To change the navigation links and titles edit the template inside the edit html area of the administartion panel.
Find :
<!-- BEGIN TOP-NAV / FEEL FREE TO ADD MORE LINKS TO THIS PAGE -->
and change the links and titles for the top navigation on the next few lines.
Find :
<!-- BEGIN MAIN-NAV.PHP -->
and change the links and titles for the main navigation on the next few lines.
The 4 tabs can`t be displayed as page elements so you have to edit the code for every tab yourself.
Find :
<div class='menu tabbed'>
<ul class='tabs'>
<li class='t1'><a class='t1 tab' title='Tab 1'>Tab 1</a></li>
<li class='t2'><a class='t2 tab' title='Tab 2'>Tab 2</a></li>
<li class='t3'><a class='t3 tab' title='Tab 3'>Tab 3</a></li>
<li class='t4'><a class='t4 tab' title='Tab 4'>Tab 4</a></li>
</ul>
and change the red text to your tab names.
Find :
"some content tab 1" to 4 and place whatever you like in those tabs
Youtube Download Video Widget For Blogger
I`v discovered a nice tutorial how to add a youtube video downloads widget to your blog. There are 2 versions 400px and 200px width.
Find out how to install this widget here
Tuesday, November 13, 2007
Server Problems
We are facing server problems, some of the downloads are not available at the moment. Please hold on and try later to download templates. I will fix those issues as soon as possible.
Thanks
Edit : 14.11 - The server seems to be stable no problems at the moment
Monday, November 12, 2007
ShareThis for blogger
If you are on Classic Blogger template, ShareThis will work without problems but for the XML templates of new blogger, consider replacing characters like <, & and > with their respective HTML codes (<, & and >).
ShareThis, the green sharing icon which you’ll probably find in most WordPress blogs, is now available for Blogger platform or any other website.
With a single line of Javascript code, you can help website visitors promote your blog content on social websites like Digg, Delicious, Facebook, etc. Other than social web sharing, ShareThis will let readers forward your stuff via email/SMS while staying on the page.
Now the most wonderful part about ShareThis - when readers share your web content, ShareThis tracks and provides your this information through charts and reports.
You therefore know what content is popular among your readers and how they are interacting with various social services.AddThis also provides something similar in a drop-down CSS menu but with ShareThis, you can decide what services should appear in the menu and their order.
Get ShareThis | Developer Blog
Add contact us form with spam protection to your blog
Your blogger blog platform can be very limited if you don`t know how to add extended features. Remembering the old wise MC Giver making bombs out of chewing gum I was motivated to research how to add an secure and nice looking contact us form directly inside the blog post.
As we all now you cant play much inside the editor so we have to use some tricks to get to our final goal. In this tutorial you will find everything step by step to make your own contact us form.
First things first, get over to emailmeform and register for a free account. These guys will host your contact form.
Now login and click on "create new form" on the left menu.
Step 1: Fill in your details, under website field place any web page as we are going to change this later and leave the number of fields to default 4.
Step 2: Leave everything on default or translate to your domestic language
Step 3: Leave everything on default except message columns and rows. You need to tweak this a bit to make it fit on your template, I have 40 columns and 5 rows this would be the best fit for most blog templates.
Step 4: Leave everything on default except image verification field. You can change the background color of the spam protection form if you like.
Step 5: Leave on default
Step 6 : You will se an preview of your form here, click on finish.
Now you will be presented with the form code, copy just the url to the form code into a plain text editor (here in red) :
<a href="http://www.emailmeform.com/fid.php?formid=26905" target="_new">My Contact Form</a>
Click on forms list on the left menu and click on edit. Now you will be taken to step 1. Under web site code paste the previously to notepad copied form url and click on next till finish.
Get to your blogger admin panel and click on posting/create to create a new post. Make sure you work in the edit html mode. To display the form inside a post we have to use the outdated but still sometimes useful iframe technique.
Paste the following iframe code into your editor and change the red form url to yours.
<iframe src="http://www.emailmeform.com/contact_webmaster_fid-26905.html" name="frame1" scrolling="no" frameborder="no" align="center" height = "325px" width = "500px">
</iframe>
You might need to edit height and weight to create the best fit for your template.
Save and enjoy :)
Preview my contact form here
Try out new Blogger features
Blogger in draft is a special version of Blogger where blogger developers try out new features before releasing them to everyone. Think of it as an sandbox, or laboratory, or just “Blogger + new things.”
By taking feedback and looking at what works and what doesn’t, blogger developers will be able to make features that much better when releasing them to everyone.
Get Over to draft blogger to start testing :)
Blogger Template : Recipes
This one is really special. I love recipes as they help me a lot in my busy live to cool down a bit and cook something for me and my wive and I thought why not dedicate the next template to all recipe bloggers. This template is as always free give away.
Download the template here
Preview on my test blog
For template setup open read more
You can setup few things on this template. Upload the template and copy the html code in an plain text editor like notepad.
Find :
<div id='mainbanner'>
<div class='description'><h1><a href='/'>My Recipes Blog</a></h1>
BT Themes Demo
</div>
..and change the text in red to whatever you like.
Find :
<li class='page_item'><a href='/' title='Home'>Home</a></li>
<li class='page_item'><a href='/' title='About'>About</a></li>
<li class='page_item'><a href='/' title='contact'>Contact</a></li>
<li class='page_item'><a href='/' title='popular recipes'>Popular Recipes</a></li>
<li class='page_item'><a href='/' title='Send Recipe'>Send Recipe</a></li>
...and change the links to whatever you like
Sunday, November 11, 2007
Saturday, November 10, 2007
Order your blogger template
I`m offering css to blogger and wordpress to blogger template conversion and customization.
If you cant wait for me to convert new templates you can order yours now for a small fee (usually between 15$ and 40$).
Optional :
Payments are made with PayPal.
For a quote contact me now as those prices are limited time only and soon I have to continue with my studies.
Get your blogger template now fill in the contact form with your request :
Add Navigation Icons to your blog posts
Do you want to include stylish navigation buttons under your blog posts ? I thought so, follow this tutorial to include this simple hack within your blog posts.
As always go to your template/edit html section click on expand widgets and copy the code to a plain text editor like notepad.
Find this whole section and delete it :
<b:includable id='nextprev'>
.....
</b:includable>
Paste this instead (The bold represents the links to navigation images you can change them to your own if you like):
<b:includable id='nextprev'>
<div id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a expr:href='data:newerPageUrl' expr:title='data:newerPageTitle' id='blog-pager-newer-link'>
<img src='http://photos1.blogger.com/blogger2/
3880/707811929476148/1600/left.gif'/></a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a expr:href='data:olderPageUrl' expr:title='data:olderPageTitle' id='blog-pager-older-link'>
<img src='http://photos1.blogger.com/blogger2/3880/
707811929476148/1600/right.gif'/></a>
</b:if>
<a class='home-link' expr:href='data:blog.homepageUrl'>
<img src='http://photos1.blogger.com/blogger2/3880/707811929476148/1600/home.gif'/></a>
</div>
<div class='clear'/>
</b:includable>
and your new navigation icons will look like this :
By Hactro`s Place
New Design
Its official we have a new template, it has more space then the old one and a lot of nice features. Its not 100% finished as the comment area requires a bit more tuning. Anyway I hope you like it.
Cheers
Thursday, November 8, 2007
Blogger Template : World of Warcraft
Nine million users can`t be wrong and wow is truely and addictive game. I have taken the time to make a blogger template inspired by this great piece of software.
Download the template here
Template preview on my test blog
p.s. : for installation instructions open read more....
In order to make this template work you need to setup under formatting 1 post on the main page and disable the comments.
Where is my template gone ?
You found a nice template for your blog on an website , is it the perfect match for your blog ? If you don`t take care one day you`l be amazed to see its screwed. Most of these templates are hosted by private and free web hosting services. If your blog traffic begins to raise at some point the server will fail to serve the images and your user will see only plain text. Imagine the shame and the kick back you would be faced with such situation. In this very next tutorial I`m explaining how to find suitable hosts for you blog template images and css style.
First of all we need to know where to find the links to our images inside the template., therefore we need to login to our blog admin panel and visit the template/edit html area. Most templates hide the images inside the CSS Tags so this will be the first place to look. If you cant find the CSS tags look for a similar line of code :
<link href="http://somehost.com/somefolder/templatename/style.css" rel="stylesheet" type="text/css" />
This is your template css style, visit this url in your browser and copy the content of it to your html at the exact position where
<link href="http://somehost.com/somefolder/templatename/style.css" rel="stylesheet" type="text/css" /> was.
Now you host your css within blogger one less thing to worry. Its time to take a closer look on css and find the images. Look for similar lines of code and execute the red links in your browser and save the images.
#outer-wrapper {
width:950px;
background: #ffffff url("http://h1.ripway.com/jashanhoney/12/background1.jpg") repeat-y right top;
margin:0 auto;
text-align:left;
font: $bodyFont;
}
The ideal solution would be to host your images on a payed hosting, you would`t have to worry that they will be broken at some time until you pay the bills. If you have a hosted website upload your blog images via ftp inside a folder and replace the links inside the html code.
Otherwise we need to find a suitable image host and there are plenty out there good and bad ones. Try to search for free image hosting inside your favorite search engine picoodle.com
has been proven to be good for me but you need to experiment a bit and see what works the best for you. The worst thing you could do is to leave the css style and images hosted on some private server, sooner or later your blog will be screwed.
Wednesday, November 7, 2007
Blogger Template : Plain Office
Monday, November 5, 2007
Digg It button for blogger
Are you a digger ? If so then you might want to embed a simple and nice looking digg it button next to your post.
First of all you have to login to your blogger blog admin panel, then select template / edit html, mark Expand Widget Templates and copy paste the whole html code in a plain text editor like notepad. You might consider to make a template backup if something goes terrible wrong :).
Now find the following line of code<p><data:post.body/></p>
and place this on the next line :<p>
<!-- DIGG -->
<div style='float:right; margin-left:10px;'>
<script type='text/javascript'>
digg_url = '<data:post.url/>';
</script>
<script src='http://digg.com/tools/diggthis.js' type='text/javascript'/>
</div>
<data:post.body/>
</p>
Thats all folks, copy and paste the html back to your html view and save
Posted by Timethy Jones at 12:14 AM 1 comments
Labels: Widgets