Плаващо добавяне към социалната лента

Доколкото виждам, този модел на социализация на сайта е много популярен днес - виждам подобен панел в много чужди блогове. Правилно е - този вариант е най-удобен за посетителя - каквато и част от статията да прочете, този панел винаги е пред очите му, т.к. той се фиксира на едно място при превъртане на текста на страницата.

Позволете ми да подчертая няколко точки:

  1. Скриптът няма да работи в IE6, защото е IE6! Не си струва да пишете допълнителен код за него. И липсата на панел в този допотопен браузър няма да повлияе по никакъв начин на работата на сайта.
  2. В панела използвам много красиви икони, които са включени в комплект, наречен „Векторни икони за социални медии“. Можете да ги изтеглите безплатно от тук.
  3. Някои икони (My World, Bobrdobr, Memori.ru) трябваше да направя сам, а някои (VKontakte, Livejournal) намерих от Миша Шакин.
  4. Както и преди,целият HTML код на бутоните се намира директно в скрипта. По-добре е, защото:
  5. първо, допълнителни външни връзки няма да се показват на сайта (т.е. PR страниците няма да текат);
  6. второ, HTML кодът на страниците няма да бъде затрупан с кода на бутоните;
  7. трето, поради кеширането на скрипта от браузъра, скоростта на зареждане на страницата ще бъде малко по-бърза.

Направих3 опции за панела по ваш избор: 1-ва - всички икони винаги се показват, 2-ра - абсолютно същата като в моя блог, с превключване, 3-та - опция "неплаваща".

Разглеждаме отделен пример на живо и го изтегляме, ако е необходимо:

Изтегляния: 6262Размер: 27 Kb

Разглеждаме отделен пример на живо и го изтегляме, ако е необходимо:

Изтегляния: 4569Размер: 27 Kb

Поради многобройнитепо желание направих и пример, в който панелът просто е разположен хоризонтално след текста.

Изтегляния: 2858Размер: 23 Kb

Свързваме jQuery към сайта (ако вече не е свързан), като добавяме следния ред към секцията:

Свързваме скрипта по същия начин (веднага след jQuery):

В шаблона на нашия сайт търсим кода, който показва текста на статията, и точно преди него или непосредствено след него свързваме функцията на скрипта:

За потребителите на WordPress този ред ще изглежда така:

Добавете следните стилове към листа със стилове на вашия сайт (в зависимост от варианта на панела, който използвате):

За 1-ви и 2-ри примери:

Обърнете внимание, че блокът #socializ няма ляво свойство. Това се прави умишлено, така че панелът да е разположен хоризонтално не спрямо ръба на прозореца на браузъра, а спрямо родителския блок, в който е свързана функцията на скрипта.

За третия пример:

В горната част на скрипта намираме следните редове и посочваме необходимите стойности за вашия сайт:

Работи в различни браузъри (минус IE6). Проверено в Opera, FireFox, Chrome, Safari (има бъг), IE8, IE7.

Това е всичко. Надявам се, че ще се насладите.

Контент студио "100 текста" пише уникални статии и текстове по поръчка. Това включва копирайтинг, пренаписване и SEO текстове.