Делаем кнопку Pinterest - Pin it в блоге

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

.1.

Для начала сделайте саму кнопку. Я использовала фотошоп и с помощью кистей из этого урока сделала кнопку, так же я добавила прозрачности, чтобы кнопку было еле видно и она не отвлекала от просмотра фото и чтения поста.

Если же не хотите заморачиваться или просто не сильно владеете фотошопом можете поискать в гугл иконки с логотипом пинтереста и использовать их. Загрузите картинку на фотохостинг (я использую photobuket).

.2.

Зайдите в Настройки блога ->Изменить HTML

Нажмите ctrl+f5 и найдите тег </ body  > (удалите пробелы)

Перед ним вставьте данный скрипт, разумеется, заменив текст на ссылку, которую вы получили в первом шаге

 <script>
//<![CDATA[
var bs_pinButtonURL = "http://i1276.photobucket.com/albums/y464/RyleeBlake/Pinterest%20Buttons/Pin1_zpsfae0f285.png";
var bs_pinButtonPos = "center";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'></script>
<script id='bs_pinOnHover' src='http://greenlava-code.googlecode.com/svn/trunk/publicscripts/bs_pinOnHoverv1_min.js' type='text/javascript'>
// This Pinterest Hover Button is brought to you by ryleeblakeblogspot.com.
// Visit http://www.bloggersentral.com/2012/11/pinterest-pin-it-button-on-image-hover.html for details.
// Feel free to use and share, but please keep this notice intact.
</script>
 

Чтобы изменить положение кнопки замените center на:

topleft - для расположения кнопки слева

topright - для расположения кнопки справа


Вот стандартные кнопочки, можете использовать их.

  http://i698.photobucket.com/albums/vv349/Simbirella/_500_600_80_gKsTRI-2.png  

  http://i698.photobucket.com/albums/vv349/Simbirella/_500_4300600_80_gKsTRI.png  

Если вам понравился урок, не стесняйтесь оставить комментарий, это вдохновляет на создание новым, полезных уроков.