BTemplates Blog » Advanced users

How to create a Blogger search

Francisco — Wed, 27 Jan 2010 17:00:00 +0000

The blogs hosted on Blogger have by default an internal search located in the navbar, however, it isn’t possible to customize it or change it in order to make it fit our layout. In the other hand, with HTML and XML we can recreate this internal search and customize it any way we want with CSS stylesheets.

HTML/XML structure

As every search box, it is necessary arrange it as a form with two inputs with the blog’s data to make the search successful. The code is as follows:

The first "input" is the text box in which the user will put his/her query, the second is the submit button, which allows (you guessed it) submit the query in the first "input" to process it. This second "input" comes defined by a image (it may be an icon as well) which is why you only have to put in the address to our image on the src attribute, you can get this address by uploading this image to a free hosting service like Imageshack or Photobucket. That’s the only thing you have to modify in the code above.

This code can be added just before the above code:

Dashboard → Layout → Edit HTML

to show it on the top of the sidebar, but it works on any other location.

CSS Stylesheets

Starting from the classes and ID’s we can apply styles to the form: a background, borders, text format, padding, etc… with CSS. This is an example:

/* Search.
main-wrapper: form */

#search form {
	border:1px solid #999999;
	background:#E5E5E5;
	padding:10px;
	margin:0 10px 15px;
	position:relative;
}

/* Text box */

.searchtext {
	padding:2px 5px;
	color:#999;
	font-size:11px;
	line-height:15px;
	height:15px;
	width:87%;
	border:2px solid #BBDAFD;
}

/* submit button */

.searchsubmit {
	position:absolute;
	right:10px;
	top:10px;
}

And the result is something like this:

This is just an example, but it is ready to use just by modifying the input’s image address, background colors and borders, width and marggins, etc… The CSS code is always located before:

]]>

It’s simple and looks great fixing this important part of our blog.

Adding a sidebar to a Blogger template

Francisco — Mon, 25 Jan 2010 17:16:00 +0000

How to add a new sidebar to a Blogger template is one of the most common questions between the users of the platform for blogs from Google. Adding a second sidebar varies in complexity according to the design in question, so, while some require only a few lines of CSS modification, others will need a total refurbishment that may make it more convenient to change the design.

Broadly speaking the process is as follows:

Analyze the structure and style of the template.
Adding a new editable area, ie the area to add new gadgets.
Modify styles.

To follow this without issues this and any other tutorial that involves making changes in the structure of a blog or website is very advisable to know some html and CSS. So:

Analyze the structure and style of the template

For the majority of the templates, and specially Blogger ones, have a very similar structure, a header with title and description, a wrapper with the main column, a sidebar, and a footer with credits and some other information.

In this case our interest is the wrapper in which we have the content and the sidebar, starting from the Blogger code (Design/Edit HTML) it looks something like this:

This varies a little from one template to the otherplate but broadly speaking is very similar to this. Both main-wrapper and sidebar-wrapper are defined by CSS styles which determine their width, depth and some other features. So, first things first, search this features looking for something like this:

#main-wrapper {
float:left;
width:620px;
/*.... more attributes ... */
}
#sidebar-wrapper {
float:right;
width:300px;
/*.... more attributes ... */
}

Note: It is likely that you won’t find them all together or exactly the same and sometimes, more than once.

Here we need to be aware of the width of each element, to add a new bar we’ll need to change the distribution. By adding the width of the example code we have a 920px total, which will be the available space for the main wrapper and the sidebars.

Add a new editable area.

Adding a new editable area in Blogger is very simple, these are defined by "section" elements that when included into the code they may contain gadgets (page elements). The code for the new editable area is something like:

And to add a new editable area, we just need to add this code just after the existing editable area:

We have to be careful with the ID of the new area, in must not exist in any other "section" element, that’s why in the example it is shown as "sidebar2". The class cannot be repeated and in case of sidebars it is even convenient to be that way. As it is a new area, it doesn’t need to have gadget code, these will be integrated automatically when we add a new gadget from "Page Elements".

