TechnoBlog : open your blog.

Maybe, you already know this tool ? If not, you need to click on Blogbar and add it to a custom block of your blog.

Blogbar used to let you search for a some site/blog from directly your blog with the help of the main search engines (Google, Yahoo, MSN, ...) and some blog search engines (Technorati, Blogpusle, ...).

Now Blogbar V3 lets you search for something on your blog aka your site domain. The Blogbar is now a real service for any blogger. It is THE block you have to add to your columns specially on blogSpirit : it is really easy to insert it on blogSpirit blogs. The reason is simple, Blogbar creators are blogging on blogSpirit (Read the V3 post).

Here is a way to know how to handle every graphic element of your blog : The CSS map of your blog.
This tool will help knowing the identity of each style if you wish to personnalize your blog by your self.

. It's brand new and let you :

• Recognize the style of name of the important boxes that build your blog layout
• Know each text style like links, content titiles, date, sidebar lists etc... Just click on any text element to display the style name in the center box

I've seen much blogSpirit blog with nice CSS designs (like this one), I hope this tool will help many other ones

Légend :
Your CSS blog uses a box model, here are the ones you need to know if want to edit your stylesheet :

box : #container, the main box that contains everything.

box : #left, #right, #banner, #center : 4 important boxes used for left column, right column, center column and banner

box : .sidebar, .content : styles thaht defines some default layout rules like padding properties or font properties

box : table.calendar : this style defines the calendar box that has its own rules


Good luck !

New features have been added to your blog, template name is wrote in [...] :

• A "Remember Me" feature that remembers user information on comments (by cookies) : your visitors don't need to fill in the comment form each time ! [permalink, comments]
• Subscription to a comment feed, you may be alerted by email when a new comment has been added to a post and unscribe when the discussion is over. [permalink, comments]
• A "Email this" feature to send by email a post to a friend you find interesting (or not..) [index, permalink, archives, categories]

If you have never updated your HTML templates (Design -> Advanced Configuration), a massive update has benn made by our robots : these new features should be available on your blog.

If you have already updated your templates by adding some code for ads, banner, ou something else, here is what you should do to get these new features :

1. Save 1 by 1 the following templates content on your hard drive :

• Index Template
• Archive Template
• Categories Template
• Comments Template
• Permalink Template
• About page Template
• List item Template

2. Restore each original version of these templates

Caution ! Do not restore the following templates :

• Stylesheet
• 1st sidebar Template
• 2nd sidebar Template

3. The new features are just set up, you may now add your own updates with the help of the files saved in 1.

The other new features (photoblog, HTML editor) are just available in your admin account, we have also corrected some bugs due to TimeZone and archiving posts. Have fun on blogSpirit !

I have noticed that some blogs are using survey modules in their column (here or here). This custom block idea seems good as many bloggers use it.

There is still something wrong with their cascading stylesheet (CSS), as their own style name are the same used on blogspirit blogs ! This can make your center column green, blue or maroon depending on the blogspot settings...

Here is a solution to integrate in your stylesheet if you meet this bug :

#center .content {
background: transparent;
}

It is a pity blogpoll choosed this names for their own styles as .content, .footer or .header are used on many css code. The .content style is used on the middle column and blogpoll apply the following css property :

background: #DDEEDD;

The solution is easy for blogpoll to make their (good) service compatible with any blogging platform (blogSpirit can't be the only one) by using an ID on their table like id="blogpoll-service" anyother css property can be declared inside this table like "#blogpoll-service .content { }".

As the blogpoll developpers didn't let any email, I hope they will read this post and solve this css bug...

Would you like some nice form on your comments ?

Here is what Technoblog recommands :

That's the way your forms will be printed with Firefox ou Opera. With IE, this will keep the "square" borders but will still be working (well, IE is not a CSS addict...)

Get the line /* Comentaires */ in your stylesheet (Design -> Advanced Configuration -> Stylesheet). This is where forms design is handled.
Then replace the input { } and textarea {} styles by the following code :
input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #01717f;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
color: #000;
background-color: #addfe8;
border: 2px solid #addfe8;
-moz-border-radius: 4px;
}

NB : the background color and the border color are #addfe8, try to replace this color code by one of your elements (banner, links, column, title...) : you may find every color code in your stylesheet. (exemple : #99cc33 ou #4E8ABE). An advice : use some bright colors...

An other sample used on Technoblog :

CSS code :

input {
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}

