Блог

0

SEO оптимизация – CSS вместо JavaScript

CSS static-text popup effect

Нека създадем static-text popup изцяло с помощта на CSS. Ето как става това:

<a href=”http://www.mysite.com/css/”>Линкове<span>Напишете тук произволен текст по ваше желание</span></a>

Както можете да видите, “popup” текстът е span елемент, поставен в хиперлинк. Следващото нещо, което трябва да направим е да зададем командата и да забраним на текста да се показва при зареждане на страницата. Това става по следния начин:

div#links a span {display: none;}

Изображенията могат също да бъдат поставяни в хиперлинкове. Ето пример за това:

<a href=”http://www.mysite.com/css/”>Линкове<img src=”ime-na-izobrajenie.gif”>

За да забраним на изображението да се показва при зареждане на страницата (page load), създаваме за целта тази команда:

div#links a img {height: 0; width: 0; border-width: 0;}

От друга страна, ги правим видими, благодарение на следното:

div#links a:hover img {position: absolute; top: 190px; left: 55px; height: 50px; width: 50px;}

CSS image popup effect

Всяка красива картинка, която искате да уголемите, можете да прибегнете до следния CSS popup effect:

<style type=”text/css”>
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>

Ефектът ще се визуализира, когато посетителят позиционира своята мишка върху съответния обект. Можете да включите този “image popup” код в HTML кода на вашата страница.

CSS ефект вместо JavaScript ефект

3D бутонът е друг уеб елемент, който може да бъде създаден с помощта на CSS и който се препоръчва пред създаването на бутони чрез JavaScript. Този запленяващ ефект дава възможността да цъкнем на бутона, когато мишката е върху него. За да постигнете и вие този CSS ефект, поставете кода по-долу във своя HTML код:

a {
display: block;
border: 1px solid;
border-color: #aaa #000 #000 #aaa;
width: 8em;
background: #fc0;
}

a:hover
{
position: relative;
top: 1px;
left: 1px;
border-color: #000 #aaa #aaa #000;
}

Къде CSS трябва да бъде използван с повишено внимание?

Когато кодирате (пишете кода на) вашата уеб страница, използвайки CSS, никога не забравяйте, че търсачките не толерират скрития текст. Когато говорим за SEO, под скрито съдържание се разбира такова съдържание, което е видимо само за търсачките, но не и за хората. Следователно, никога не използвайте CSS дефиниции от типа на “display:none” и “visibility:hidden” или други подобни, с помощта на които можете да скривате секции от своя сайт, които например сте наситили с ключови думи. Такива действия се определят като спам и не са никак препоръчителни.

Друга техника, която трябва да избягвате, когато работите с CSS, а и по принцип, е да задавате един и същ цвят на текста и на неговия фон (background). Такива техники се използват често от спамерите, за да крият изкуствено наситен с ключови думи текст от посетителите. Това може само да навреди на сайта ви.

И накрая нещо много важно – винаги използвайте HTML таговете предназначение. Например, не използвайте CSS, за да променяте функцията на даден HTML таг, ако няма да го използвате.

Употребата на CSS намалява до минимум големината на HTML кода и предоставя прекрасна възможност да се възползвате максимално ефективно от ключовите думи в заглавните HTML тагове (H1, H2, H3 и т.н.). Запомнете, времето, когато търсачките не “разпознаваха” елементарните трикове от рода на “display:none” и “visibility:hidden” e напълно и безвъзвратно отминало. Дори напротив, CSS се индексира чудесно и точно в това се крие неговото изящество по отношение както на уеб дизайн, така и на SEO!

Comments

There are no comments yet.

Leave a Reply

Your email is never published nor shared. Required fields are marked *

*

© SEO оптимизация от инж. Николай Стоянов 2008-2013 г. Всички права запазени.