Привет, друзья. И очередная карта сайта для вас сегодня. Лежит она у меня в "закромах" уже давно, и вот случайно наткнулась на забытое старое. Возможно, кому - нибудь, именно такая придётся по вкусу. Данная  карта блога оформлена в стиле "аккордеон".

Что мы будем иметь в такой карте -

С левой стороны отображаются все ярлыки (рубрики, разделы).
При нажатии на стрелку справа, открываются все посты данного ярлыка.
Настроен лейбл - новое сообщение.
Лёгкая настройка дизайна под ваши стили.
Простая установка на странице.



карта блога

Для просмотра рабочего варианта, перейдите на тестовый блог.



Код

<style scoped="" type="text/css">
.table-of-content{background-color:#008B8B;color:#444;font-family:Verdana,Geneva,Tahoma,Arial,Sans-serif;font-size:13px;font-weight:400;overflow:hidden;border-radius:4px;box-shadow:0 0 10px rgba(0,0,0,.2)}
.table-of-content .toc-header{color:#444;font-family:inherit;font-weight:400;font-size:14px;background-color:#fff;margin:0;padding:15px;overflow:hidden;cursor:pointer;border-bottom:1px solid #ccc;transition:initial}
.table-of-content .toc-header:hover{background-color:#fdfdfd}
.table-of-content .toc-header:before{content:'';width:0;height:0;position:absolute;top:22px;right:15px;border:5px solid transparent;border-color:#aaa transparent transparent;transition:all .3s ease}
.table-of-content .toc-header.active{color:#fc4f3f}
.table-of-content .toc-header.active:before{border-color:#666 transparent transparent;top:16px;-webkit-transform:rotate(-180deg);-moz-transform:rotate(-180deg);-ms-transform:rotate(-180deg);-o-transform:rotate(-180deg);transform:rotate(-180deg)}
.table-of-content .loading{display:block;padding:15px;text-decoration:blink}
.table-of-content ol{margin:0;padding:0;list-style:none;transition:initial}
.table-of-content li{line-height:normal!important;margin:0!important;padding:8px 8px 8px 15px!important;white-space:nowrap;text-align:left;overflow:hidden;background:#808080!important;transition:initial}
.table-of-content a{color:#d9d9d9!important;text-decoration:none;font-size:86%;transition:initial}
.table-of-content a:visited{color:#a2a2a9;transition:initial}
.table-of-content a:hover,.table-of-content a:visited:hover{color:#ffc937!important;text-decoration:none;transition:initial}
.post ol li:before{display:none}
</style>
<div class="table-of-content" id="table-of-content">
<span class="loading">Загрузка...</span></div>
<script>
var toc_config = {
    url: "https://"+window.location.hostname,
    containerId: 'table-of-content',
    showNew: 15,
    newText: ' <strong style="font-weight:normal;font-style:normal;color:#fff;font-size:11px;background:#5c5a78;padding:1px 6px 3px 6px;line-height:normal;float:right;border-radius:3px;">новое</strong>',
    sortAlphabetically: {
        thePanel: true,
        theList: true
    },
    maxResults: 9999,
    activePanel: 1,
    slideSpeed: {
        down: 400,
        up: 400
    },
    slideEasing: {
        down: null,
        up: null
    },
    slideCallback: {
        down: function() {},
        up: function() {}
    },
    clickCallback: function() {},
    jsonCallback: '_toc',
    delayLoading: 0
};
</script>
<script>
!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head")[0],n=[];e[toc_config.jsonCallback]=function(e){for(var o,c,i=e.feed.entry,a=e.feed.category,l="",s=0,d=a.length;d>s;++s)n.push(a[s].term);for(var r=0,f=i.length;f>r;++r)(toc_config.showNew||toc_config.showNew>0)&&r<toc_config.showNew+1&&(i[r].title.$t+=" %new%");i=toc_config.sortAlphabetically.theList?i.sort(function(e,o){return e.title.$t.localeCompare(o.title.$t)}):i,toc_config.sortAlphabetically.thePanel&&n.sort();for(var g=0,h=n.length;h>g;++g){l+='<h3 class="toc-header">'+n[g]+"</h3>",l+='<div class="toc-content"><ol>';for(var _=0,p=i.length;p>_;++_){o=i[_].title.$t;for(var w=0,u=i[_].link.length;u>w;++w)if("alternate"==i[_].link[w].rel){c=i[_].link[w].href;break}for(var v=0,m=i[_].category.length;m>v;++v)n[g]==i[_].category[v].term&&(l+='<li><a href="'+c+'">'+o.replace(/ \%new\%$/,"")+"</a>"+(o.match(/\%new\%/)?" "+toc_config.newText:"")+"</li>")}l+="</ol></div>"}t.innerHTML=l,"undefined"!=typeof jQuery&&($("#"+toc_config.containerId+" .toc-content").hide(),$("#"+toc_config.containerId+" .toc-header").click(function(){$(this).hasClass("active")||(toc_config.clickCallback(this),$("#"+toc_config.containerId+" .toc-header").removeClass("active").next().slideUp(toc_config.slideSpeed.up,toc_config.slideEasing.up,toc_config.slideCallback.up),$(this).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))}).eq(toc_config.activePanel-1).addClass("active").next().slideDown(toc_config.slideSpeed.down,toc_config.slideEasing.down,toc_config.slideCallback.down))};var i=o.createElement("script");i.src=toc_config.url.replace(/\/$/,"")+"/feeds/posts/summary?alt=json-in-script&max-results="+toc_config.maxResults+"&callback="+toc_config.jsonCallback,"onload"==toc_config.delayLoading?e.onload=function(){c.appendChild(i)}:e.setTimeout(function(){c.appendChild(i)},toc_config.delayLoading)}(window,document);
</script>


Можете сразу скопировать код целиком. Зайдите в админпанель блога - вкладка страницы - создать страницу. Сразу перейдите в редакторе страницы в режим HTML, вставьте скопированный код и опубликуйте.

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

Быстро, просто, удобно, красиво.

Всем желаю удачи и до встречи.

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

введите пожалуйста свой адрес электронной почты :

Реклама
С помощью графических программ, как Photoshop,  Gimp и других вы можете создавать анимированные картинки в формате GIF. В этой статье хочу показать, как создавать из текста и изображений мигающие элементы , используя CSS3 и Javascript.

текст и картинка


Выбор CSS3 - это лучше, чем javascript, потому что не так ощутимо тормозит открытие страницы браузера. Эта настройка может быть интересно для того, чтобы выделить конкретный абзац, или  для того, чтобы стимулировать нажатием на какой - то элемент.

Для ясности разделю пост на 4 секции:

мигающий текст с помощью CSS
мигающие изображения с помощью CSS
мигающий текст с помощью Javascript 
мигающее изображение с помощью Javascript 

Для индивидуальных потребностей можно добавить ещё и ссылки.

1. Пример мигающего изображения со ссылкой ( в конкретном случае моя страница на Фейсбуке) на CSS



<div class="blink_text" >присоединяйтесь к странице Facebook <span><a href="https://www.facebook.com/ViktoriyBarad/" target="_blank">шпаргалки блогерши</a></span></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
color: #00f;
font-size:18px;
font-weight:bold;
}
.blink_text a {color:#f00;}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}
</style>


Соответственно меняйте текст и адрес страницы https://www.facebook.com/ViktoriyBarad/.

Это стили текста

color: #00f;
font-size:18px;
font-weight:bold;

Время анимации задано в 1 секунду (настраивается по усмотрению)

2. Пример мигающей картинки на CSS
Я в Twitter


Код

<div class="blink_text" ><a href="https://twitter.com/VikserV" target="_blank"><img src="http://s019.radikal.ru/i618/1406/76/98d12801cd3d.png" /></a></div>
<style type="text/css">
.blink_text {
animation:1s blinker linear infinite;
}
@keyframes blinker {
0% { opacity: 1.0; }
50% { opacity: 0.0; }
100% { opacity: 1.0; }
}

</style>


Настройки аналогичные - ваш адрес и картинка в формате png.

Теперь давайте посмотрим, как реализовать те же самые эффекты с помощью javascript.

1. Мигающий текст на javascript




<div id="blink" style="text-align: center;"> <a href="http://feeds.feedburner.com/shpargalochkiru" target="_blank"><span style="color: #00f; font-size: 18px; font-weight:bold;">Оформите подписку на</span> <span style="color: #f00; font-size: 22px; font-weight:bold;"> шпаргалки блогерши</span></a> </div>  <script language="JavaScript">  function blink_one() {  document.getElementById('blink').style.visibility='visible';  setTimeout('blink_two()',700);  }  function blink_two() {  document.getElementById('blink').style.visibility='hidden';  setTimeout('blink_one()',700);  }  blink_one();  </script>


Меняйте на адрес вашего фида и напишите свой текст.

<span style="color: #00f; font-size: 18px; font-weight:bold;  и  <span style="color: #f00; font-size: 22px; font-weight:bold;" стили шрифта

2. Мигающая картинка на javascript

Моя группа "Блоггер для каждого" ВК


<div id="blink2" style="text-align: center;">
<a href="https://vk.com/public150615645" target="_blank"><img src="https://sun9-8.userapi.com/c840238/v840238441/16f9d/EGtuqtogfw8.jpg" /></a></div> <script language="javascript">
function lampeggiamento(){
if(document.getElementById('blink2').style.visibility=="hidden")
{document.getElementById('blink2').style.visibility= "visible"}
else
{document.getElementById('blink2').style.visibility= "hidden"}
}
setInterval('lampeggiamento()',1000);
</script>


Второй код с картинкой можно использовать вместе с первым, потому что использовали другой идентификатор blink2.

Во всех кодах присутствует тег target="_blank" для открытия ссылки в новом окне.
Каждый из кодов устанавливается на странице в режиме HTML. Так же можно вставить и в гаджет в любом месте макета блога.

Сегодня всё, удачи всем и до встречи.


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

введите пожалуйста свой адрес электронной почты :

Привет, друзья. Буквально недавно, при входе в аккаунт Гугл Адсенс, появилось предупреждение «Вы рискуете потерять доходы – Один или несколько файлов ads.txt не содержат сведений об идентификаторе издателя AdSense!».У  некоторых, естественно возник вопрос «Как быть?» и «Что делать?».

 ads.txt. в Блоггере


Немного разберёмся о чём идёт речь и исправим всё как надо, без паники и за несколько минут.

Файл ads.txt - это обычный текстовый файлик , который  создается в корне сайта. Он нужен для того, чтобы никакие сторонние или левые компании не могли рекламироваться на вашем сайте. Иными словами - это такой “Белый список” из рекламодателей, которые имеют право работать с вашим ресурсом в AdSense.

Если вы работаете только с AdSense, то вам нужно указать это в файле. Если есть какие-то сторонние биржи рекламы, с которыми вы также работаете – их нужно указывать.

Если вы размещаете на блоге рекламу от Google AdSense, то вам необходимо настроить на файл ads.txt. Наличие такого файла позволит вам избежать рисков потери доходов.

Файл ads.txt служит для указания авторизованных продавцов. С помощью файла ads.txt вы можете контролировать, кому разрешено продавать рекламу на вашем сайте (например, AdSense).

Если вы вручную интегрировали AdSense в свой блог или показываете в нем объявления сторонних поставщиков, вам необходимо самостоятельно отредактировать файл ads.txt.

Как отредактировать файл и разместить его в Блоггере.

Вот такое предупреждение было у меня.



Здесь есть 2 варианта.

1. Просто скачать файл себе на компьютер, и потом разместить его в шаблоне. Для Блоггер нужно просто зайти в админпанель - настройки  - настройки поиска. В графе Коммерческое использование - персонализированный файл ads.txt. - включить опцию ДА.  В открывшемся окне вставить всего одну строку из загруженного файла. Не забудьте сохранить изменения.

ads.txt. в Блоггере

Примерно такого вида

google.com, pub-ХХХХХХХХХХХ , DIRECT, f08c47fec0942fa0


Здесь вместо ХХХХХХХХХХХ будет ваш идентификатор в рекламной сети Google AdSense.

2. Вы можете просто взять эту готовую строку и так же установить свой идентификатор.
Узнать его можно в личном кабинете Адсенс. Зайдите в личный кабинет - вкладка аккаунт и в информации об аккаунте есть персональный номер издателя. Смотрим.



Если вы работаете с другими рекламными компаниями то код будет примерно таким

какой - то сайт .com, 43123, DIRECT, AEC242


Расшифрую - адрес сайта, идентификатор, тип сотрудничества, тег, выданный сертификационным центром (но это необязательно).

Ну вот такая информация для тех, кто монетизирует свои блоги . Да, забыла сказать -  если всё сделали правильно, объявление - предупреждение, в аккаунте Гугл Адсенс исчезнет не сразу. Нужно подождать 3 - 4 дня.

То есть вы должны просто создать файл, поместить туда запись, о которой написано выше, после чего  он был доступен по адресу ваш домен/ads.txt. Ничего сложного.

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

введите пожалуйста свой адрес электронной почты :


Доброго времени суток, друзья. Как сделать читабельным URL поста все мы прекрасно знаем. Но обращали ли вы внимание, что на статических страницах адрес выглядит так

URL страницы в блогер

Названия самой страницы мы не видим, а только такой непонятный URL вида

www.shpargalochki.ru/p/blog-page_1.html

Вообще - то это не красиво и не правильно. Адрес абсолютно не читабелен.  Многие добавляют в Google Search Console отдельную карту сайта (файл Sitemap) для статических страниц и их индексации. Нужно и для них прописывать "человекопонятный" URL.

Если у нас для сообщений в редакторе есть функция Пользовательская постоянная ссылка, где мы и задаём читабельный URL, то в редакторе статических страниц (обратите внимание), такой нет.

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

Напишем заголовок страницы не русскими, а латинскими буквами или кириллицей, как хотите, разделяя слова  "-" (дефисом). Можете воспользоваться этим транслитом. Вот так примерно

адрес страницы

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


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

Возникает  резонный вопрос что же делать с уже опубликованными страницами, с неправильными адресами. Тут функция пользовательской переадресации не поможет. 

Нужно сделать новую страницу и перенести на неё содержание старой. И здесь хочу обратить ваше внимание на одну деталь. Сначала нужно прописать название страницы, как написано выше. Опубликовать её абсолютно пустую, а потом вернуться. Перенести содержание старой страницы на новую и написать уже её название русским текстом. Обновить и удалить старую.

По необходимости отправить в Google Search Console новую карту сайта (файл Sitemap) для статических страниц (ссылка выше). И чтобы не выдавало ошибку 404 не забудьте поменять 
во вкладках меню старый адрес на новый.

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

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

введите пожалуйста свой адрес электронной почты :


Приветствую всех, кто читает мои шпаргалки. Наверняка, вы видели на некоторых сайтах страницы "часто задаваемые вопросы" или "F.A.Q ". FAQ (Frequently Asked Questions) – это информационный раздел на сайте, где пользователь может найти ответы на интересующие его вопросы.  Разберём весь процесс установки такого раздела в блоге. Не такой уж он и трудоёмкий .

Пост обновлённый и дополненный информацией.


Для начала идём во вкладку шаблон и сделаем резервное копирование. Нажимаем изменить HTML и c помощью комбинации клавиш Ctrl+F находим заветную строку ]]></b:skin>. Прямо над ней вставляем следующий   код




.halamanfaq{ margin:10px auto; border:1px solid #999; padding:30px; background-color: #F0F0F0; width:100%; font-family: Verdana;}.halamanfaq h3{ margin:0; padding:0; font-size:16px; color: #000000; }.tanya{padding-top:20px} .tanya dt{ background:url('http://1.bp.blogspot.com/-yiR_3QfrvH8/Usuk9P5yoII/AAAAAAAACIg/YH84cO5VXNk/s1600/pertanyaan.gif') 0 3px no-repeat; padding:3px 0 15px 30px; position:relative; color: #990000; text-decoration: none; font-size: 14px; text-shadow: 1px 1px 1px #ccc; }.tanya dt:hover{ cursor:pointer; text-decoration: none; color: #000099; }.tanya dd{ background:url('http://4.bp.blogspot.com/-PapgGRI89Fk/Usuk_I4cmvI/AAAAAAAACIo/yxPF7P4PVU4/s1600/jawaban.gif') 0 2px no-repeat; padding:0 0 5px 30px; position:relative; color:#333; margin-left: 20px; font-size: 12px; line-height: 20px; }.tanya .hover{color:#990000;text-decoration:underline}

Далее чуть ниже есть закрывающийся тег </head>. Можете так же найти его с помощью клавиш Ctrl+F. И над ним устанавливаем этот  код.

<script type="text/javascript">$(document).ready(function () {
$('.tanya dd').hide();
$('.tanya dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){
$(this).next().slideToggle('normal');
}); });</script>


Сейчас  нужно перейти в админ.панель блога и создать новую страницу. Как это делать прочитайте  в статье о страницах в блоге. Переходим из режима создать в режим HTML


 и сразу вставляем следующее-

<h3>F.A.Q - вопросы-ответы </h3>
<dl class="tanya">
<dt>здесь пишем вопрос 1 ?</dt>
<dd>здесь ответ на вопрос 1 </dd>
<dt>здесь пишем вопрос 2?</dt>
<dd>ответ на вопрос 2</dd>
<dt>здесь пишем вопрос 3 ?</dt>
<dd>ответ на вопрос 3</dd>
</dl>
</div>


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

Если всё правильно сделали, поздравляю! Теперь у вас есть своя страница F.A.Q. И добавив чуть-чуть фантазии, то применение ей можно найти практически на любом сайте.

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

Ещё советую прочитать пост о том,  как сделать подстраницы в блоге.

Удачи всем.


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

введите пожалуйста свой адрес электронной почты :

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