textarea {
clear: both;
width: 99%;
font-size: 100%;
font-family: Verdana, Arial, sans-serif;
background-color: #ffffff;
border: 1px solid #cc6600;
-moz-border-radius: 4px;
}

I advise you to replace the color code #cc6600 by a color of your choice according to your blog design...

As Lionel asked me for inserting javascript code in a blogSpirit blog, here is an exemple with the "add to bookmark feature".

Technical notes :
BlogSpirit blogs use Smarty technology which is a php template parser.
Smarty tags are like {tag}{/tag}, that's why javascript code may be misunderstood if they contain ths type of caracter. The solution is to use the following Smarty tags : {literal]{/literal} between your javascript code (works also for CSS code)

"Add to bookmarks"
I really disagree with this type of feature which work only with some versions of IE (not working on Gecko type browser : Firefox, Safari, Netscape...)
Create a new custom box and insert the following code :

<script type="text/javascript">
{literal}
function add_favoris() {
var site_name = "Technoblog !";
var site_url = "http://technoblogs.blogspirit.com";
if ((navigator.appName.indexOf("Microsoft",0)>=0) && (parseInt(navigator.appVersion)>=4)) {
window.external.AddFavorite(site_url,site_name );
} else {
alert("This d*feature works only with Internet Explorer 4+, perfom a Ctrl+D to add "+var site_name+" to your bookmarks.");
}
}
{/literal}
</script>
<a href="javascript:add_favoris();">Add to my bookmarks</a>


NB : this script only works with IE 4 or more (your IE should be OK), if you want to use this script, don't forget to replace 'site-name' and 'site_url' by your blog title and url.

NB2 : {literal}{/literal} tags are used to avoid the SYNTAX ERROR message when updating your template or custom box. If you still have this message or your blog don't display well, try to :
- check if your tag is closed with : {/literal}
- check if the 'literal' tags are just around some javascript or css code not html code

Currently, our 3D photos album module don't manage the .PNG and .GIF images. These formats are made for graphism (logo, stickers, animated images, ...) that's why your 3D album may not display some of your album images.

If you are using a software to export your photos, don't worry : most of these softwares export in .JPG or .JPEG format and you'll get a better quality with these ones as they are made for pictures.

Learn more on blogSpirit premium services (also know as blog à la carte)

Ever wanted to translate your blog ?

This tool lets you translate any page of your blog in just one click, you can insert it into a new custom block in design header :

<form action="http://translate.google.com/translate" name="translate" id="translate">
<input type=hidden name=u value="" />
<input type=hidden name=langpair value="" />
<input type=hidden name=hl value="en"><input type=hidden name=c2coff value=1><input type=hidden name=ie value=UTF-8><input type=hidden name=oe value=UTF-8><input type=hidden name=prev value="/language_tools"></form>
<a href="javascript:document.translate.elements['langpair'].value = 'en|fr'; document.translate.elements['u'].value = document.URL; document.translate.submit();"><img style="margin-bottom: 5px;" src="http://myblog.blogspirit.com/images/french_flag.gif" alt="French" /></a>
<a href="javascript:document.translate.elements['langpair'].value = 'en|de'; document.translate.elements['u'].value = document.URL; document.translate.submit();"><img style="margin-bottom: 5px;" src="http://myblog.blogspirit.com/images/deutsh_flag.gif" alt="Deutsch" /></a>


You may find here all languages possible to translate from english with Google. Then update all parameters wrote in bolg in the smaple.

You can also translate your blog from another language, visit this page to know which languages are available then update all parameters with an underlined style.

Caracters [ à © ª è ] etc...
These caracters may also appear in your column content or in google results for your blog.

Don't panic ! This is just because of the new caracter encoding for blogSpirit. This lets any user writting in any language having a blog with special caracters from his language. (blogSpirit launched a chinese version)

This problem has been resolved for all blogs BUT if you have modified your HTML templates, the new encoding caracter may be absent on your blog.

So the best idea should be restoring all your templates (blogSpirit recommands this way) :
- get the differences by comparing your templates and blogSpirit default templates
- restore
- copy the differences

If you really don't want to update your templates, here is how to debug your blog using Advanced Configuration of Design (not recommanded by blogSpirit) :

Get the following code in <head> </head> tags :

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

And replace it by this code :

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Enough of Google Search ? Try the MSN Search block :


