Как поменять иконку анонимного комментатора.

анонимный комментаторВсем доброго времени суток. Сегодня затрону тему комментарии блога. А именно, поговорим об аваторе анонима. Вы  конечно же обращали внимание, что в комментариях блога на месте анонимного комментатора отображается просто вот такой серый квадратик.
Есть несколько способов, как заменить это на другую иконку. И хочу  сегодня вам предложить самый простой. А именно, как с помощью CSS сделать свой аватор анонимного комментатора. 



Чтобы реализовать это у себя в блоге, пойдём во вкладку шаблон-изменить HTML. Расскрываем полностью все CSS коды шаблона. Поясняю для новичков. Где-то в самом начале шаблона нужно найти вот такую строку  <b:skin>...</b:skin>  и нажать на чёрный маркер слева. Далее прокручиваем вниз и находим такой участок кода

/* Comments
----------------------------------------------- */
.comments .comments-content .icon.blog-author {
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
}

Сразу под ним нужно установить вот этот код.

.comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] { content: url( http://s019.radikal.ru/i644/1504/53/5135d81ee1af.png); }

Дело в том, что если нажать картинку аватора анонима и копировать URL, то адрес будет выглядеть таким образом http://img1.blogblog.com/img/anon36.png.

Сохраните шаблон. В итоге вместо серого окошка получаем примерно такое.
анонимный комментатор

То что выделено в коде синим цветом, это адрес нового изображения. Можете поменять на свою иконку анонимного пользователя. Если хотите воспользуйтесь вот этими вариантами. Адреса под каждой картинкой.
http://s018.radikal.ru/i510/1504/a1/ad730759887e.png

http://s56.radikal.ru/i151/1504/f1/64086b0fc745.gif

http://s020.radikal.ru/i720/1504/7c/5315532ae450.png
http://s017.radikal.ru/i420/1504/78/1b4d45aa5d7a.png

Вот так просто у нас в комментариях буде красоваться аноним. Признаюсь, что сама не очень люблю таких комментаторов и не всегда  отвечаю им. Но бывают случае когда понятно, что человек просто не смог воспользоваться предложенными Блоггер вариантами отображения имени.

На этом сегодня заканчиваю. Спасибо, что читаете мои шпаргалки. До новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


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

  1. Этот комментарий был удален автором.

    ОтветитьУдалить
  2. Код получился вот такой:
    /* Comments
    ----------------------------------------------- */
    .comments .comments-content .icon.blog-author {
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEgAACxIB0t1+/AAAAAd0SU1FB9sLFwMeCjjhcOMAAAD+SURBVDjLtZSvTgNBEIe/WRRnm3U8RC1neQdsm1zSBIU9VVF1FkUguQQsD9ITmD7ECZIJSE4OZo9stoVjC/zc7ky+zH9hXwVwDpTAWWLrgS3QAe8AZgaAJI5zYAmc8r0G4AHYHQKVwII8PZrZFsBFkeRCABYiMh9BRUhnSkPTNCtVXYXURi1FpBDgArj8QU1eVXUzfnjv7yP7kwu1mYrkWlU33vs1QNu2qU8pwN0UpKoqokjWwCztrMuBhEhmh8bD5UDqur75asbcX0BGUB9/HAMB+r32hznJgXy2v0sGLBcyAJ1EK3LFcbo1s91JeLwAbwGYu7TP/3ZGfnXYPgAVNngtqatUNgAAAABJRU5ErkJggg==);
    }
    .comments .avatar-image-container img[src="http://img1.blogblog.com/img/anon36.png"] { content: url( http://s018.radikal.ru/i510/1504/a1/ad730759887e.png); }
    .comments .continue {
    border-top: 2px solid $(link.hover.color);
    }
    Но дяденька в шляпе не появился?

    ОтветитьУдалить
  3. Извиняюсь, Вика, он появился, но не там, где я ожидала - в конце статьи. В гаджете "Последние комментарии" без изменения, только буквы "Аn".

    ОтветитьУдалить
  4. Да он не в гаджете , а в комментариях должен быть. Всё правильно у тебя. Аноним на месте.

    ОтветитьУдалить
    Ответы
    1. Олеся, попробуй вставить перед ]]> вот такой код
      .avatar-image-container{width:35px;height:35px;margin-top: 1px;}
      .avatar-image-container img {background:url(http://lh5.googleusercontent.com/-ZO948J5_qBs/TftwGBrlRwI/AAAAAAAACPM/p9n3UVcnZbI/s800/soc-gravatar.png);width:35px;height:35px;} Только поменяй в скобках адрес изображения

      Удалить
    2. Код вставила - никаких изменений. А теоретически можно анонима и в гаджет вывести?

      Удалить
    3. Олеся, с этими гаджетами комментаторов всегда и везде были проблемы. Кодов этих пруд-пруди. Каждый пишет на свой лад. И буквально практически все очень капризные. Ладно, не морочь себе голову.
      У меня на этом блоге матрёшка анонима стоит и пусть себе стоит.

      Удалить
    4. Спасибо за ответы. Я не сильно-то и переживала, что аноним какой-то не такой. Просто хочется чего-то нового в блоге, так поиграться. Мне все хочется найти как сделать (по аналогии как у нас слева фиксированные соц. сети) справа конвертик с формой для связи. Но это тоже не гружу, просто ради интереса.

      Удалить
  5. Олеся, про соц.сети вот этот пост http://www.shpargalochki.ru/2014/09/vertikalnaja-panel-knopok-pluso.html#more, а про конвертик я что-то не поняла. Какой. Играйся. Это увлекает и что-то новое.
    вообще походи в содержании блога во вкладке дизайн.

    ОтветитьУдалить
  6. Прикольно, я подумаю над этим.

    ОтветитьУдалить
  7. Привет, Иван. Я думаю, что ты понял из комментариев, что если в блоге гаджет последних комментариев. Эта иконка не отображается.

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

Пользовательский поиск