Подарок
Приветствую Вас Гость RSS
Работа в интернете и финансовая свобода
Построй свой путь к финансовой свободе!
  • 1.jpg
    Школа веб-дизайна Юлии Первушиной
    - Четыре базовых курса, чтобы стать профи
    - Персональный куратор
    - Домашние задания
    - Гарантия дохода от 30 тыс.руб/мес и выше
    Подробнее
  • 2.jpg
    Секреты практического SEO
    Скидка 13%
    Думаю, Вам не нужно объяснять, насколько важно для Вашего сайта иметь первые позиции в поисковых системах по ключевым для Вас запросам.
    Подробнее
  • 3.jpg
    Акции, скидки, распродажи, купоны, возврат за покупку от 7% до 15%!
    И все от AliExpress!

    Узнать подробнее
  • 4.jpg
    Облачный майнинг Hashflare

    Зарабатывайте криптовалюту на удаленном использовании вычислительных мощностей >>


    Узнать подробнее
  • 5.jpg
    - БЕСПЛАТНАЯ 10 дневная бизнес игра
    - Автоматизация бизнеса
    - Бизнес инструменты
    >> Узнать подробнее

ВАШ ПОДАРОК

Ваша информация защищена на 100%! Гарантированная защита от СПАМа!


Давайте дружить;)



Скрипты [8]Макеты сайта и его составляющие [2]

Программы и обучалки » Скрипты для сайта » Скрипты » Как установить боковую панель социальных закладок?


Как установить боковую панель социальных закладок?

17.10.2013, 11:48

Сегодня я готова поделиться с Вами такой боковой панелью с социальными закладками. Как она работает и что даёт? Как видно на картинке, после добавления кода на сайт, сбоку слева появится мини-панель с кнопками социальных закладок, нажав на которые пользователи смогут поделиться Вашим сайтом со своими друзьями. В общем, будут вопросы – стучитесь в комментариях.

Итак, как установить боковые кнопки социальных сетей?

 

Установка:

#1 В CSS сайта в самый верх копируем следующий код:


Код
/* Fixed Positioned AddThis Toolbox  
Устанавливаются в самом верху*/  
.addthis_toolbox {  
position: fixed;  
top: 30%;  
left: -5px;  
border: 1px solid #ddd;  
padding: 5px 5px 4px;  
width: 32px;  
-moz-border-radius: 4px;  
-webkit-border-radius: 4px;  
border-radius: 4px;  
}  

.addthis_toolbox .custom_images a {  
width: 32px;  
height: 32px;  
cursor: pointer;  
}  
.addthis_toolbox .custom_images a img { border: 0; margin: 2px 0; opacity: 0.6; }  
.addthis_toolbox .custom_images a:hover img { margin: 2px 0; opacity: 1.0; }

#2 В нижнюю часть сайта в любое место копируем этот код:


Код
<div class="addthis_toolbox">  
<noindex>  
<div class="custom_images">
   
<a rel="nofollow" title="Поделиться в GOOGLE+"  
onclick="window.open('http://plus.google.com//share?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title));return false" ><img src="http://fastzar.ru/crystal/google.png" width="40"/></a>  
   
  <a rel="nofollow" class="addthis_button_twitter" title="Поделиться в Twitter"><img src="http://fastzar.ru/crystal/twitter.png" width="40" /></a>
   
<a rel="nofollow" class="addthis_button_facebook" title="Поделиться в Facebook"><img src="http://fastzar.ru/crystal/facebook.png" width="40" /></a>
   
<a rel="nofollow" class="addthis_button_vk" title="Поделиться в Вконтакте"><img src="http://fastzar.ru/crystal/vk.png" width="40" /></a>
   
