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

Можно изменить дизайн комментариев блога на совершенно оригинальный вариант. Или хотя бы изменить дизайн окна формы создания у них. Можно нумерацию к каждому  комментарию добавить.

Сегодня мы разукрасим разным фоновым цветом отдельные блоки в комментариях. Примерно так, как вы видите на картинке. Я специально сделала контрастные цвета, чтобы было более понятно, как это выглядит. 

Наглядно посмотреть можно на тестовом блоге

Демонстрация 

Настройка и реализация до безобразия простая. Даже начинающие вести блог легко с этим справится.

Это код, который нужно скопировать.

<style>
.comments .comment .comment-actions a, .comments .continue a {box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;
   border: 1px solid #DDD;
   margin: 0 2px;   text-decoration: none;   border-radius: 4px;   text-shadow: 0 1px 1px white;
   font: bold 11px Sans-Serif;   padding: 2px 10px;   white-space: nowrap;   vertical-align: middle;   color: #666;   background: -webkit-linear-gradient(top, #fbfaf8, gainsboro);   background:    -moz-linear-gradient(top, #fbfaf8, gainsboro);   background:     -ms-linear-gradient(top, #fbfaf8, gainsboro);   background:      -o-linear-gradient(top, #fbfaf8, gainsboro);   text-transform: lowercase;}
.comments .comment .comment-actions a:hover, .comments .continue a:hover {   box-shadow:         inset 0 1px 2px #c4c4c4;   border: 1px solid #AAA;   border-top-color: #999;   text-decoration: none;}
.thread-toggle {   border-radius: 4px 4px 0 0;   border-top: 2px solid $(link.hover.color);   text-shadow: 0 1px 1px white;   font: bold 11px Sans-Serif;   padding: 2px 10px;   white-space: nowrap;   vertical-align: middle;   color: #666;   text-transform: lowercase;}
.thread-toggle a{text-decoration: none;}
.comments .continue a {   float: right;      border-radius: 0 0 4px 4px;}.comments .comments-content .avatar-image-container{border: 4px solid #fcfbf5;border-radius: 5px;box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 0, 0, 0.1) inset;}  .comments .comments-content .comment-thread ol li, .comments .comments-content .comment-thread ol li ol li{   border: 1px groove #acacac;   padding: 10px;   border-radius: 5px;  box-shadow: -moz-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);-webkid-box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);box-shadow: 1em 1em 1em -0.5em rgba(0,0,6,0.5);}
.comments .comments-content .comment-thread ol li:last-child { padding-bottom: 5px; }
.comments .comments-content .comment-thread ol li:nth-of-type(even) { background: #FFDAB9; }
.comments .comments-content .comment-thread ol li:nth-of-type(odd) { background: #D2B48C; }
.comments .comments-content .comment-thread ol li ol li:nth-of-type(odd), .comments .comments-content .comment-thread ol li ol li:nth-of-type(even){ background: #87CEFA; }</style>

Розовым я выделила 3 цвета для данного примера. Можно подобрать оттенки определённого цвета под индивидуальный дизайн. Сделать ярче или приглушённее цветовую гамму. В помощь вам эта таблица цветов HTML. Кто разбирается в стилях CSS тут целое поле для творчества - шрифты, радиусы, границы, тени и прочее.
Готовый код устанавливаем в разделе дизайн- гаджет HTML/JavaScript. Перетащить его куда - нибудь в самый подвал (футер) блога. Название писать не нужно. И постарайтесь запомнить где он у вас, а вдруг захочется поменять или убрать совсем.

 Конечно же, можно было и в самом шаблоне, во вкладке тема перед строкой ]]></b:skin> , но уже без тегов <style> и </style> , но для начинающих немного трудновато, а бывалым - лень. Пусть уж так и будет.

Вот как просто можно разукрасить фон ленты комментариев.

Всем добра и до встречи.

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...

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

Для просмотра можно скопировать любой код и вставить здесь в редакторе. Можно там же поиграться с вашими картинками и стилями. Всё очень просто.

Пример 1.

Прозрачный текст показывает изображение за ним, которое уже отрезано от формы текста.

<style>.text{
    font: bolder 12vw 'Alfa Slab One';
    text-align:center;
    margin:0;
    background: url("https://rpsthecoder.github.io/img-repo/Taitō%20by%20Jezael%20Melgoza.jpg") center;
    background-size:contain;
    margin:auto;
    width:75vw;
    background-clip: text;
    -webkit-background-clip:text;
    color: transparent;
}</style>

<div class="text">Привет
</div>

Пример 2.

CSS свойство mix-blend-mode определяет режим смешивания цветов выбранного элемента. С помощью режимов наложения объекты смешиваются друг с другом и получается интересный результат. В качестве фона во всех случаях возьмём любое изображение.

<style>.backdrop {
    background:url("https://img1.badfon.ru/wallpaper/big/0/2b/rozochki-cvetochki-fon.jpg") center;
    background-size: contain;
    margin:auto;
    width: 55vw;
}

.text {
    color:white;
    border:4px solid;
    background: rgb(100, 149, 237);
    mix-blend-mode:multiply;
    font:bolder 12vw 'Alfa Slab One';
    text-align:center;
    margin:0;
}</style>

<div class="backdrop">
<div class="text">
Привет</div>
</div>

Стоит поиграться с фоном background: rgb(100, 149, 237);так как, если картинка имеет более светлый фон, то его лучше сделать темнее. Или наоборот. Многократного смешивание сохраняет темные цвета темными, а более светлые цвета пропускают все, что находится за ними.

Пример 3.

Если добавить значение text-shadow с большим значением радиуса размытия и получить более облачный эффект, наложить немного движения, получим эффект свечения. Очень красиво.

<style>.backdrop1 {
    background: url("https://img1.badfon.ru/wallpaper/big/0/2b/rozochki-cvetochki-fon.jpg")
        center;
    background-size: contain;
    margin: auto;
    width: 75vw;
}

.text {
    color: white;
    border: 4px solid;
    background: rgb(188 143 143);
    mix-blend-mode: multiply;
    font: bolder 12vw "Alfa Slab One";
    text-align: center;
    margin: 0;
    animation: glow 3s infinite;
}

@keyframes glow {
    0% {
        text-shadow: 0 0 10px white;
    }

    15% {
        text-shadow: 2px 2px 10px rgba(255, 255, 255, 1),
                   -2px -2px 10px rgba(255, 255, 255, 1);
    }
    30% {
        text-shadow: 2px 2px 4px rgba(255, 255, 255, .7),
                   -2px -2px 4px rgba(255, 255, 255, .7);
    }
    50% {
        text-shadow: 20px 20px 50px rgba(255, 255, 255, .5),
                   -20px -20px 50px rgba(255, 255, 255, .5);
    }
}</style>
<div class="backdrop1">
    <p class="text">Привет</p>
</div>

Пример 4.

А здесь сделаем некое движение текста. При просмотре результата подведите курсор к тексту.

<style>.backdrop {
    background-size: contain;
    background-position: center;
    margin: auto;
    margin-top: 40px;
    width: 60vw;
}
.backdrop.shibuya {
    background-image: url("https://img1.badfon.ru/wallpaper/big/0/2b/rozochki-cvetochki-fon.jpg");
}

.text {
    color: white;
    border: 4px white solid;
    mix-blend-mode: multiply;
    font: bolder 12vw monospace;
    text-align: center;
    margin: 0;
    cursor: pointer;
    transition: text-indent 0.5s;
}

.text:hover {
    text-indent: 5px;
    transition: text-indent 0.5s;
}

.text:hover::before {
    display: inline-block;
    content: "ОК!";
}


.text.shibuya {
    font-family: "Bungee Shade", cursive;
    background-color: rgba(100, 149, 237, 1);
    outline: 4px rgba(100, 149, 237, 1) solid;
    font-size: 8vw;

}</style>

<div class="backdrop shibuya">
<div class="text shibuya">
привет</div>
</div>

Попробуйте такие необыкновенные эффекты на блоге со своими изображениями и другим фоновым цветом. Стоит поэкспериментировать ещё и с чёрно - белым вариантом. Необычно и привлекательно.

Готовый код вставляем в тело поста в режиме HTML в нужном месте. В канун праздников можно оформить поздравления. Установить код в гаджет  HTML/JavaScript над сообщениями или на отдельной странице.

👇

Получайте новые сообщения с блога прямо на почту

Введите Ваш email

Подробнее...

Доброго времени суток, друзья. Платформа BLOGGER предоставила нам гаджет Translate (переводчик), что очень удобно для перевода содержания блога на другие языки. Но, выглядит он достаточно скромно.

Сегодня покажу вам, как можно его немного стилизовать, чтобы был хоть чуть - чуть интереснее и "не как у всех".

У нас будет красиво оформленная кнопка, при нажатии на которую откроются все языки Гугл предлагаемые для перевода содержания.

Демонстрация 

Делать не нужно абсолютно ничего, просто скопируйте предложенный ниже код и установите его в гаджет HTML/LavaScript на желаемое место в вашем блоге.

<style>
.goog-te-gadget-simple .goog-te-menu-value span {
    text-decoration: none;
    color: #fff;
}

.goog-te-gadget-simple {
    background-color: #436EEE !important;
    border-left: 0px solid #d5d5d5 !important;
    border-top: 0px solid #9b9b9b !important;
    border-bottom: 0px solid #e8e8e8 !important;
    border-right: 0px solid #d5d5d5 !important;
    font-size: 10pt;
    display: inline-block;
    padding-top: 1px;
    padding-bottom: 2px;
    cursor: pointer;
    zoom: 1;
    margin-top: 10px !important;
    border-radius: 4px;
margin-right: -13px !important;
}

.goog-te-gadget img {
    vertical-align: middle;
    border: none;
    display: none !important;
}

.goog-te-gadget-simple .goog-te-menu-value span {
    text-decoration: none;
    margin-right: 5px !important;
color:#fff !important;
}

.goog-te-gadget-simple:hover {
background: #C1CDC1 !important;
transition:all 0.8s;
}</style>
<div id='google_translate_element'/><script type='text/javascript'>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({pageLanguage: &#39;ru&#39;, layout: google.translate.TranslateElement.InlineLayout.SIMPLE}, &#39;google_translate_element&#39;);
}
</script><script src='//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit' type='text/javascript'/></script></div>

Цвет самой кнопки #436EEE  поменяйте на соответствующий дизайну блога. Можно использовать эту таблицу.

Чтобы кнопка располагалась по центру нужно заключить весь код в теги

<center>здесь полностью предложенный код </center>

Дополнение к статье

В комментариях прочитала, что не везде этот код работает.  Проблема  возникает и с родным переводчиком и виноват в этом один из кодов Javascript в шаблоне определённого блога. Поэтому предлагаю ещё один вариант (для нетерпеливых). Установила на этом блоге пока для наглядности - посмотрите.

Код для него

<center>
<style type="text/css">
#translator-wrapper {
  display:block;
  width:90%;
  max-width:300px;
  border:none;
  background-color:#336633;
  color:#fff;
  overflow:hidden;
  position:relative;
  height:40px;
  line-height:40px;
  border-radius:4px;
}

#translator-wrapper:hover {color:#fff;}

#translator-wrapper select:hover {color:#fff;}
#translator-wrapper select {
  border:none;
  background:transparent;
  font-family:'Verdana',Arial,Sans-Serif;
  font-size:12px;
  width:100%;
  color:#fff;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-appearance:none;
  cursor:text;
  padding:5px 10px;
}
#translator-wrapper a {
  display:block;
  background-color:#666666;
  border:none;
  color:#fff;
  margin:0 0;
  text-decoration:none;
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  cursor:pointer;
  width:14%;
  transition:all 0.3s ease;
}
#translator-wrapper a:before {
  content:"";
  display:block;
  width:0;
  height:0;
  border:6px solid transparent;
  border-left-color:white;
  position:absolute;
  top:50%;
  left:45%;
  margin-top:-5px;
}
#translator-wrapper a:hover {opacity:0.9;}
#translator-wrapper a:active {opacity:0.9;}
#translator-wrapper select:focus,
#translator-wrapper a:focus,
#translator-wrapper select:active,
#translator-wrapper a:active {
  border:none;
  outline:none;
  cursor:pointer;
}
option {
  background:#444;
  color:#e0e0e0;
}
</style>
<div id="translator-wrapper">
    <select id="translate-language">
        <option value="en" selected />English
        <option value="id" />Indonesian
        <option value="af" />Afrikaans
        <option value="sq" />Albanian
        <option value="ar" />Arabic
        <option value="hy" />Armenian
        <option value="az" />Azerbaijani
        <option value="eu" />Basque
        <option value="be" />Belarusian
        <option value="bn" />Bengali
        <option value="bg" />Bulgarian
        <option value="ca" />Catalan
        <option value="zh-CN" />Chinese
        <option value="hr" />Croatian
        <option value="cs" />Czech
        <option value="da" />Danish
        <option value="nl" />Dutch
        <option value="en" />English
        <option value="eo" />Esperanto
        <option value="et" />Estonian
        <option value="tl" />Filipino
        <option value="fi" />Finnish
        <option value="fr" />French
        <option value="gl" />Galician
        <option value="ka" />Georgian
        <option value="de" />German
        <option value="el" />Greek
        <option value="gu" />Gujarati
        <option value="ht" />Haitian Creole
        <option value="iw" />Hebrew
        <option value="hi" />Hindi
        <option value="hu" />Hungarian
        <option value="is" />Icelandic
        <option value="id" />Indonesian
        <option value="ga" />Irish
        <option value="it" />Italian
        <option value="ja" />Japanese
        <option value="kn" />Kannada
        <option value="ko" />Korean
        <option value="la" />Latin
        <option value="lv" />Latvian
        <option value="lt" />Lithuanian
        <option value="mk" />Macedonian
        <option value="ms" />Malay
        <option value="mt" />Maltese
        <option value="no" />Norwegian
        <option value="fa" />Persian
        <option value="pl" />Polish
        <option value="pt" />Portuguese
        <option value="ro" />Romanian
        <option value="ru" />Russian
        <option value="sr" />Serbian
        <option value="sk" />Slovak
        <option value="sl" />Slovenian
        <option value="es" />Spanish
        <option value="sw" />Swahili
        <option value="sv" />Swedish
        <option value="ta" />Tamil
        <option value="te" />Telugu
        <option value="th" />Thai
        <option value="tr" />Turkish
        <option value="uk" />Ukrainian
        <option value="ur" />Urdu
        <option value="vi" />Vietnamese
        <option value="cy" />Welsh
        <option value="yi" />Yiddish
    </select><a id="translate-me" href="#" title="Translate"></a>
</div>
<script type="text/javascript">
(function() {
    var mylang = "ru", // Your website language
        anchor = document.getElementById('translate-me');
    anchor.onclick = function() {
        window.open('http://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + document.getElementById('translate-language').value + '&hl=en');
        return false;
    };
})();
</script>
</center>

замените background-color:#336633;цвет кнопки
и цвет background-color:#666666; фона стрелки


Никаких сторонних ссылок нет, это тот же самый гаджет Переводчик от Гугл , но в другой красе, скажем так.

Возможно вас заинтересуют ещё варианты переводчика для блога.

Всех с праздником Победы!!!  Всем добра и мира!!!

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

введите пожалуйста свой email :

Подробнее...

Доброго времени суток, друзья. Сегодня для вас код виджета, который будет выводить случайные сообщения при каждом обновлении страницы. Этакая рулетка, когда не знаешь что ожидать. Те читатели, которые присоединились к моему блогу недавно, советую посмотреть ещё вариант  - красивая кнопка случайный пост для блога. Я обратила внимание, что она у многих  "прижилась".

Ну и перейду к теме данного сообщения. Покажу 2 варианта, как отобразить случайные посты блога. 

Будет показан заголовок поста
Оформленная в рамочку миниатюра к сообщению
Дата публикации
 Количество комментариев к сообщению

Установка абсолютно простая - копируем код без всяких изменений, как есть,

 и  устанавливаем его в гаджет HTML/JS в любом месте макета.

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

Ниже для наглядности скриншоты. 

Вариант 1.

Код

<style>
#random-posts img{float:left;margin-right:10px;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>

<ul id='random-posts'>
<script type='text/javaScript'>
var rdp_numposts=5;
var rdp_snippet_length=150;
var rdp_info='yes';
var rdp_comment='Комментариев';
var rdp_disable='Comments Disabled';
var rdp_current=[];var rdp_total_posts=0;var rdp_current=new Array(rdp_numposts);function totalposts(json){rdp_total_posts=json.feed.openSearch$totalResults.$t}document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalposts\"><\/script>');function getvalue(){for(var i=0;i<rdp_numposts;i++){var found=false;var rndValue=get_random();for(var j=0;j<rdp_current.length;j++){if(rdp_current[j]==rndValue){found=true;break}};if(found){i--}else{rdp_current[i]=rndValue}}};function get_random(){var ranNum=1+Math.round(Math.random()*(rdp_total_posts-1));return ranNum};
</script>
<script type='text/javaScript'>
function random_posts(json){for(var i=0;i<rdp_numposts;i++){var entry=json.feed.entry[i];var rdp_posttitle=entry.title.$t;if('content'in entry){var rdp_get_snippet=entry.content.$t}else{if('summary'in entry){var rdp_get_snippet=entry.summary.$t}else{var rdp_get_snippet="";}};rdp_get_snippet=rdp_get_snippet.replace(/<[^>]*>/g,"");if(rdp_get_snippet.length<rdp_snippet_length){var rdp_snippet=rdp_get_snippet}else{rdp_get_snippet=rdp_get_snippet.substring (0,rdp_snippet_length) ;var space=rdp_get_snippet.lastIndexOf(" ");rdp_snippet=rdp_get_snippet.substring(0,space)+"&#133;";};for(var j=0;j<entry.link.length;j++){if('thr$total'in entry){var rdp_commentsNum=entry.thr$total.$t+' '+rdp_comment}else{rdp_commentsNum=rdp_disable};if(entry.link[j].rel=='alternate'){var rdp_posturl=entry.link[j].href;var rdp_postdate=entry.published.$t;if('media$thumbnail'in entry){var rdp_thumb=entry.media$thumbnail.url}else{rdp_thumb="http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg"}}};document.write('<li>');document.write('<img alt="'+rdp_posttitle+'" src="'+rdp_thumb+'"/>');document.write('<div><a href="'+rdp_posturl+'" rel="nofollow" title="'+rdp_snippet+'">'+rdp_posttitle+'</a></div>');if(rdp_info=='yes'){document.write('<span>'+rdp_postdate.substring(8,10)+'/'+rdp_postdate.substring(5,7)+'/'+rdp_postdate.substring(0,4)+' - '+rdp_commentsNum)+'</span>'}document.write('<div style="clear:both"></div></li>')}};getvalue();for(var i=0;i<rdp_numposts;i++){document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&start-index='+rdp_current[i]+'&max-results=1&callback=random_posts\"><\/script>')};
</script>
</ul>

Вариант 2. Картинки круглой формы

Измените немного первый код CSS на такой

<style>
#random-posts img{float:left;margin-right:10px;border-radius: 100%;border:1px solid #999;background:#FFF;width:36px;height:36px;padding:3px}</style>

Здесь же можно поиграться и поменять

Толщину и цвет рамки - border:1px solid #999;

Общий фон - background:#FFF;

Размеры картинки - width:36px;height:36px;

Измените цифру 5; на желаемое число выводимых постов.

Сделайте удобную и интересную навигацию для посетителей с помощью такого виджета случайных сообщений на страницах блога.

Всем добра и до встречи. 

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

введите пожалуйста свой email :

Подробнее...

Привет, друзья. Хочу вам сегодня показать небольшую фишку, о которой многие наверное и не задумывались. Скорее всего, это просто информации для любознательных. Перед публикацией сообщения большинство из нас используют, предоставленную Блоггером функцию, предварительного просмотра. И, обращали ли вы внимание, что в этом режиме мы не можем сделать ни каких действий.

Это функция называется  Click Trap. Если перевести, то более понятно это звучит так - "ловушка щелчка".  Как бы там не было, но blogger использует ее, чтобы предотвратить случайное нажатие на ссылки, когда вы только хотите просмотреть свои изменения. А для некоторых блогеров, Click Trap производит беспокойство.

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

Пример этого поста на картинке

С текстом ничего не могу сделать  - работает Click Trap.

Смотрим сейчас

Текст копируется и ссылочка стала кликабельной. А всего - то я просто в конце сообщения перешла в режим HTML вставили вот такой малюсенький код

<style>.blogger-clickTrap {
display: none!important;
}</style>

Чтобы с каждым сообщением такое не делать, а совсем удалить эту ловушку Click Trap, нужно просто зайти во вкладку тема, найти строку ]]></b:skin> и прямо над ней установить этот код. Но уже без тегов <style>...</style>. То есть так

.blogger-clickTrap {
display: none!important;
}

Сохраните изменения.

Вот так можно обойти ловушку Click Trap в blogger из режима просмотра.

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

введите пожалуйста свой email :

Подробнее...