Все для web-мастеров и создания сайта. » DataLife Engine » Хак - DataLife Engine » Хак виджет социальных закладок

Хак виджет социальных закладок

  • Новость
  • Похожие новости
Admin в 15час. 05мин. пишет:
Хак виджет социальных закладок


Отличный хак социальных закладок, который подходит да же под HTML страницу!

Установка:

1 - Загружаем в в папку JS в своём шаблоне вот этот файл предварительно разархивировав её

2 - далее прописавыем в main.tpl
между тегами и вставляем такую строчку:

<script type="text/javascript" src="{THEME}/js/md-socwidget.js"></script>


После тега вставляем такой код:
<!-- соц виджеты vk и twitter/ -->
        <div class="share">
      <div class="shadow"></div>
        <noindex><a href="http://site.ru/" class="twitter"></a></noindex>
              <noindex><a href="http://site.ru/" class="vk"></a></noindex>
      </div>
    <!-- соц виджеты vk и twitter /  -->


3 - В стилях своего шаблона прописываем (стили обычно находятся по адресу {THEME}/css/style.css):

/* стиль соц. виджетов vk и twitter / */
.share{position:fixed;width:52px;height:315px;right:0;top:50%;margin-top:-158px;}
.share .shadow{position:absolute;width:39px;height:315px;right:0;top:0;background:url(../images/share-shadow.png) no-repeat;}
.share .twitter{position:absolute;height:57px;width:51px;right:0;top:100px;background:url(../images/twitter.png) no-repeat left top;cursor:pointer;}
.share .vk{position:absolute;height:57px;width:51px;right:0;top:150px;background:url(../images/vkontakte.png) no-repeat left top;cursor:pointer;}


4 - Заливаем картинки к себе на сервер в папку images Предварительно разархивировав.

Скачать архив:
Внимание! У вас нет прав для просмотра скрытого текста.


Новый вид topnews

Новый вид topnews


Новый вид вывода популярных новостей с небольшим пред просмотром для Dle.

Меню выезжающее с боку с под категориями

Меню выезжающее с боку с под категориями


Компонент боковое выезжающее меню с под категориями для InstantCMS.


Хак оформления фото

Хак оформления фото


Клевое оформление фото для вашего сайта.

Поисковая форма для сайта с использованием CSS3

Поисковая форма для сайта с использованием CSS3


Поисковая форма является одним из часто используемых элементов веб интерфейса. Ее реализация на сайте является простым способом повысить привлекательность веб сайта в глазах пользователя. В данном уроке мы создадим стильную форму поиска с использованием особенностей CSS3.


Увеличение картинки при наведении курсора

Увеличение картинки при наведении курсора


Как можно сделать интересный эффект увеличения картинки при наведении на него курсора.



Просмотров: 439Дата: 04.05.12
  • Комментарии
  • Вконтакте
  • FaceBook

Какая у вас CMS ?

Datalife Engine
Joomla
Ucoz
Drupal
Wordpress
Другая