28 января 2014 г.

Как добавить кнопку Pin it на фото в блоге

Девочки, привет!
Я сегодня без скрапа, но с полезностями.
Если честно, делать что-либо и некогда, и не хочется. До защиты меньше недели, разрываюсь между работой и академией. А в голове кроме Америки - ничего, чем ближе февраль, тем грустнее(((
И не знаю, с какой радости мне захотелось написать это именно сейчас, наверное сильно по блогу соскучилась))) В общем, сегодня расскажу, как установить кнопку Pin it на фотографии в блоге. Заодно себе только что поставила, полгода собиралась.
Дальше по пунктам.

1. Заходим в настройки блога, выбираем Шаблон. Справа вверху нажимаем кнопку Резервное копирование и восстановление. Обязательно! Все мы умницы-рукодельницы, поэтому пусть лучше будет копия.
2. Затем нажимаем Изменить HTML. Открывается окно с кодом вашего блога. Ищем тег </body>
В браузере можно нажать Ctrl+F - это функция поиска, в окошко вставите тег, и попадете на место, где этот тег прописан.

3. Дальше копируем код и вставляем его перед тегом </body>. 

<script>
//<![CDATA[
var bs_pinButtonURL = "http://3.bp.blogspot.com/-y3xzTGiGzH0/UK4XOaUpdaI/AAAAAAAADw8/Z1MH4Jr4Efo/s1600/pinterestx1_72.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 bloggersentral.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>

Если тег окажется в одной строке с кодом, нажмите Enter, чтобы опустить его на строку ниже. Должно получиться вот так:
Разницу в кодах видите? Сейчас объясню, откуда она.
Разница номер один:

<script>
//<![CDATA[
var bs_pinButtonURL = "https://lh4.googleusercontent.com/93z3Yd5o-i4EQ0n_h9Ih_Ph0dtFfSBUq1oBilqxLhmA=w104-h53-p-no";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>

Красным выделена ссылка на саму картинку. В исходном коде это ссылка на стандартную круглую кнопку красного цвета. Я установила свою.
Важно! При вставке кода вы должны быть уверены, что картинка никуда не исчезнет. То есть картинка Pin it должна храниться в том альбоме, к которому вы имеете доступ, а не неизвестно где и у кого. Поэтому советую загрузить картинку в ваш личный альбом Пикаса, где хранятся все ваши фотографии блога. Когда вы загрузите картинку, нажмите правой кнопкой мыши на нее и выберите "Копировать ссылку изображения". В разных браузерах называется по-разному, может быть не ссылка, а адрес изображения - без разницы. И на место, которое у меня выделено красным, вставьте эту ссылку. Ссылка копируется в буфер обмена, поэтому вы можете просто нажать Ctrl+V.

Вполне возможно, что ваша картинка окажется большого размера. И чтобы она не занимала половину фото, ее нужно уменьшить. Смотрите:

https://lh4.googleusercontent.com/93z3Yd5o-i4EQ0n_h9Ih_Ph0dtFfSBUq1oBilqxLhmA=w104-h53-p-no

w104 - это ширина вашей картинки. Поставьте в пределах 100-150
h53 - это, соответственно, высота. Измените ее пропорционально ширине. Просто возьмите калькулятор и посчитайте. У меня была вот такая математика:
Ширина 414, высота 210
414 делим на 4, получаем 103,5. Я округлила до 104
210 соответственно делим тоже на 4, получаем 52,5. Я округлила до 53

Разница номер два:

<script>
//<![CDATA[
var bs_pinButtonURL = "https://lh4.googleusercontent.com/93z3Yd5o-i4EQ0n_h9Ih_Ph0dtFfSBUq1oBilqxLhmA=w104-h53-p-no";
var bs_pinButtonPos = "topright";
var bs_pinPrefix = "";
var bs_pinSuffix = "";
//]]>
</script>

Красным выделено положение кнопки на фотографии. Мое мнение - ее лучше устанавливать где-то в углу. Потому что когда посередине фото появляется большая красная кнопка, иногда немного раздражает. Ну а может у меня нервы слабые, не знаю)
  • по центру: center
  • верхний правый угол: topright
  • верхний левый угол: topleft
  • нижний правый угол: bottomright
  • нижний левый угол: bottomleft

4. Нажимаем Сохранить шаблон. Кнопка Pin it должна появиться на фотографиях блога.


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

Код нашла вот здесь: 

6 комментариев:

  1. Пасиба! Обязательно воспользуюсь :)

    ОтветитьУдалить
  2. Большое спасибо! Я все сделала)))

    ОтветитьУдалить
  3. Людмила спасибо )) все получилось.

    ОтветитьУдалить
  4. Полезно! надо и себе кнопку заменить)
    Удачи на защите!

    ОтветитьУдалить
  5. спасибо за мк, полезно и все вышло))

    ОтветитьУдалить
  6. Спасибо! Очень полезная информация! :) Воспользовалась)))

    ОтветитьУдалить