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
Blogger Template : Multipla
This is the first blogger template converted by myself from a css template. All credits goes to free css templates crew I was just stupid enough to make it blogger compatible. Before you can start posting you need to customize the menu on the left by editing the html. Anyway I hope you like this template as more are going to come in the near future.
Download Here
Sunday, November 4, 2007
Launching Comment Box
A neat widget for blogger which show the comments and leave your comment form in the same page as blog when you click the 1 Comments link. Check out the screen shot of the Comment Box.
Instead of being taken to default blogger comment page this widget displays the comments in a neat box with a loading gif.
Installation instructions can be found here
Tags:
Saturday, November 3, 2007
Display Adsense ads between blog posts
Some of you might all ready know how to display ads between blog posts but most bloggers are still not aware of this feature. It was long time requested by bloggers and now the waiting time is over. Blogger now supports this implementation through the AdSense widget. See how it is done on the Adsense blog
Tags:
Blogger Sitemap
Blogger users who wanted to submit a sitemap to Google Webmaster Tools have always had some disadvantages. Since we can't publish a real sitemap to the domain we are using we had to settle for only submitting a partial sitemap by using our default site feeds (which only contain the last 25 posts). Add to that confusion when Blogger introduced Feed Redirection (to FeedBurner or others) made things even trickier, as for awhile if you chose the feed redirection option, then you couldn't submit a sitemap. Fortunately Blogger came up with a super secret option (so secret they never bothered to tell anyone) that fixes the problem for submitting a sitemap when feed direction is enabled ( hat tip to Amit for letting their secret out). And in the same step opened up a way to submit all your posts in a sitemap, instead of just the last 25.....
Tags:
So, starting at the beginning. To submit a Blogspot hosted blogs feed as a sitemap to GWT, you have to use the root-level feed that Blogger provides.
http://yourblog.blogspot.com/rss.xml
Of course change yourblog to your blog name, or using your custom domain. Which one you choose doesn't matter really, one is Atom and one is RSS format. Either will work.Taking care of the redirect
If you are using the redirect option on your feed, you can add a query parameter to stop the redirect on your feed in the format of (I'm only giving the filename paths here)
That will keep the feed from redirecting and is now usable as a sitemap at GWT.Submitting all your posts
Previously the root-level Blogger feeds did not accept any query parameters, but when Blogger added the redirect=false one, they also seemed to open up those feeds to all the known Blogger query parameters. And that's how you can submit more than the standard 25 posts. First off, figure out how many posts you have (you can do this at the Blogger Edit Post page and selecting only published posts, it will tell you how many total you have). Then you can use the max-results and start-index parameters to expand the number of results obtained, and to submit more than one map if needed. Note: Currently Blogger limits the max-results to 500 entries. This has gone up and down a couple of times so it could change. As of right now the upper limit appears to be 500. But 100 was the limit at one time.
I'm going to use the max limit of 100 in my examples, you can use more if that's what you want. So to get the first set of 100 posts the url I'd submit would be
Then, if I have more than 100 posts (I currently have 105) I can create another sitemap with the url
If you notice, just increase the start-index number by the amount of results you are getting. So the first sitemap started at 1, and returned 100 results, the second sitemap would use the start-index of 101 (100+1). Now that should automatically cover me for the next 95 posts. If I had more than 200 posts, just create another sitemap with the start-index of 201 (you get the idea). GWT will automatically download the sitemaps (usually about once a day) and if I've made a new post it should get added to the mix. Here's a screenshot of my current sitemaps in GWT, which I've been doing this way for almost a month.
Having said all that, two last things. One, I don't really think all of this helps any (if at all). Blogger blogs aren't that difficult to crawl and Google will probably crawl your blog just as well with or without a sitemap of any kind. Two, if you really wanted to create a non-feed sitemap with some sort of sitemap generating tool, then according to this recent post at Google Webmaster Central Blog, you could upload a sitemap for blogspot through another verified site (like maybe googlepages? I haven't really tried it).
Add expandable posts to your blog
A few day ago I posted a tutorial found on the internet to addhtml read more functionality to your blog but did not had the chance to test it myself. Today I tried to install the script but found out that`s a bit buggy and does not work like I would to. After immense searching I found a tutorial on a Japanese blog that really works. So follow the next lines if you would like to have expandable posts like on this blog.
Open your template html view, mark expand widget templates and then copy and paste the full code to plain text editor like notepad twice. Save the first copy if something runs wrong and you need a backup and close it.
Add this between <head> and </head> tags :
<script type="text/javascript">
function toggleIt(id) {
post = document.getElementById(id);
if (post.style.display != 'none') {
post.style.display = 'none';
} else {
post.style.display = '';
}
}
function showFullPost(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost")
spans[i].style.display = 'inline';
if (spans[i].id == "readmore")
spans[i].style.display = 'none';
}
}
var fade = false;
function showFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Appear(spans[i]);
} else spans[i].style.display = 'inline';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'none';
if (spans[i].id == "hidelink")
spans[i].style.display = 'inline';
}
}
function hideFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
if (fade) {
spans[i].style.background = peekaboo_bgcolor;
Effect.Fade(spans[i]);
} else spans[i].style.display = 'none';
}
if (spans[i].id == "showlink")
spans[i].style.display = 'inline';
if (spans[i].id == "hidelink")
spans[i].style.display = 'none';
}
post.scrollIntoView(true);
}
function checkFull(id) {
var post = document.getElementById(id);
var spans = post.getElementsByTagName('span');
var found = 0;
for (var i = 0; i < spans.length; i++) {
if (spans[i].id == "fullpost") {
spans[i].style.display = 'none';
found = 1;
}
if ((spans[i].id == "showlink") && (found == 0))
spans[i].style.display = 'none';
}
}
</script>
Find :
<b:includable id='post' var='post'>
Change the next two lines to this :
<div class='post' expr:id='"post-" + data:post.id'>
<a expr:name='data:post.id'/>
Find :
<div class='post-body'>
Add on the next line :
<b:if cond='data:blog.pageType == "item"'>
Find :
<p><data:post.body/></p>
Add on the next line :
<b:else/>
<style>#fullpost {display:none;}</style>
<p><data:post.body/></p>
<span id='showlink'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:showFull(\"post-" +
data:post.id + "\");"'>[+/-] Read More...</a></p>
</span>
<span id='hidelink' style='display:none'>
<p><a href='javascript:void(0);'
expr:onclick='"javascript:hideFull(\"post-" +
data:post.id + "\");"'>[+/-] Summary only...</a></p>
</span>
<script type='text/javascript'>
checkFull("post-" + "<data:post.id/>");
</script>
</b:if>
Go to the admin panel under settings click on formating under post template paste this and save :
Type your summary here
<span id="fullpost">
Type rest of the post here
</span>
Now you will clearly see where to type the summary and where goes the rest.
XML, HTML and XHTML
When inserting codes into the Blogger template, page element, or blog post, you may have seen error messages that the code could not be parsed, was not well-formed, was broken, or that the elements were not closed properly. These errors can be corrected if you understand the rules that must be adhered to in XHTML documents. Blogger templates use the XHTML 1.0 Strict Document Type. In this article, we shall explain some of the XHTML syntax or rules, so that you may troubleshoot and resolve the problems if these error messages should occur.
XML, HTML and XHTML
We shall keep this short. Just so as you understand what we said about document type, view the Page Source or Source of your Blogger blog. You should see this document type declaration at the very top:-
The terms – XML, HTML and XHTML - refer to the markup language used to write the web pages. Many of us would have heard of HTML (Hypertext Markup Language), invented by Tim Berners-Lee, and used since the early days of internet. XML (Extensible Markup Language) is a meta-language, used to create other markup languages. The traditional HTML was later recast to use the rules of XML and that resulted in a new XML application, called XHTML (Extensible Hypertext Markup Language). Because XHTML rules are strict and unforgiving, not conforming to them when attempting to modify the template would result in error messages. So, what are these rules that Bloggers like us should take note of?
Basic Rules of XHTML
1. Codes to be in lowercase
Since XML is case sensitive, all the element keywords and attribute names used in XHTML should be in the lowercase. For example, the template code is not this:-
but this:-
If you have noticed, the elements and attribute names between the lesser than (<) and greater than (>) signs have to be in the lowercase. However, the value, which in this case is “Tips for New Bloggers”, can be in the uppercase, lowercase, or mixed case.
2. Attribute values to be in quotation marks
All the attribute values have to be enclosed either in single or double quotation marks. The following examples are not accepted by XHTML:-
<a href=http://tips-for-new-bloggers.blogspot.com>Text Link</a>
<img src=photo.jpg/>
<table width=200 border=0 cellpadding=2>
Instead, they should be written as such:-
<a href="http://tips-for-new-bloggers.blogspot.com">Text Link</a>
<img src="photo.jpg"/>
<table width="200" border="0" cellpadding="2">
3. Container elements must have closing tags
This is not correct:-
In XHTML, there must be a closing tag with a forward slash (/) at the end:-
Examples of the many non-empty elements that have opening and corresponding closing tags are:-
<li> ... </li>
<table> ... </table>
<h2> ... </h2>
<div> ... </div>
<span> ... </span>
<dt> ... </dt>
<dd> ... </dd>
<a href> ... </a>
4. Standalone elements to be closed
Some of the elements are empty or standalone. They do not have associated closing tags. Common examples are:-
<img>
<input>
<frame>
<hr>
<meta>
<link>
Nonetheless, in XHTML, these elements must be terminated or closed. There are two ways to do that. One way to terminate the element is to put a forward slash (/) at the end like this:-
<img/>
<input/>
<frame/>
<hr/>
<meta/>
<link/>
The second way is to add a corresponding closing tag like this:-
<img> ... </img>
<input> ... </input>
<frame> ... </frame>
<hr> ... </hr>
<meta> ... </meta>
<link> ... </link>
5. Elements to be properly nested
This means that elements must be closed in the reverse order. For example, this code is not accepted in XHTML:-
It is improperly nested because the form was created first followed by the table. To close them in the proper order, the table must be closed before the form, like this:-
6. Document to have only one root element
In the XHTML document, you will see that except for the document type declaration, all the codes are nested between <html> and </html>. This is the root element and all other elements or sub elements are in between. The document structure will look like this:-
<head> ... </head>
<body> ... </body>
</html>
7. Attribute minimization is not allowed
In XHTML, all attributes should be in the form name="value". Even if the value is the same as the name, it cannot be minimized to one word. Hence, in our Add Text Box and Textarea article, the textarea code is not this:-
but this:-
XHTML Character Entities
Quite a number of readers had asked why they were unable to display HTML codes in their blog posts or why their codes were not well-parsed when inserted into the template. If you have noticed by now, the codes are wrapped in the lesser than (<) and greater than (>) signs. The moment these are posted, they will be interpreted as codes and will trigger an action by the browser. Should you want to display these as part of the text, use their character entities instead." " & & < < > >
The next time you see an error message to the effect that the code is not well formed, not well parsed, not properly closed, etc., take a look at this guide, troubleshoot the problem and try out the possible solutions.
Thanks to : Tips for new bloggers
Technorati Tag Generator
Don`t you hate it ? Every new post requires extra 2-3 lines of code if you want to place Technorati tags. Most users don`˙t even know how to place them. Well here is help all you lazy couch potatos like me :) . I discovered a tool that does the tagging for you it’s quite a simple program that allows you to generate HTML code for tags from a list of words. It also allows the creation of prefixes and suffixes (which can be saved) which are added to the code at the beginning or the end (this allows different styles to be made). Once the code is generated, it can be exported to any HTML editor, by copying it to the clipboard.
Happy downloading here
More Info
Technorati Tags:tag, generator, tags, code, free, technorati
Friday, November 2, 2007
Blogger Template : Girly Web 2.0
Download Here
p.s : The date header needs to be in yyyy-mm-dd format to work properly. Credit goes to blogburster for this template.
Publish your posts directly from word
If you prefer Microsoft word over the native blogger editor you can use Blogger right within Microsoft Word. Just download and install the Blogger for Word add-in and a Blogger toolbar will be added to Word allowing you to:
- Publish to your blog
- Save drafts
- Edit posts
Thursday, November 1, 2007
jiglu has widgetized auto tags for your blog!
This appears to be a cool widget/service that spiders your blog and creates a tag list in the form of a widget. The tags link to the actual content on your pages giving your readers a new way to navigate your site. The tag links open in a window right on your site and deliver your readers to the content they desire. It’s easy to use so the reader wont get discouraged.
There are different categories for tags so you don’t have to deal with jumbled up mess like those pesky tag clouds. Jiglu attempts to organize the keywords on your site to make navigation much easier.
This widget uses JavaScript. It is completely customizable to the appearance of your blog. Size and multiple color options are available as well as the ability to limit the actual content of the widget. There are also Word Press versions that integrate directly with your widget ready template. Also for, Movable Type and TypePad.
Adaptive Blue Launches New Display Widgets
Smart browsing company Adaptive Blue just launched a few new widgets to complement their existing distributed tools.
The newest round of widgets leverage RSS feeds from popular services such as Amazon and Epicurious to display dynamically updated lists of popular items like Amazon products or Netflix most popular. You can also set up more personalized widgets of your Amazon wishlist or Netflix Queue.
While these are nice looking widgets, there’s nothing too revolutionary in the widget itself. Folks have long been able to plug RSS feeds into services like Widgetbox or Musestorm to create their own display widgets of whatever dynamic content might complement their blog.
Dig a little deeper, however, and you can see what Adapative Blue is up to here. These display widgets are a slick delivery vehicle for their SmartLinks. Each widget comes equipped with a button corresponding to each item (e.g. a movie title), which triggers Adaptive Blue’s signature SmartLinks module which points to resources around the Web related to that particular item. The resources might include the movie’s Wikipedia page, its review pages on the New York Times and Flixster, and places to buy the DVD.
The default setting on these widgets allow for Adaptive Blue to earn affiliate fees from purchases driven by their Smartlinks. However, widget publishers are able to override these default settings and plug in their own Amazon Associate IDs and earn 100% of the resulting affiliate commissions.
While I believe the days when simple display widgets could drive massive distribution to be far behind us, there’s no reason for Adaptive Blue not to experiment with different ways to push out its Smart Links.
I believe Adaptive Blue's biggest challenge as a company is that they are pushing a new behavior that may not be easily grasped by non geeks. The more things that they can do to wrap their service in simple, understandable contexts, the better. These sorts of widgets are a nice step in that direction.
Click through to grab your own Popular SmartLink widget.
Widgetbox widgets for blogger
Widgetbox is an open web widget marketplace and syndication platform. It serves both the developers who create widgets and the web publishers who use widgets on their sites.
Web publishers can search the Widgetbox gallery and use the categories, ratings and reviews to find the right widget. Once a widget is selected, Live Preview enables the web publisher to see the widget exactly as it will look configured for their site or blog. The configuration is done without coding and the installation to the blog or web site is a visual process. In addition to this ease of use, Widgetbox has unique capabilities that make widgets smarter and more useful :
- Widget Panels: Drag & drop placement makes it easy to install and manage widgets within Widgetbox.
- Widget Metrics: Widget publishers get a metrics dashboard that allows them to track the spread of their widgets across the web. (Learn More)
- Live Widgets: Widgets are always “live” within blogs and web pages. They can be re-configured instantly and without touching HTML code.
- Smart Blogs: Widgets can be “tag aware”, meaning a web publisher can make widgets react to the content of their web site. For example, an image widget might display images related to the content of the most recent blog post. (Learn More)
50 Blogger Templates
Like every day I was searching for new and interesting stuff which I could present here on the blog.
Last night i discovered this page where you can find links to 50 blogger templates. There should be something for you as well in case you did not see anything interesting here so far.
Our thanks goes to the author of this page
The ultimate starter package
So you have decide to create your first blog on Blogger. It has a simple and fine interface that takes care of many things for you. This is my suggestion to you for your first free essential must haves for .
1. Feedburner - It generates an smart feed compatible with all feed readers for free like my feed. It allows you to put easy subscribe buttons for xml, Add to yahoo, Add to Newsgator, Add to MSN etc. Read about how their single feed policy can benefit you.
It can give you a cool feed count chicklet button to show how many readers are using your feed to read your blog. It also gives you a headline animator which you can attach to your blog to display the recent 5 posts in a nice animated fashion. You can get an authentic Creative Common license, get a browser friendly RSS feed, Splice photos and links and more…
2. Haloscan - Trackback is an essential component of blogging these days. Unfortunately Blogger does not have trackback. Haloscan provides you with a seamless way to integrate free trackback in your blog by adding a small code. You can also integrate their comments component if you like to replace the Blogger comments. Read about Haloscan or Blogger comments.
The benefits are that you can edit Haloscan comments, and open them in a pop up and keep them separate from your post (Blogger allows you to only delete comments and not edit them, also on the post page all comments will show whether you like it or not).
The main disadvantage is it will not email you these comments (like Blogger) for free and it is difficult to track where these comments were made. Another major benefit is that it allows you to send pings and trackback to other sites when you mention about them in your posts.
3. Imageshack - Dont you want to fill your blog with images without hassles of registration. Imageshack provides an excellent interface to take care of your free image hosting needs. Maybe it is this the fastest way to host an image on. Allows lots of image format, hotlinking, transloading from other sites. Its a good idea to register to keep track of all your images in one place. It is much convenient than the proposed Hello and Picassa options…
Update: Blogger enabled hosting of images on its own webspace making it easier to host images in your posts. But you cannot manage or edit / delete your blogger images in any way
4. Technorati - Create and add a technorati profile. It allows you to claim your blog in this huge blogosphere. It allows you to put an excellent technorati search on your blog. The best part is that whenever someone mentions or links to any page of your blog, technorati knows and a search for your blog on technorati shows exactly how many sites link to which pages of your blog and when they were added with a small description. See why you need a technorati account.
5 - Sitemeter - Just takes 5 minutes to get a free tracker which gives you realtime site traffic statistics to check the quantity and quality of your site traffic with detailed referrer and geographic data. I have checked out several other tracking sites, but this one seems the best. Although you need to keep a counter visible (as a logo, visitor counter) and the statistics can be made private too.
StatCounter gives much more detailed statistics and the counter is totally invisible and free totally till you start getting large traffic, when you need to pay. But the disadvantage is that both of these track the last 100 visitors only, while another free service Extreme Tracking tracks them all… but you statistics cannot be made private. More options I like are Google Analytics for deep traffic statistical analysis and it is hidden too.
6. Feedblitz - It quickly allows your blog visitors to subscribe by email to your new posts. They just have to enter their email. You decide which page opens after they press Subscribe. A quick confirmatory email to them and they get 1 email daily with all your new posts. You can decide if you want to send the full post or short posts with defined number of characters. Very good to keep your subscribers informed of new posts. It allows them to unsubscribe easily also. Example for our blog.
7. My Blog Log - Tracks outgoing links to let you know where your traffic is going. The free limited version data is not in much detail, yet provides a good idea. You can also add a Top 5 Our Links module to your web site. Now they have a MyBlogLog community to get some extra site traffic too.
8 AudioBlogger- Audioblogger allows free unlimited audio posts from any phone to your blogger blog. You call the number (Currently a US phone number), record a post, then your blog is updated with an audioblogger icon and a link to your recorded audio.
9. w.bloggar - It is a Post and Template editor, with several features and resources that the browser based blog editors do not offer. It enables users to have only one interface to several accounts hosted on several different sites, using different publishing systems. Helps to manage multiple blogs on Blogger very effectively.
10 Blogger Mobile - opens a new concept of Moblogging i.e. blogging by your mobile phone. When you send text or photos from your mobile device to go@blogger.com they’re automatically posted to your new blog page.
11. Blogexplosion - helps you get confirmed traffic to your blog. The principle is simple, you visit other peoples blogs and they visit yours. For every 2 blogs you visit, one visitor comes to you. This is very good if you are new blogger and have hardly any traffic. Definitely try the Rent a Blog advertising swap service.
12. Pingoat - Pinging lets dozens of blogging services know you’ve updated your site and increases traffic to your blog. Just enter your blog name and blog home page, check the blogging services you want to ping, just click ‘Submit Pings’ and in one click it pings all of them. Pingoat offers a wide variety of such services and is fast too. See many more one click pinging services.
13. Creative Commons - It offers a flexible range of protections and freedoms for authors and artists. They have built upon the “all rights reserved” of traditional copyright to create a voluntary “some rights reserved” copyright. They are nonprofit and all tools are free and useful to highlight the way in which you want others to use you content.
14. Google Adsense and Search - When you take all effort to write for a blog, why not optimize it to make some money. Let users search for good posts in your blog. And now it even helps to monetize you feeds.
Posted by Timethy Jones at 12:14 AM 1 comments
Labels: Widgets