<a rel="nofollow" class="addthis_button_mymailru" title="Поделиться в Мой Мир"><img src="http://fastzar.ru/crystal/MRU.png" width="40" /></a>  
<a rel="nofollow" title="Поделиться в Одноклассники" onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title));return false" ><img src="http://fastzar.ru/crystal/OK.png" width="40"/></a>  

  <a target="blank_" href="ВАШ САЙТ"><img title="Новости"src="http://fastzar.ru/RSS/rss.png" width="40"></a>
   
  <a rel="nofollow" class="addthis_button_google" title="Поделиться в Google Buzz"><img src="http://fastzar.ru/crystal/google_buzz.png" width="40" /></a>  
   
  <a target="blank_" href="http://fastzar.ru/load/skripty_dlja_sajta/skripty/bokovaja_panel_socialnykh_knopok/7-1-0-5">  
<img title="Код HTML такой боковой панели закладок" src="http://fastzar.ru/crystal/html.png"></a>
</div></div>

Обновленный код шага #2
(другое изображение иконок)!


Код
<div class="addthis_toolbox">  
<noindex>  
<div class="custom_images">
<a rel="nofollow" class="addthis_button_vk" title="Поделиться в Вконтакте"><img src="http://fastzar.ru/crystal/VK.com-logo.svg.png" width="32"/></a>
<a target="_blank" onclick="window.open('https://www.facebook.com/sharer.php?u=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title));return false">
<img src="http://fastzar.ru/crystal/facebook133.png" width="32"/></a>
<a rel="nofollow" onclick="window.open('https://telegram.me/share/url?url=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title));return false"><img src="http://fastzar.ru/crystal/telegram.jpg" width="32"/></a>
<a rel="nofollow" class="addthis_button_twitter" title="Поделиться в Twitter"><img src="http://fastzar.ru/crystal/twitter-ios-icon.png" width="32"/></a>
<a rel="nofollow" class="addthis_button_mymailru" title="Поделиться в Мой Мир"><img src="http://fastzar.ru/crystal/my_mail_ru.png" width="32"/></a>  
<a rel="nofollow" title="Поделиться в Одноклассники" onclick="window.open('http://www.odnoklassniki.ru/dk?st.cmd=addShare&st._surl=' + encodeURIComponent(location.href) + '&title=' + encodeURIComponent(document.title));return false" ><img src="http://fastzar.ru/crystal/odn.png" width="32"/></a>
  <a rel="nofollow" target="blank_" href="ВАШ САЙТ"><img title="Новости RSS"src="http://fastzar.ru/crystal/5308512183b47b7aa7e58617ce12b073.png" width="32"></a>
<a target="blank_" href="http://fastzar.ru/load/skripty_dlja_sajta/skripty/bokovaja_panel_socialnykh_knopok/7-1-0-5">  
<img title="Код HTML такой боковой панели закладок" src="http://fastzar.ru/crystal/html.png"></a>  
  </noindex>  
</div></div>

#3 Передача в социальную сеть картинки, заголовка и описания. При репосте в социальную сеть Вашей статьи можно самим задать заголовок, описание и картинку, которые будут отображаться в этом же репосте.


Код
<meta name="twitter:card" content="summary">  
<meta property="og:type" content="website">  
<meta property="og:url" content="htt">  
<meta property="og:image" content="http://allsoft.ru/bitrix/templates/allsoft2011/images/8let/dragon_normal.jpg" />  
<meta property="og:title" content="Я – лицензионный Дракон!" />  
<meta property="og:description" content="Результат теста: Дракон почти Ваш «конек»! Вы пока не можете преподавать Драконоведение, но на верном пути!" />

Результат этого примера:


Готово!


Похожие записи:
Обычная панель социальных закладок



Источник:  http://fastzar.ru
Категория: Скрипты | Теги: Скрипты
Просмотров: 4709 | Загрузок: 0