<form method="get" action="http://search.msn.com/results.aspx">
<input type="hidden" name="cp" value="1252" />
<input type="hidden" name="FORM" value="FREESS"/>
<input type="text" name="q" size="30" style="width:95px; background-color: #f3d9c0; color: #cc6600;" value="MSN Search
" />
<input type="submit" value="Go" style="width:25px; background-color: #f3d9c0; border: 2px solid #000; color: #000;" />
<input type="hidden" name="q1" value="site:YOUR_BLOG.blogspirit.com" />
</form>


That's it ! The best way to insert this block should be the custom blocks (Design -> Column content). Remember to replace 'YOUR_BLOG' by your domain name.

Go to the "advanced design" section ("Design" header") and edit your Stylesheet template.

Locate your "body" style (should be the first one) and update it as shown below in strong caracters :


body {
margin: 0px 0px 20px 0px;
padding: 0px;
background-color: #008da8;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #000;
font-size: 120%;
word-spacing: normal;
text-align: center;
}


You may edit the font-size as you wish, to reduce it insert a percentage < 100, to increase it insert a percentage > 100.

As you may have noticed, Blogspirit China and Blogspirit Taiwan are now open. It appears that the caracters size of Blogspirit blogs is too small for Chinese caracters, the Blogspirit team will work on this problem and offer a solution for this great community. By now Austin has already found a solution, you may find it here. I can't really say if the solution is good as Idon't speak chinese at all but Austin shows screenshots of his Stylesheet and It seems clear. I have just noticed that some titles such as "About Me" are still too small, however the main content is OK.

Thanks Austin !

Want to decorate your blog ? Want to add some feature to your blog ?

Here is a list of ideas for the new Blogspirit feature, the custom blocks.

Ad Sense : good to earn some incomes with your blog (in fact the best solution), Google AdSense smart banners that print sponsored links according to the web page content. The more people click on your sponsored links, the more you will earn... But be careful, there's no way to be a rich man with Adsense !

Bloglet : This web-service give syndication with email with the help of Rss Syndication. A useful service if you think you visitors won't use RSS.

Bot-a-blog : Same kind of service. You may have an account with all your favorites RSS feeds and be alerted to each update.

Google Search Engine : You have to get it ! More information here.

Music Background : Much people like this feature, here is a how to.

Referers : My favourite ! This service let you display on your blog the last links that bring you visits. Really useful to understand how your visitors read you and to offer a link to anyone speaking of your blog !

Sitemeter : A small stats service thaht can be used with Blogspirit stats. You have to know you will never get the same results : a webservice like Sitemeter can't read your RSS/ATOM visitors and your Photoalbums ones too. A funny feature : your traffic prediction !

Statcounter : Same service as Sitemeter, Statcounter looks more for professionnal use as you can have multi-project (one for each blog !) on 1 account and get more "visible" graphics.

Please, if you know other webservices to include in a Blogspirit Custom Block, tell me ! I would like to make this list as rich as possible...

Finally !

A new Blogspirit version is born with the following new features :

- Custom Blocks that will let you insert HTML or Javascript code for any feature you may find on the Internet such as multimedia modules, search motors or sponsorised links. ("Columns content" section)
- Trackbacks. Did you ever want to comment a post directly on your blog ? Trackbacks let you do that, you'll find this new feature in the "new post" -> "advanced settings" sections. More is coming soon about Trackbacks on Technoblogs.
- Security from "evil links" and spamming. Blogspirit has already a system to protect every blog from spamming, you will now have a security level on your own blog by closing automatically comments and trackbacks on old posts after 1 month, 2 weeks or 3 days... ("Post Settings" section).
- International Bloging : chinese blogs will now have an blog administration in chinese ! Blogspirit supports any language from any country for bloging.

New features mean new tips that will be soon available on TechnoBlog !

What you need to do to get all these new features. :

Restaure ONLY the following templates (Design-> Advanced Design) :
Index
Archive
Categories
Comments
Permalink
About Page
List Item
Album Templates : all
Atom
Syndication

NB : You may restaure these templates by ticking each template and clicking on "Restaure original version", don't forget to not tick the "Style" template and the "Calendar" template (you could have mean surprises on your blog...)



If you have already modified your templates by yourself, you will need to check the differences and edit your templates. (Leave a comment for help if needed and I will post something on it).

First, you need to upload your image on your virtual disk. Go to the"Control Panel" section -> "File Manager".
Go into your "image" folder then upload your animated gif. When the upload is over, click on your image link and copy its URL.

Now you need to insert this image on your post :
Create a new postand copy the following code :

<div style="text-align: center;"><img src="[gif URL]" alt="" /></div>

Remember to replace [gif URL] by the URL of your animated gif. You may also fill in the alt="" function (alternative text).