TechnoBlog : open your blog.

Searching for information is the real problem on the internet. This rule also applies to the Blog-o-sphere and even your own blog !

Here is a way to insert a Google search engine on your blog at Blogspirit.

First let's insert the html code in your blog with the help of the "link-note" box.

<div class="link-note">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="5" maxlength="255" style="width:95px;" />
<input type="submit" name="btnG" value="Go" style="width:25px;" />
<input type="hidden" name="domains" value="http://YOURBLOG.blogspirit.com" />
<input type="hidden" name="sitesearch" value="http://YOURBLOG.blogspirit.com" />
</form>
</div>

Now we will try to modify the text box. You can edit the width but also the background and the text color :

<div class="link-note">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="5" maxlength="255" style="width:95px; background-color: #addfe8; color: #01717f;" />
<input type="submit" name="btnG" value="Go" style="width:25px;" />
<input type="hidden" name="domains" value="http://YOURBLOG.blogspirit.com" />
<input type="hidden" name="sitesearch" value="http://YOURBLOG.blogspirit.com" />
</form>
</div>



The "valid" button can be changed the same way :

<div class="link-note">
<form method="get" action="http://www.google.com/search">
<input type="text" name="q" size="5" maxlength="255" style="width:95px; background-color: #addfe8; color: #01717f;" />
<input type="submit" name="btnG" value="Go" style="width:25px; background-color: #addfe8; border: 2px solid #000; color: #000;" />
<input type="hidden" name="domains" value="http://YOURBLOG.blogspirit.com" />
<input type="hidden" name="sitesearch" value="http://YOURBLOG.blogspirit.com" />
</form>
</div>



Before this search engine works, Google needs to know your blog. If you have just created your blog, this can take some days but as your blog is visible on Blogspirit home page, on communities, on Blogspirit search engine or on friends blogs, Google robots will be interested in your blog very soon !

Blogspirit blogs are set for a 800*600 resolution by default. Why ? Because we are 25% to have this configuration. Of course we never want to get rid of 25% of our blog visits !
The problem is you may not have enough width for your posts...

Now "Tips & Tools" has a solution :
A 100% blog for any resolution with a width set to "auto". Let's try with this blog, if you reduce or increase your window, you will see that Tip & Tools act like a rubber band !

Now let's check the code, only CSS no HTML...
Before we start, you have to choose design n°1 or n°2 in "Design"->"Template sets". The 100% mode is only available with these two designs :

Now we have to go in "Design" -> "Advanced Design" then edit the "Stylesheet" file (aka CSS file).
Only changing styles are written, any update is wrote in bold :


#container {
width: auto;
border: 1px solid #cc6600;
line-height: 140%;
margin-right: 17px;
margin-left: 17px;
text-align: left;
background-color: #fff;
}

#left {
overflow: hidden;
float: none;
width: 180px;
background-color: #fff;
margin-left: 18px;
left: 0px;
top: 120px;
position: absolute;
}

#right {
overflow: hidden;
float: none;
width: 180px;
background-color: #fff;
margin-right: 18px;
right: 0px;
top: 120px;
position: absolute;
}

#center {
overflow: hidden;
float: none;
width: auto;
background-color: #fff;
margin-right: 163px;
margin-left: 181px;
}


...


.content {
float: none;
overflow: visible;
padding: 20px 15px 8px 5px;
width: auto;
font-size: 70%;
line-height: 150%;
}


Here it comes ! You have a 100% resolution blog : anyone can enjoy visiting your blog and you have more space for editing your posts !

NB :
Tested with :
Win : IE 5.01 IE 5.5 IE 6 Firefox / Mozilla 1.7 Opera 7.3
Mac : IE 5.1 IE 5.23 Firefox / Mozilla 1.3

Uplaod the mid file (name.mid) in the files repository ("Control Panel" -> "File Manager"). The edit your calendar template ("Design" -> "Advanced Design") and insert the folowing :

<embed src="http://myblog.blogspirit.com/files/my_music_file.mid"
hidden="true" autostart="true"></embed>

Are you asked for any login and password when you visit your blog ?

Don't worry you may have activated "Private Blog" function !

What is a private blog ?
It is a blog which access is limited by the author of the blog with login and password. You can use it for family photos or friends photos, but you can also use it for work for managing a project or share information with a limited area.

You can delete the "Private" function by :
- going to "Control Panel" -> "Site Access"
- delete every acces.

Click now on "View my blog", it is not private any more ! Everyone can visit you blog now !

NB : More information available on Blogspirit Help.

It is possible for you to insert your own banner instead of title of your blog. For that, follow these steps :

1. Go in the section "File Manager" of the heading "Control Panel"
2. Upload your banner image on blogspirit:

* Click on the " images " directory
* Add your banner with the 'Upload' form
* Once the finished loading, note address (the URL) of your banner. The address should be like: http://myblog.blogspirit.com/images/mybanner.jpg

