Posts Tagged ‘ css’ - dev.webonomic.nl

Posts Tagged ‘css’

CSS Counter for search results

Wednesday, October 22nd, 2008

Most SEO (Search Engine Optimization) experts claim they can offer services to any webmaster by helping pushing more traffic to their websites. Not necessarily the PageRank, which is an importance ranking of Google, but the position in Google result pages will be the goal most people are targeting.

Inbound links help, but most traffic to ordinary sites will come from search engine result pages. Even my aunt simply types everything in Google, including URL’s.

The power of Google is that they made their homepage so simple, and the searchbox is so centered, that newbies automatically start typing in there. Addressbar, what’s that? Even the technically smart and userfriendly way of making the addressbar a super searchfield, which was introduced years ago by Opera – and stole my heart immediately – and that is now copied by Firefox and Chrome, and now known as Omnibox – is too difficult for computer illiterates

I’m getting of topic. For generated traffic it does make a difference if your website is listed 7th or 68th. I prefer to have the default amount of results changed to 100. Sometimes it’s a bit hard to see, their is no explicit numbering in Google or Yahoo, so I’ve created a little CSS file that adds a that number: Search Engine Counter CSS

Works in Google

Google counter

Works in Yahoo

Yahoo counter

As a CSS Userfile

For Opera users just save this file in the User CSS directory, normally in the profile/css/user path. The you can simply select it in the dropdown menu.

Operation

Working in Opera

As a Javascript bookmarklet

An alternative way of operating is a bookmarklet powered by Javascript. Drawback: it doesn’t work, when javascript is disabled.

To install it: drag the bookmarklet to your Bookmarks Toolbar, Links Bar or Personal Bar or whatever it’s called.
Result-counter

A bookmarklet is a little javascript helper to execute some small automated tasks in your web browser

Use: push the button on a Google or Yahoo result page.

Tags: css, SEO
Posted in CSS3, Javascript, SEO | No Comments »

4 Comments

SVG Gradient Background in Opera (9.6)

Monday, September 15th, 2008

Intro

There is a lot going on in the CSS3 and HTML5 development. Rounded borders (radius) and multi-image backgrounds are both supported in latest Safari/Webkit and Firefox beta’s. Opera has always been a pioneer with CSS and SVG support and has chosen to walk a more interesting road. Opera gives you the opportunity to treat SVG objects as any other image including background image declared in CSS. An SVG-object as a background options gives you all the power of radius and multi-image background plus a lot more: stars, ellipse, triangles, multi-images, animated background and easy javascript driven user customisable backgrounds.

Examples

Let’s have some examples.

SVG backgrounds are really nice and powerful. SVG can be used for gradients, rounded corners, watermarks, graphics and even animated backgrounds. SVG can also be used for list style images for and <li> elements in ordered and unordered lists.

There is a bug though. If you give a div a border there are rendering issues as you can see here.

Screenshot in Opera 9.6

Screenshot Opera 9.6

Example 1 Background

Lorem ipsum dolor sit amet consectetuer Ut ut laoreet auctor senectus. Ornare aliquam adipiscing Proin condimentum neque Nullam senectus Curabitur Aliquam Vestibulum. Morbi congue et pede ligula dictum pretium mauris nonummy ipsum In. Adipiscing a condimentum pede et felis faucibus id porttitor et laoreet. Donec pede semper hac quis wisi In eget et leo dui. Justo Vestibulum.

Eros nibh dis ultrices Vivamus quis nibh dolor consectetuer ipsum pharetra. Quisque vestibulum Suspendisse ac nibh ac tempus neque Lorem laoreet diam. Cursus porta ut accumsan orci pretium wisi Nam mattis sed libero. Metus dictumst Curabitur urna dui nec condimentum dolor sem laoreet penatibus. Lacinia egestas ligula accumsan et elit eget a Aliquam lacus Sed.

Example 2 Background with border

Example 3 Background with padding

Lorem ipsum dolor sit

Example 4 Background with border and padding