Now we have a editable zone but as the template is not prepared it may be shown corrupted, so we need to do some changes.

Modify sytles

We already know the total available width and we have an editable area, so now we have to assign width to each element. Following the example; main-wrapper gets reduced to 540px and sidebar-wrapper, which now contains both sidebars, gets enlarged to 380px. Fitting styles as follows:

#main-wrapper {
float:left;
width:540px;
/*.... attributes ... */
}
#sidebar-wrapper {
float:right;
width:380px;
/*.... attributes ... */
}

This way the available space for both sidebars is 380px. The most common thing to do is to give them the same width, so they will use 50% of the space each. Starting from the IDs of each editable zone we now assign the width of each on and its location (left – right) in the [i]sidebar-wrapper[/i], by adding these styles:

#sidebar {
width:50%;
float:left;
/*.... any other attributes you may find necessary like: padding, margin, etc ... */
}
#sidebar2 {
width:50%;
float:right;
/*.... any other attributes you may find necessary like: padding, margin, etc ... */
}

With this done now we have 2 sidebars 190px wide each, able to support gadgets.

Observations

Some templates may present issues while changing the sidebar’s or main wrapper’s width, specifically those based on fixed images which obviously will not change their size by reducing width. In this case you may edit those images with Photoshop to fit them to the new width.

Conclusion

All in all, this process might get a bit difficult, mostly if you haven’t got too much knowledge on CSS or if the template has a complex structure. The only thing we can recommend in this case is learning some CSS or look for a 3-column template and customize it. Opinions? Questions? Doubts? Fire them off in the comments.

Create a widget to add a link to your blog

Yondri — Mon, 14 Dec 2009 13:50:52 +0000

In this article we’ll show you how to create a widget (code segment) so that your visitors only have to press a button to add a link to your blog on their own.

Go to "Layout" tab.
Add a "HTML/Javascript" element in the section you wanna have the button.
Set the title as "Add us", or any text you want for the button. You can leave it blank too, it will add some default text.
Paste the following code in the "Content" field:
```

<a href="http://YOURBLOG.blogspot.com">TU BLOG</a>
```
Here you have to make some changes:

http://YOURBLOG.blogspot.com – Your blog’s address.

YOUR BLOG – Your blog’s name or an image’s code. It willl be shown in the Blogroll of the one who’s adding you.

Add YOURBLOG to the Blogroll – The message you wanna show on the button.

This code work for another CMS or webs, but it only can be added by Blogger’s users.
Save the changes an it’s done.

Lee este artículo en español.

Is Opera the best browser to use Blogger?

Francisco — Thu, 10 Dec 2009 16:53:26 +0000

There’s a very recurrent issue in Blogger, which happens while trying to upload a template, or while saving changes in a template with expanded gadgets, which leads to the Blogger’ Screen of Death. Another issue is that it makes the links to add new gadgets to disappear and even the editable areas to be not visible. As we mentioned another time, this issue is temporary and there are some alternatives to avoid it. One of those is using a different browser.

So far, the browser which we hadn’t had that issue is Opera, there I’ve been working in a blog even in that point, when Firefox, Chrome and Internet Explorer had the issue. So, ¿Is Opera the best browser to use Blogger? If you use add-ons or features exclusive to another browser then not so much, but I reckon it would be convenient to have it installed if an alternative to solve the problem is required. What’s your experience with Blogger and your browser? ¿Is there an ideal one?

Note: Needless to say, if you have Internet Explorer 6, any other browser is a better option, not only for Blogger.

Use Google Sitemap on Blogger

Yondri — Wed, 02 Dec 2009 02:39:30 +0000

One way to help Google indexing our website or blog, is by telling them the pages we have, when they’re modifiedan when we have new articles. This can be easily done using a simple tool created for this: Google Sitemap. Besides of helping you with Google indexation, this tool can give us our blog’s stats and an error report.

Thank’s to Blogger’s system and other content manager systems, using this tool is pretty simple, and now we show you how:

