середу, 6 липня 2011 р.

похожие сообщения с миниатюрами

    Конспектирую новые изменения в шаблоне.
    Добавила себе внизу сообщений такую штуку - похожие сообщения с миниатюрными изображениями:


     Когда задалась вопросом "где это взять?", сразу ринулась к блогеру, думала есть такой гаджет, что-то типа "похожие сообщения" - нет такого. Пошла по блогам, смотреть, кто\что\как это сделал. Обнаружила два способа - простой и не очень.

    Самый распространенный, думаю из-за его простоты, это создать виджет с помощью сайта LinkWithin . Там все просто - вводим в соответствующие поля емейл, адрес блога, выбираем платформу blogger,  сколько похожих сообщений хотим видеть от 3 до 5, если в блоге светлые буквы на темном фоне - ставим галочку, нажимаем большую кнопку "Получить виджет". Дальше делаем все по подсказкам со скриншотами - добавляем виджет, перетягиваем под сообщения, сохраняем. Выглядит выджет так:

 
     Изменить можно только текст над ним - "Дизайн" - "Изменить HTML" - где нибудь среди скриптов вставить строку:

<script>linkwithin_text='ваш текст:'</script>

     Так я сразу и сделала. А потом увидела фиолетовый цвет выделяемого сообщения... Не, ну к сине-голубому блогу оно еще куда ни шло, а вдруг мне стрельнет сделать его желтым, оранжевым или зеленым? Как его изменить не нашла. Весь дизайн виджета идет со стороны сайта разработчика и есть только два варианта расцветки - темные буквы на светлом фоне и светлые буквы на темном фоне. 
    Что ж,  т.к. легких путей мы не ищем, а нам надо все красиво, пошли искать другие варианты. В одном из блогов увидела какое-то не такое оформление виджета и явно заточенный под цветовую гаму блога. Заинтересовалась, а как сделан он? Не без помощи мужа (пользуясь случаем хочу передать привет =) и еще раз спасибо), залезла в код и оказалось, что все оформление в нем сделано не скриптом как в LinkWithin, а с помощью html и css. А молодцы разработчики всунули в код ссылку на свой сайт, где все это добро лежит, где оно и было найдено. В том виде, что там выложено, оно выглядит так:


    Правда я тут уже изменила цвет выделенного сообщения, размер и цвет шрифта (там он задуман жирным и черным). И как-то тесно они друг к другу прижаты. Да и в самом коде есть спорные места... Вобщем, не без помощи мужа, было допилено то того вида в котором оно есть сейчас. Тут уже можно менять что хочешь - цвета, шрифт, размеры, отступы, дорисовывать рамочки - лишь бы знать где и как. Сам код не буду сюда копировать, там довольно понятно все расписано.
    А теперь про различия (кроме внешнего вида): 
- виджет от LinkWithin, как на меня, более рандомно отображает сообщения. Т.е  если есть, например, 20 сообщений с одним тегом, он может показать вместе как ближайшие по дате, так и очень давнишние. А во втором способе - показываются более свежие сообщения с таким же тегом, а очень старые могут так и не мелькнуть в нем. Можно ли это изменить я хз :(
- виджет от LinkWithin отображается как под отдельно открытым сообщением, так и на страницах под каждым сообщением. Второй способ, показывает похожие сообщения только под отдельно открытыми сообщениями, хотя его можно допилить и до отображения на станицах, а вот в   LinkWithin убрать это нельзя.  
- виджет от LinkWithin может вместе показать сообщения с разными тегами, второй вариант показывает только те сообщения, у которых общий тег. Если по количеству их не хватает на заданное вами, показывает столько, сколько есть.
    Я выбрала второй вариант. Повелась на внешний вид, хотя фиолетовый цвет в  LinkWithin не такой уж и страшный...
    Многабукав закончились =) Не знаю, насколько понятно я описала свои вчерашние приключения и насколько интересны они вам. Буду рада если кому-то пригодиться сей вышеизложенный опус. 

зы: если где-то написала глупость с точки зрения специалиста, прошу меня извинить ибо нишарю, пишите где - исправлю =)

