Опера България

(You may check this instead: Opera banners)

Intro

First of all, you may be wondering what the Opera affiliate program is all about. More or less, it is a way to recommend the Opera browser by displaying an ad image in your site, while getting some kind of recognition for doing it. Currently there is no further info available, but you can peek on Tamil's blog.

If your blog runs on My Opera community, then you have a quick way to enable a Download Opera banner in your sidebar. The banner would be affiliate-ready:

• First, login to your My Opera account.
• To enable the banner in your personal blog, go to your top My Opera page menu, select My Page, Account, Sidebars and Menus, and enable Opera banner.
• If you want to enable the banner in your group's blog, go to your blog's page. From the top My Opera page menu select Group, Group Account, Sidebars and Menus, and enable Opera banner.
• Now visit your blog -- the banner should be visible in your sidebar.

Replacing the banner

Currently, the banner image URL is hard coded in your blog, and it looks like the one on the left.

You might want to use another image. In our Opera Bulgaria pages we wanted to have a similar banner in Bulgarian. So we took the original image, played on it using Gimp, and generated the image on the right. (If you like, you can use our Gimp file as a template to create your own banner.)

Now that you have created your own banner, you need to upload it -- go to the top My Page menu, select Files, and use the file uploader.

Having uploaded your file, you can copy its URL from the file list. In our case the URL is:
http://files.myopera.com/vladimirg/bulgarian/opera240x120_bg.jpg

How to apply this new banner? My Opera introduces the banner using this kind of HTML code:

<a href="…" id="getopera" class="hidemobile" title="…">
  <img src="/community/graphics/affil/opera240x120.jpg"
    width="240" height="120" alt="…">
</a>

Thus we put a CSS spell on it by utilizing the id="getopera" hook.

• Let's go to your blog's Design page. In case we work on your personal blog, go to your top My Page menu and select Design. In case we work on your group's blog, go to your group's page, click on the top Group menu and select Design.
• You get the list of possible themes. Above them you see a link to your custom style sheet. Click on it. (If you can't see the link, you might have to select any other theme but the first one.)
• You get a text area with with your custom CSS code. Add the following:

/*
* Replacing the English banner
* with a localized one
*
* The :lang(bg) suffixes below
* ensure the banner is only replaced
* for Bulgarian visitors.
* Of course, you can use any language code instead.
* If you want the banner to be replaced
* for all visitors, simply omit the :lang(bg) suffixes.
*
* Setting the new banner
* as a background of the old one:
* (replace "Image URL" with your image URL)
*/
#getopera:lang(bg) { background-image:url(Image URL); }
/*
* Hiding the old banner:
*/
#getopera:lang(bg) img { visibility:hidden; }

Or the comments-free version of the same thing:

#getopera:lang(bg) { background-image:url(Image URL); }
#getopera:lang(bg) img { visibility:hidden; }

• Save the changes, go to your blog and reload it (F5) to check if the banner is really replaced.

A better solution

EspenAO offers a better solution:

#getopera img { display:none; }
#getopera { display:block; width:240px; height:120px; margin:0 0 10px 0; background:transparent url(Image URL) top left no-repeat; }