Крутые идеи, которые помогут навести в столе идеальный порядок. Организуй это! Проект организации рецептов из журналов Разделитель для бумаг своими руками

Посмотрите на тестовом блоге, как это работает

Давайте разберёмся как сделать переход по якорным ссылкам внутри страницы в Блоггере. Все достаточно просто.

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

Чтобы вам не морочить лишний раз голову даю сразу готовый код полностью. Вы его можете скопировать и испробовать на своей странице в тестовом блоге, перейдя в редакторе сообщений в режим HTML. И разберём что тут наделано

• С чего начать


• Как сделать


• Где взять


• Как реализовать

С чего начать

Как сделать

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!

Где взять

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!

Как реализовать

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rerum deleniti quibusdam molestiae esse ad iusto natus, asperiores doloribus impedit quia quasi placeat unde recusandae ut fuga enim vel incidunt sed perspiciatis magni culpa corporis hic! Ducimus distinctio esse quod eius repudiandae at magni repellat, expedita molestiae, delectus, aliquam laborum vel eveniet reprehenderit sunt voluptate similique!

И коде HTML, соответственно добавляя такие участки текста

Как реализовать
ТУТ БУДЕТ ВЕСЬ ВАШ ТЕКСТ

Если вы прописали якоря при редактировании сообщения не переключайтесь на вкладку "Создать", работайте и пишите сообщение в режиме HTML. Тогда якоря останутся в первоначальном виде. Иначе просто произойдёт автозамена (это капризы Блоггер).

Тут какое - то название

Будут выглядеть так

Если пока тяжело работать в режиме HTML и, чтобы всё корректно сработало в этом случае, нужно просто немного ссылки изменить, чтобы тег якоря выглядел так

Где https://n-t-b-b.blogspot.com/2019/08/blog-post.html это ссылка на страницу, которую можно увидеть справа в редакторе сообщений в настройках здесь

Вот так всё достаточно просто. В Блогах на Wordpress есть специальный плагин для таких целей. На Блоггер это легко реализуется с помощью такого кода. Удачи всем.

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

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

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

.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}



var toc_config = {
url: "https://"+window.location.hostname,
containerId: "table-of-content",
showNew: 15,
newText: " новое",
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",

!function(e,o){var t=o.getElementById(toc_config.containerId),c=o.getElementsByTagName("head"),n=;e=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)&&rg;++g){l+=""+n[g]+"",l+="";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+="

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

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

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

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

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

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

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

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

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

присоединяйтесь к странице Facebook шпаргалки блогерши

.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; }
}

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

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

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

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

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

Я в Twitter