UPD 7.07.11 :
- нашли как увеличить рандомность во втором варианте. Все оказалось просто. Во втором куске кода есть max-results= и большая цифра 6 - вот она и ограничивала количество постов из которых оно выбирало что показывать. Муж поставил 999 и вопрос решен. Теперь второй вариант меня устраивает всем.

UPD 11.02.14 :
- оставлю это здесь - как сделать миниатюры от  LinkWithin круглыми.

36 коментарів:

  1. А почему я не вижу этих миниатюр у тебя под постами?((((

    ВідповістиВидалити
  2. О, прикольно, а что изменилось?

    ВідповістиВидалити
  3. Спасибо! Уже воспользовалась информацией,правда осилила только первый способ.

    ВідповістиВидалити
  4. Рада что пригодилось.
    Первый хороший, меня в нем только цвет не устроил, был бы блог пофиолетовее - оставила бы =)

    ВідповістиВидалити
  5. Наташа я уже восхищалась твоим блогом и пользовалась твоими подсказками для украшения блога.У тебя внизу 5 рекламок с предыдущими сообщениями а у меня получилось три.А еще у меня манечка насчет страниц .Хочу чтобы была нумерация.Но мы с сыном не поняли сказал очень сложно,но очень хочется.Может чуть подскажешь Марина на Ностромо Маруша

    ВідповістиВидалити
  6. Спасибо за комплимент, очень приятно =)
    А ты каким способом делала миниатюрки, простым или не очень?
    Если сложным, то там есть строчка var maxresults=5; вот эта цифра указывает на их количество.
    Если простым, то там в выпадающем меню выбирается количество Width: там 3, 4 и 5 можно выбрать.

    ВідповістиВидалити
  7. Наташа конечно простым .Спасибо за объяснение.Еще понравилось что у тебя не значок В, а твоя аватарка .Я хотела заменить значок нов блоге его не видно,а в сообщениях красиво смотрится.Буду заниматься.

    ВідповістиВидалити
  8. В сообщениях отображается аватарка, которая в профиле загружена.

    ВідповістиВидалити
  9. спасибоще! для такого чайника как я ,очень полезный пост :) давно хотела упорядочить свой блог,теперь это реально )))ура! спасибо!

    ВідповістиВидалити
  10. Наташа, здравствуй!
    Я хочу о помощи попросить по второму варианту, не совсем до меня доходит как "допилить" тот код, чтобы были рамочки, пыталась сделать на пробном блоге - не пошло, сама-то давно пользуюсь первым вариантом, и даже фиолетовый цвет мне подходит идеально, но вот не нра общий вид и все тут, и палочки- границы не нравятся никак, и не убираются они...
    не могла бы ты, если не трудно, поделиться кодом "допиленным" до рамочек из второго варианта???
    Если что, то можно на почту: morzhina.an@mail.ru

    ВідповістиВидалити
    Відповіді
    1. Написала на почту, лови :) Не знаю на сколько ты разбираешься в css, если что пиши еще =), спрашивай.

      Видалити
    2. Поймала, спасибо! Разбираюсь немного, но на уровне любителя поковыряться в своем нестандартном шаблоне блога и изменить его до неузнаваемости:
      было: http://btemplates.com/2011/blogger-template-diarynotebook/demo/
      стало: http://anna-morzhina.blogspot.com/
      Если что-то не пойдет, спрошу обязательно, я уже давно пытаюсь найти тот код...

      Видалити
    3. Все получилось!!! Спасибище преогромнейшее, одно не получилось - уменьшить расстояние между строк в тексте под фото, поэтому иногда текст у меня выползает за рамочки...
      http://anna-morzhina.blogspot.com/

      Видалити
    4. Но даже с таким непослушным текстом сижу счастливаяяяяяяяя, спасибо :)))))))))

      Видалити
    5. Рада, что получилось! :) Я тоже на уровне любителя в нем ковыряюсь, но повезло с мужем программистом и если что-то ну уж совсем не понимаю, то зову его =)
      Да, текст почему-то выползает... Глянула у себя, он до рамочки обрезается если слишком длинный. У тебя, правда, тоже обрезается, но все-равно выползает. Гм. Придет муж, спрошу, может посоветует чего :)

      Видалити
    6. Я смотрю через мозиллу, через приложение "жучок" где можно экспериментировать с кодами прямо в браузере, а когда все нужное подбирается, уже вношу изменения в сам код...
      72 пикселя я вычислила, но в коде, установленном, не вижу их...
      и 72 - это выравнивание по ширине картинки, насколько я поняла, потому что я ставила 80 вместо 72-х, и текст заканчивался идеально по правой границе внутри рамки, а с 72 пикс. правая граница сдвинута влево под картинкой...
      п
      Попробовала в мозилле, поставила вместо 65 - 85, и вместо 72 - 80
      получилось идеально, но в коде не вижу где этот момент с пикселями...

      Видалити
    7. Экспериментирую с пикселями, и вот даже 65 можно не трогать, а заменить только 72 на 86 и тогда текст под картинкой выравнивается идеально от левой границы до правой, и тгда все идеально вписывается в рамочку... но где "живут" в хтмл блога эти 72 пикселя???

      Видалити
    8. А раз нет нигде указанной ширины в коде в 72 пикселя, то должно быть указание, что текст по ширине равен ширине картинки, а она 72 пикселя, а вот это я уже не найду без помощи...

      Видалити
  11. Я уже даже из-за этого кое-где названия постов укоротила :))))))))))))

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

      Видалити
    2. О, смотри, у меня там в коде есть строчка: text-transform:none;
      Она убирает заглавные буквы, это может уменьшить межстрочный интервал.

      Видалити
    3. У меня тоже она есть, я поставила твой код, поменяв в нем интервалы, цвета и картинку "no image", я даже ее убирала сейчас - ничего не меняется...
      Зато заметила следующее: пропечатывается определенное кол-во символов, если они влезли компактно в отведенное им расстояние, но заканчиваются где-то в середине слова, то слово обрывается, даже если есть еще много места, а вот если они компактно не входят, то сползают за рамку...

      Видалити
    4. :))))))))))))))) В общем, я на данный момент сделала для себя один вывод: "не хватает мозгИ увеличить эти самые 72 пикселя по ширине для текста - (неф...) нечего писать длинные названия" :))))))))
      Спасибо еще раз, буду думать дальше... может мозг созреет когда-нибудь...

      Видалити
    5. :)))) тоже вариант!
      Я еще у мужа вечером спрошу, может посоветует что...

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

    ВідповістиВидалити
    Відповіді
    1. Пришли к выводу, что у тебя в шаблоне где-то прописана ширина расстояния между буквами для виджетов.
      Допиши после #related-posts a{ строку letter-spacing:0; - слова станут не такими широкими.

      Видалити
  13. Есть, слова сузились, стали входить все символы...СПАСИБО ОГРОМЕННОЕ... А ты у себя код не меняла? Ширину 72, у тебя в строке больше символов стало вмещаться...

    ВідповістиВидалити
    Відповіді
    1. Или это уже у меня "печенюшки" в глазах мелькают, посмотрела на скрин в посте, так и было... это у меня из-за рамки вокруг фото они сдвигаются влево, ладно, оставим как есть, СПАСИБО ЕЩЕ РАЗ!!!

      Видалити
    2. Нет, ничего не меняла. Да, у тебя вокруг картинки еще рамка добавляется. Видимо тоже что-то от шаблона идет...
      Хорошо что получилось! =)

      Видалити
  14. Спасибо за полезную инфу! Мне, как новичку, еще много чего непонятно))) постепенно учусь!

    ВідповістиВидалити
    Відповіді
    1. Пожалуйста! Буду рада, если пригодиться :) Главное, чтоб было желание учиться!

      Видалити
  15. очень полезная статья! Только одно но - у меня нету "вашего" мужа и навряд я смогу сама такое проделать (((
    А так огромное спасибо за данную информацию было очень интересно и познавательно!

    ВідповістиВидалити
    Відповіді
    1. Ну, муж помогал только уж в больно сложных местах, а так там довольно все понятно, если есть какие-то минимальные знания о css и html ;)

      Видалити
    2. А если таких знаний нет, то первый способ вобще оч. простой и его вполне достаточно :)

      Видалити

Мене звати Наташа.
До мене можна на «ти».
Дякую, що завітали і за Ваші коментарі! =)