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

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

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


    Узнать подробнее
  • 5.jpg
    Online Школа RuElSoft
    - Автоматизация бизнеса
    - Бизнес инструменты
    - БЕСПЛАТНОЕ 4 дневное обучение >> Узнать подробнее

ВАШ ПОДАРОК

Ваша информация защищена на 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>  
   
</noindex>  
</div></div><script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=YOUR-ACCOUNT-ID" charset="windows-1251"></script>

#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
Категория: Скрипты | Теги: Скрипты
Просмотров: 3806 | Загрузок: 0

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


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

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

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

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

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

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

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

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

    ЧИТАТЬ







Гарантированная защита от СПАМа!




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



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


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

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



Загрузка...


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


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


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





нет аватара




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



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



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

РЕКЛАМА



СКИДКА 13%!!!
Кнопка сайта
Если Вам понравился данный материал, то можете рекомендовать его своим посетителям. Если Вы хотите обменяться с баннерами, пишите в форме Обратной Связи.

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

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

Вы хотите достичь финансовой независимости?
Узнайте все секреты построения успешного бизнеса в сети интернет!

Что такое инфобизнес и как он приносит деньги?

Как создать сайт и зачем он нужен в инфобизнесе?

Как зарабатывать в инфобизнесе большие деньги?

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

очень полезные инфопродукты

права перепродажи на все инфопродукты

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

только проверенные способы заработка в Интернете и Инфобизнесе

создание бесплатной рассылки

первый заработок в Интернете

а также Инфобизнес на автопилоте




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

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

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