Похожие материалы:


    Для чего нужны мета-теги?

    Для чего нужны мета-теги?

    ЧИТАТЬ
    Для чего нужны мета-теги?

    Для чего нужны мета-теги?

    Мета-теги – специальные, необязательные атрибуты, предназначенные сугубо для поисковых систем. Размещаются мета-теги непосредственно после «Title» в секции <head> могут содержать в себе описание страницы, ключевые слова, запрет/разрешение на индексацию

    Подробнее >>


    Как создать RSS-ленту для сайта?

    Как создать RSS-ленту для сайта?

    ЧИТАТЬ
    Как создать RSS-ленту для сайта?

    Как создать RSS-ленту для сайта?

    На многих движках уже есть встроенные RSS-ленты, осталось их только настроить и добавить в FeedBurner. А как добавить ленту и настроить FeedBurner читайте в статье: Подробнее >>


    Как установить кнопки социальных сетей на сайт?

    Как установить кнопки социальных сетей на сай

    ЧИТАТЬ
    Как установить кнопки социальных сетей на сайт?

    Как установить кнопки социальных сетей на сайт?

    Здравствуйте! Сегодня для Вас очередной интересный скрипт с блоком добавления странички материала в социальные сети для сайта, в котором используется язык HTML. На картинке видно что у Нас должно в итоге получится! Не забываем писать комментарии и вступать в наши группы в социаль

    Подробнее >>


    CSS3Ps — плагин для конвертации PSD формата в стили

    CSS3Ps — плагин для конвертации PSD формата в

    ЧИТАТЬ
    CSS3Ps — плагин для конвертации PSD формата в стили

    CSS3Ps — плагин для конвертации PSD формата в стили

    Очень часто при верстке сайтов приходится сталкиваться с тем, что дизайнер намудрил всяких красивостей и нужно каждый раз разбирать по кусочкам всякие слои с тенями шрифтов. Казалось бы – делай свою работу, тебе за это платят.

    Но, вдруг, откуда не возьмись, появились Подробнее >>








Поделись с друзьями:



Уважаемые пользователи! Если Вы используете информацию с сайта, пожалуйста, ставьте ссылку на источник!


Читайте также:

Лучшие биржи продажи и покупки вечных ссылок
Работа фрилансерам и копирайтерам
Как заработать в онлайн игре ферма соседи? Инвестиции в онлайн игры
Партнерские программы инфопродуктов
Самостоятельная раскрутка сайта с нуля
Лучшие сервисы по добыче Биткоина




Загрузка...


Если Вы нашли битую ссылку, пожалуйста, отпишите в комментарии!


Оставить комментарии:


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]





нет аватара




ОБ АВТОРЕ
TELEGRAM
FACEBOOK
ВКонтакте
МОЙ YOUTUBE
Я В INSTAGRAM
ПОЛУЧАТЬ НОВОСТИ САЙТА
RSS



Подписаться на E-mail:



Давайте дружить;)

РЕКОМЕНДУЮ





Купон: 3G1A10
Кнопка сайта
Если Вам понравился данный материал, то можете рекомендовать его своим посетителям. Если Вы хотите обменяться с баннерами, пишите в форме Обратной Связи.

Работа в интернете и финансовая свобода

Код баннера
<a target="_blank" href="https://fastzar.ru" alt="Работа в интернете и финансовая свобода" title="Сайт Fastzar"><img src="https://fastzar.ru/baner/banner88x31.gif" alt="Работа в интернете и финансовая свобода"></a>
Для добавления сообщения авторизуйтесь

Узнайте все секреты построения успешного бизнеса
на партнерских программах!


Что Вы получите:

бесплатные уроки по созданию собственной системы продаж
список партнерских программ для бизнеса и необходимых сервисов
первый доход в Интернете

Что Вы узнаете:

Как Вам запустить Ваш Интернет-проект, даже если Вы новичок?
Как Вам гарантированно заработать Ваш первый чек через Интернет?
Как масштабировать Ваш бизнес в интернет для увеличения прибыли?
Помогу с автоматизацией продвижения Вашего бизнеса в интернет



Чтобы получить PDF-книгу, Просто введите Ваше Имя и E-mail в форму ниже и подтвердите свой e-mail, ссылка на скачивание будет выслана сразу же в письме.

Ваша информация защищена на 100%! Гарантированная защита от СПАМа!

Оставить отзыв