Go to the main page of Google Sitemap, and login with your Google account (Blogger, Gmail, etc.).
In the text box, write your blog’s URL. “http://yourblog.blogspot.com”.

You’ll enter a panel with a warning, telling you the next step is to verify the site belongs to you. Click that link.

Now it’ll show you two choices to verify your site. Choose “Add a META label” (The other one is not possible with blogger, but it is to any other CMS).
After clicking, the same page show you the META label’s code. Copy this code, but don’t close this page yet. On your blog, go to “Layout” tab, and then to “Edit HTML”. Search for the following code:

And just down, paste the verification code.

On Google Sitemaps, click “Verify” button. If everything is ok, your site will be shown as verified.
Now, on the upper right of your screen click the “Sitemap” tab, and the “Add a sitemap”. Now it will ask you for a type, so select “Add a general sitemap”. By doing this, blogger will show a text field to write your sitemap’s URL On blogger is: http://YOURBLOG.blogspot.com/atom.xm.Replace “YOURBLOG” for your blog’s address or username, and click “Add a web sitemap”.

With this, the service is activated, and within a couple of hours Google will start seeking for your site’s information.

Lee este artículo en español: Usar Google Sitemap en Blogger.

Background image on your website or blog

Yondri — Fri, 06 Nov 2009 04:53:33 +0000

A website’s backgorund is one of the most important elements of the page, is always there and there’s a lot of available space. In this basic article, we’ll show you how to handle your website’s background with an image.

The first thing you should know is that the right way to get a background image is through cascade style sheets (CSS), modifying the “Background” property on the tag.

So, the modification of the “body” tag has to be done in your .css file, or your web’s space where you make the cascade style sheet, for example:

body {
background:#ffffff url(http://www.tu-sitio.com/fondo-web.jpg) top left no-repeat fixed;
}

Color
The first thing we have on “background” is the background color, in this case #ffffff, wich is the color code. You can modify it as you want. When you don’t have a static background image, it would be the color shown as the next image is loaded.

Route
url() is the location of the image we want as the background.

Location
“top” and “left” give the right location to the background image, and the values can be: top, right, center, left or bottom.

Frequency
“no-repeat” menas the image will not be repeated. This property may also have the following values:

repeat – This is the default value, if you don’t specify anything, the image will always repeat.
repeat-x – repeats the background in horizontal way.
repeat-y – repeats the background in vertical way.
no-repeat – doesn’t repeat the background, it will just have the size of the image.

Visualization
“fixed” means we’ll have a quiet background. This may also have the following values:

scroll – This is the default value, if you don’t specify anything, the background image will move with the text.
fixed – The background image will not move with the text.

If you’re usign the new blogger, you have to do this right before the following code:

Static side menu on Blogger

Yondri — Mon, 13 Jul 2009 03:39:19 +0000

Navigation in our blog or website is an important matter to take care of, and menus are very important to do this. Here we’ll show your how to set a static side menu in your website or blog, which means, when you scroll down the menu will be in the same position.

The menu we’re talking about is very popular on blogs, and will see like this:

Go to “Layout” tab, and then to “Edit HTML”.
Search for the following code:

]]>

For other CMS or web system, find the place for styles or your CCS file.

Just before that write the following:

#sidemenu{
   position:fixed;
   text-align:left;

/*If the menu location is not ok, modify the next values */
         margin-top:100px;
   margin-left:-28px;
}

* html #sidemenu{  /*for IE*/
 position:absolute;
 }

#sidemenu a img{
 opacity:1;
 -moz-opacity:1;
 filter:alpha(Opacity=100);
}

#sidemenu a:hover img{
 opacity:0.8;
 -moz-opacity:0.8;
 filter:alpha(Opacity=80);
 position:relative;top:0px;left:2px;
}

* html #sidemenu a img{
 filter:alpha(Opacity=100);
 }

#sidemenu img{
 margin-bottom: -5px;
 }

* html .sidemenu{
 margin-bottom: -3px;
}

Now search for the following code:

For other templates coul be better to find “