Note that if your banner is on another server you do not need to upload it on our server, on the other hand it is necessary for you to know his URL to reach this image.
3. Go now in the section "Advanced Settings" of the heading "Design".
4. Locate the "Style Sheet" template and click on "Edit Template".
5. A window of modification of the css file opens. We will help you step by step to modify CSS code (the code of the style sheet) to insert your banner. Note that for each modification the code to be added for your banner is in comments: between "/*" and "*/".

* Locate the style " #banner ".

o Insert at the end of the style the following code:
" display: none; "

* Locate the style " #banner-img ".

o Replace: " background-color: #xxxxxx; ", by this line:
" background: #xxxxxx url([banner_URL].jpg) no-repeat 0% 0%; "
o Insert at the end of the style the following code:
" display: block; "
o Give to the attribute "height:" the height of your banner (in pixels).
Example: if your banner is 90px, write: " height: 90px; "

* Locate the style " div.img-link a ".

o Give to the attribute " height: "the height of your banner (in pixels).
Example: if your banner is 90px, write: " height: 90px; "

* For the modifications related to design 4 (by counting starting from the top left towards the line) only.

o On the level of the styles " #container .container-decorator1 ": replace " 90px "in
" background: transparent url(http://[... ]) no-repeat 0% 90px; "
by the following sum:
Height of your image + margin of 9px
Ex: your image is 120px height, the code to be inserted is: " 129px "

* For the modifications related to design 5 (by counting starting from the top left towards the line) only.
o On the level of the styles " #container .container-decorator1 " and " .album-container .container-decorator3 " : replace " 90px "in
" background: transparent url(http://[... ]) no-repeat 0% 100px; "
by the following sum:
Height of your image + margin of 8px..
Ex: your image made 120px in height, the code to be inserted is: " 128px "

6. Click on the "Save information" button to apply the changes: your banner is inserted in your blog! You can check it by clicking on the "View blog" link in top of the page.

If such were not the case, check well that you proceeded to each stage (the code to insert must-to be the same). Also check that the URL given for your banner is quite valid: to check it simply, copy the URL of your banner in a navigator: if your image does not appear, your address is false.

It is also probable that your banner is not sufficiently broad for space available (771px), in this case insert a code color to fill remaining space :
background: #xxxxxx url([banner_URL].jpg) no-repeat 0% 0%; (where #xxxxxx is the code color).

You can return to a basic solution, in the section "Advanced settings" of the heading "Design", tick a template then click on the "Restore original Version". Caution! All your modifications of design will be lost.

--------------------------------

Note that this is not the only method to display your own banner, but this one was tested on :
Win : IE 5.01 5.5 6 - Firefox 0.8 0.9 1 - Mozilla 1.7 - Opera 7.52
Mac : IE 5.1 - Safari - Firefox

Do not forget that all the code needed is in comments in your style sheet (/* code */) : delete '/*' & '*/' to valid this code.

--------------------------------

Edit : Here's a sample of the way your CSS shoud look like :


#banner {
height: 90px;
background-color: #d9c0e6;
color: #fff;
display : none;
}
#banner h1 {
padding: 15px;
font-weight: bold;
padding-bottom: 10px;
}
#banner h2 {
font-size: 80%;
padding: 0px 0px 0px 15px;
}
#banner a {
color: #fff;
font-weight: bold;
font-size: 70%;
text-decoration: none;
}
#banner-img {
display: none;
display : block;
background: #fff url("http://[BLOG].blogspirit.com/images/[BANNER].jpg") no-repeat 0% 0%;
height: [HEIGHT]px;
}
div.img-link a {
display: block;
text-decoration: none;
width: 100%;
height: [HEIGHT]px;
}

--------------------------------

In #banner-img, '#fff' is the background color which 'complete' your banner area, choose the one used in #banner.

Q: I have a blank page on my blog, nothing is displayed on my categories/my permalink/my archive !

A: Don't worry, nothing is lost ! Every html page is cached by Blogspirit in order to display your blog in a more quickly way. If your blog displays a blank page, you can make a reset on cache easily :

Go to Control Panel.
Under Basic Settings->Weblog title and description : Click on "Update Information".

Your cache has been reset, now go back to your blank page : your posts are back !

Remember that Blogspirit never "forget" your posts and this trouble about the cache rarely happens....

More info :
The cache system is performed by Smarty, a template motor.
smarty.php.net

How to insert an image on my blog ?

1. Get the URL

Example with Blogspirit Logo.
Edit a new post and paste the following code :


<img src="" alt="" title="" />

First let's get the image url on Blogspirit Home Page.
Make a right click on the image then properties (with Internet Explorer 6). Copy the URL near "location:".
Insert it on the "src" parameter (source) in your post :

<img src="http://www.blogspirit.com/graphics/portal/logo.png" alt=""
title="" />


2. Some design parameters


You can edit the "alt" parameter (alternative). It displays text when image is not available. Same thing for "title" parameter.

<img src="http://www.blogspirit.com/graphics/portal/logo.png" alt="Blogspirit"
title="blogspirit.com" />



Your image is not centered ?
You just need to put in a box