”. Fo other CMS find the main div.

Right after that code write the following:

In that code, make the next substitutions:

“http://YOURBLOG.blogspot.com/” – Your blog’s address.
“YOUR-MAIL@servidor.com” – Your e-mail address.
“http://YOURBLOG.blogspot.com/feeds/posts/default” – Replace “YOURBLOG” for that part of your blog’s address.

Save the changes, and that’s it.

Lee este artículo en español: Menú lateral fijo en Blogger.

Metatags on Blogger

Yondri — Sun, 12 Jul 2009 04:31:48 +0000

Metatags are labels with information about our site, like the theme of the website or blog, its description, keywords, author’s information, language, among many others. They are important because help search engines and other web applications to rank your web, so if you don’t have them it makes their work even more difficult, and the result is less visits and visits that are not related with the articles.

One of the most neglected parts in Blogger are precisely the metatags, because they don’t think the proper indexing of your page is important enough. Well, in this article we’ll show you how to place the most important in the home and in the pages of the labels.

Go to “Layout”, and then to “Edit HTML”.

Search for the following code:

<data:blog.pageTitle/>

Under this code will be conditions to show the metatags in their own pages, according to the following code scheme:

As you can see, there is a code for the home and one for labels and will be repeated for each label you want to describe their contents.

Put a header on Blogger’s labels

Yondri — Fri, 10 Jul 2009 03:23:45 +0000

The introduction of the rating trough labels on Blogger was really helpfull to clasify information on our blog, no doub about it. But could be a few details that could make users navigation even more friendly. One of them could be having a header with the most important labels. For example, if you have a section named technology, you can put a legend in the page of the posts with this label, something like “You’re on technology section”.

Let’s see how can we do this:

Go to “Layout”, and then to “Edit HTML”. Check the “Expand widget templates” box.

Search for the following code:

Under this code, we’ll put every message or image we wanna show as header of every label. For this, we’ll use the following model.

Where http://YOURBLOG.blogspot.com/label-address is the label’s address, and Header’s code here is the perfect place to put the header’s code.

You have to follow this model for every label you wanna put a header.

Example:

A text header on my “CSS” label:



You are on CSS section

An image as a header for my “Feed” label:

Where http://site.com/image-address is the addres of the image you want as the header of the “Feed” label.

You can use any of this two options with all your labels, just writing the code of each one under the code of the last one.

Now search for the following code:

]]>

Just before it, paste the following styles:

.status-msg-wrap {
width:100% !important;
margin:0px !important
}
.status-msg-bg {
background:transparent !important
}
.status-msg-border {
border:none !important;
}

Save the changes and it’s done.

Lee este artículo en español.

Social Bookmarking on Blogger

Yondri — Fri, 10 Jul 2009 02:48:57 +0000

Maybe you wonder how to put some social bookmarking icons on every post, so the readers can add this to their favorites, if they use one of these services.

You don’t need to subscribe your blog to any of these services. The links are for the users, so they can subscribe and access to your post anytime.

Now let’s see how to get them:

Go to “Layout” tab, then to “Edit HTML”, and check the “Expand Widget Templates” box.

Search for the following code:

Replace that line with the following code:




Add to Bookmarks:

These are the most popular social bookmarking sites.

Now search for the following code:

]]>

And just before it paste the following:

.rsociales ul {
display:inline;
margin:0pt !important;
padding:0pt !important;
}
.rsociales li {
background:transparent none repeat scroll 0%;
display:inline;
list-style-type:none;
margin:0pt;
padding:2px;
}
.rsociales img {
border:0pt none;
float:none;
margin:0pt;
padding:0pt;
}
.rsociales-sobre {
opacity:0.4;
}
.rsociales-sobre:hover {
opacity:1;
}

These are the styles for the icons of every social network. You can modify them according to your blog.The lats two styles give the icons a transparency effect, wich work fine with Firefox, Opera, Safari and IE7.

Now save the changes, and that’s it.

Lee este artículo en español: Redes Sociales en Blogger.