Доброго времени суток, друзья. Не так давно обещала выложить варианты оформления страницы 404 в Блоггере. Предлагаю вам несколько таких дизайнерских решений сразу с кодами. 

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

На данный момент она выглядит так.

Не рассуждая долго, посмотрите подборку оформления страницы вместе с кодами. Все проверены и опубликованы на тестовых блогах для наглядности.

Вариант 1. Тёмная страница с неоновым свечением. 

Чтобы посмотреть вбейте в поиск адрес https://b-v-blog.blogspot.com/лоло .

Код

<div id="dendingac_rosanels">
  <div class="dendingac_rosanels">
  <div class="dendingac_rosanels-404">
  <h1>404</h1>
  <h2>страница не найдена</h2>
  </div>
  <a href="http://www.shpargalochki.ru/">можно перейти на главную</a>
  </div>
  </div>
<style>
#dendingac_rosanels {
  position: relative;
  height: 100vh;
  background: #030005;
}

#dendingac_rosanels .dendingac_rosanels {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.dendingac_rosanels {
  max-width: 567px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
}

.dendingac_rosanels .dendingac_rosanels-404 {
  position: relative;
  height: 180px;
  margin-bottom: 20px;
  z-index: -1;
}

.dendingac_rosanels .dendingac_rosanels-404 h1 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50% , -50%);
  -ms-transform: translate(-50% , -50%);
  transform: translate(-50% , -50%);
  font-size: 130px;
  font-weight: 900;
  margin-top: 0px;
  margin-bottom: 0px;
  margin-left: -12px;
  color: #190327;
  text-transform: uppercase;
  text-shadow: -1px -1px 0px #8b43ce, 1px 1px 0px #ef256c;
  letter-spacing: -20px;
}

.dendingac_rosanels .dendingac_rosanels-404 h2 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 0;
  right: 0;
  top: 110px;
  /* font-size: 42px; */
  font-weight: 700;
  color: #dadada;
  text-transform: uppercase;
  text-shadow: 0px 2px 0px #e00cb3;
  letter-spacing: 14px;
  margin: 0;
}

.dendingac_rosanels a {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  text-transform: uppercase;
  color: #ff005a;
  text-decoration: none;
  border: 2px solid;
  background: transparent;
  padding: 10px 40px;
  font-size: 14px;
  font-weight: 700;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.dendingac_rosanels a:hover {
  color: #8400ff;
}

@media only screen and (max-width: 767px) {
  .dendingac_rosanels .dendingac_rosanels-404 h2 {
  font-size: 28px;
  }
}

@media only screen and (max-width: 480px) {
  .dendingac_rosanels .dendingac_rosanels-404 h1 {
  font-size: 132px;
  }
}</style>

Вариант 2. Симпатичная страничка с анимацией и переходом на главную страницу.

Чтобы посмотреть на странице вбейте в поиск https://prostotestblog.blogspot.com/лоо

Код

<div id="notfound">
  <div class="notfound">
  <div class="notfound-404">
  <h1>4<span></span>4</h1>
  </div>
  <h2>Oops! Страница не найдена</h2>
  <p>Извините, но страница, которую вы ищете, не существует. Возможно была удалена или временно не доступна</p>
  <a href="http://www.shpargalochki.ru/">Вернуться на главную страницу</a>
  </div>
</div>
<style>
#notfound {
  position: relative;
  height: 100vh;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.notfound {
  max-width: 520px;
  width: 100%;
  text-align: center;
  line-height: 1.4;
}

.notfound .notfound-404 {
  height: 190px;
}

.notfound .notfound-404 h1 {
  font-family: "Montserrat", sans-serif;
  font-size: 146px;
  font-weight: 700;
  margin: 0px;
  color: #232323;
}

.notfound .notfound-404 h1 > span {
  display: inline-block;
  width: 120px;
  height: 120px;
  background-image: url("https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/160/mozilla/36/pensive-face_1f614.png");
  background-size: cover;
  -webkit-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4);
  z-index: -1;
  animation-name: floating;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.notfound h2 {
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
  text-transform: uppercase;
  color: #232323;
}

.notfound p {
  font-family: "Montserrat", sans-serif;
  color: #787878;
  font-weight: 300;
}

.notfound a {
  font-family: "Montserrat", sans-serif;
  display: inline-block;
  padding: 12px 30px;
  font-weight: 700;
  background-color: #f99827;
  color: #fff;
  border-radius: 40px;
  text-decoration: none;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
}

.notfound a:hover {
  opacity: 0.8;
}

@media only screen and (max-width: 767px) {
  .notfound .notfound-404 {
  height: 115px;
  }
  .notfound .notfound-404 h1 {
  font-size: 86px;
  }
  .notfound .notfound-404 h1 > span {
  width: 86px;
  height: 86px;
  }
}

@keyframes floating {
  from {
  transform: scale(1.4) translate(0, 0);
  }

  50% {
  transform: scale(1.4) translate(0, 15px);
  }

  to {
  transform: scale(1.4) translate(0, 0);
  }
}

</style>

Вариант 3. Совсем простая страничка. Картинку можно поменять на более жизнеутверждающую

Чтобы увидеть вбейте в поиск https://teststudiblog.blogspot.com/лоло

Код

<div id="tukortunovounal">
  <img src="https://pngicon.ru/file/uploads/ljagushonok-pepe-256x243.png" id="logo404">
  <h1>Вау ... Как не хорошо получилось!</h1>
  <h2>Пожалуйста перейдите на<a href="http://www.shpargalochki.ru/" target="_blank"> главную страницу</a></h2>
</div>
<style>
.ncelede-dupcoming {
  width: 100%;
  height: 100%;
  position: relative;
  margin: 0;
  padding: 0;
  top: -100px;
  opacity: 0.05;
  z-index: 230;
  user-select: none;
  user-drag: none;
}

.mosterta-inlymoved {
  text-align: center;
  font-family: 'Gilda Display', serif;
  font-size: 95px;
  font-style: italic;
  text-align: center;
  width: 100px;
  height: 60px;
  line-height: 60px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60px;
  right: 0;
  animation: noise 2s linear infinite;
  overflow: default;
}

.mosterta-inlymoved:after {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 163px;
  height: 57px;
  line-height: 57px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: blue;
  animation: noise-1 .2s linear infinite;
}

.tenarkedes {
  text-align: center;
  font-family: 'Gilda Display', serif;
  font-size: 23px;
  font-style: italic;
  text-align: center;
  width: 225px;
  height: 58px;
  line-height: 59px;
  margin: auto;
  position: absolute;
  top: 153px;
  bottom: 0;
  left: 0;
  right: 0;
  animation: noise-3 3s linear infinite;
}

.mosterta-inlymoved:before {
  content: '404';
  font-family: 'Gilda Display', serif;
  font-size: 100px;
  font-style: italic;
  text-align: center;
  width: 97px;
  height: 58px;
  line-height: 58px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  color: red;
  animation: noise-2 .3s linear infinite;
}

@keyframes noise-1 {
  0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
  10% {opacity: .1;}
  50% {opacity: .5; left: -6px;}
  80% {opacity: .3;}
  100% {opacity: .6; left: 2px;}
}

@keyframes noise-2 {
  0%, 20%, 40%, 60%, 70%, 90% {opacity: 0;}
  10% {opacity: .1;}
  50% {opacity: .5; left: 6px;}
  80% {opacity: .3;}
  100% {opacity: .6; left: -2px;}
}

@keyframes noise {
  0%, 3%, 5%, 42%, 44%, 100% {opacity: 1; transform: scaleY(1);}
  4.3% {opacity: 1; transform: scaleY(1.7);}
  43% {opacity: 1; transform: scaleX(1.5);}
}

@keyframes noise-3 {
  0%,3%,5%,42%,44%,100% {opacity: 1; transform: scaleY(1);}
  4.3% {opacity: 1; transform: scaleY(4);}
  43% {opacity: 1; transform: scaleX(10) rotate(60deg);}
}</style>

Вариант 4. Вот такая с котейкой. Тоже с картинкой и соответствующими ссылками.

Вбейте в поиск https://test-tri.blogspot.com/лоло

Код

<table width="100%" style="height:100%;" border="0" cellspacing="0" cellpadding="0">
<tbody><tr>
<td height="100%" align="center" valign="top">

<div style="height:400px;width:70%;overflow:hidden;position:relative">
<img src="https://image.freepik.com/free-vector/404_114360-1900.jpg" alt="" style="position:absolute;left:0;top:0;width:100%;height:100%" />
<div style="position:absolute;left:0;top:0;z-index:1;width:100%;height:100%"><span style="color:purple"><span style="font-family:'Geneva'"><span style="font-size:23pt"><b>Страница 404</b></span></span></span></div> </div>
<tbody><tr>
<td>
<h1>Страница не найдена! (ошибка 404)</h1>
<p>Ну и дела! На сайте <a href="http://www.shpargalochki.ru/"></a> нет такой страницы!<br>
Причины могут быть разные</p>
<ul>
<p>Вы ошиблись, набирая адрес</p>
<p>Страница была давно удалена и ваша ссылка устарела</p>
</ul>
<p><a href="http://www.shpargalochki.ru/">Перейдите на главную страницу сайта ШПАРГАЛКИ БЛОГЕРШИ"</a> чтобы продолжить работу.</p>
</td>
</tr>
</tbody></table>

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

Чтобы увидеть на странице вбейте в поиск https://dlynaglydnosti.blogspot.com/лоо

Код

<section class="page_404">
  <div class="container">
  <div class="row">
  <div class="col-sm-12 ">
  <div class="col-sm-10 col-sm-offset-1 text-center">
  <div class="four_zero_four_bg">
  <h1 class="text-center ">404</h1>
</div>
 
  <div class="contant_box_404">
  <h3 class="h2">
  Ой, что - то пошло не так
  </h3>
 
  <p>страница, которую вы ищете, недоступна!</p>
 
  <a href="http://www.shpargalochki.ru/" class="link_404">перейдите на главную</a>
  </div>
  </div>
  </div>
  </div>
  </div>
</section>
<style>.page_404{ padding:40px 0; background:#fff; font-family: 'Arvo', serif;
}

.page_404 img{ width:100%;}

.four_zero_four_bg{
 
  background-image: url(http://zornet.ru/Abavaga/dribbble_1.gif);
  height: 400px;
  background-position: center;
  }
 
 
  .four_zero_four_bg h1{
  font-size:80px;
  }
 
  .four_zero_four_bg h3{
  font-size:80px;
  }
 
  .link_404{
  color: #fff!important;
  padding: 10px 20px;
  background: #39ac31;
  margin: 20px 0;
  display: inline-block;}
  .contant_box_404{ margin-top:-50px;}

</style>

Во всех кодах пишите свои тексты, меняйте картинки если нужно и вставляйте нужные ссылки на главную, контакты, содержание. Туда куда вы предлагаете перейти пользователю.

Теперь как и куда вставлять коды. Если работаете в старом интерфейсе Блоггер, то в статье, ссылка на которую в начале этого поста, подробно написано про это. В обновлённом интерфейсе, идём тем же путём. Админпанель - настройки и в длинном списке находим функцию персонализированная страница об ошибке 404. Нажимаем и в открывшемся окне вставляем код, выбранной вами страницы. не забудьте сохранить.

Всё. Обязательно оформляйте вашу страницу с ошибками 404. Пусть она будут интересной и уникальной.

Все добра, удачи и летних денёчков. 

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

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

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

Доброго времени суток, друзья. Предлагаю вашему вниманию рамку в виде старого, доброго почтового конверта. Обойдёмся опять вбез всяких редакторов и сделаем её с помощью CSS.

И, как всегда, сначала скопируйте приведённый ниже код и просмотрите результат в этом редакторе. Далее рассмотрим несколько вариантов применения.

<div class="wrap">
<div class="gradient">
<b><span style="color: #674ea7;">Здесь может быть что угодно - текст, изображение, код.</span></b></div>
</div>
<style>
.wrap {
height: 100px;
padding: 25px;
}
.gradient {
height: 100px;
width: 70%;
margin: 0 auto;
border: 10px solid transparent;
border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px, transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent 30px, transparent 40px);
}
</style>

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

Вот пример

В коде в строке, отмеченной розовым цветом стоит прописать примерно так

<img height="135" src="здесь адрес изображения" width="310" />

Обратите внимание, что необходимо и размеры картинки подогнать под нужные.

Ещё можно заключить в такую рамку форму подписки в блоге. Так же, в отмеченную строку вставить код подписки. Специально в этом посте сделала такую. Посмотрите в низу сообщения.

Можно менять размеры высоты и ширины рамки - height: 100px;
width: 70%;
Размер border: 10px.
color: #674ea7; цвет текста.

Всё простая и оригинальная рамка почтовый конверт получается.

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

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

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

Всем, доброго времени суток. Красивый эффект для фотографий или других изображений в блоге. Изначально, загруженное изображение в цвете, выглядит чёрно - белым. А при наведении курсора на него, опять становится цветным. Небольшой код CSS поможет достичь такого результата. Ничего сложного.

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

<style>
.profile img {
  border-radius: 50%;
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  transition: filter 0.5s ease;
  -webkit-transition: filter 0.5s ease;
}
.profile img:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
}</style>

<div class="profile">
   <img src="https://1.bp.blogspot.com/-xOfXxt_KCN4/XqPLWY3P-TI/AAAAAAAANoQ/lqkM1idY8CYDO_VzswikhrNw60oibAZ2QCLcBGAsYHQ/s1600/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg" alt="Эффект для картинок">
  </div>

Не нужно здесь ни какого фотошопа. Для эффекта серого фона просто используется функция grayscale(), которая и  превращает изображение в чёрно-белое. Значение 100%.  Значения меньше 100% (или меньше 1) линейно меняют цветность картинки.

Я взяла самую простую картинку. Вместо строк серого цвета, вставьте адрес вашего изображения.

 border-radius: 50%;  - добавили закругление углов картинки. Можно убрать, если хотите.

Если захотите использовать такой вариант оформления картинок в одном сообщении, или гаджете, при написании перейдите в формат HTML и вставьте в нужном месте готовый код.

Можно применить этот эффект ко всем изображениям блога. Для этого необходимо зайти во вкладку тема, изменить HTML и в открывшемся окне найти строку ]]></b:skin>. Сразу над ней вставьте сам код  CSS , только без тегов <style> и </style>. Сохраните шаблон.
Теперь при создании поста , в том месте где предполагается картинка с эффектом серого оттенка, нужно, так же в формат HTML, добавить только код div

<div class="profile">
   <img src="https://1.bp.blogspot.com/-xOfXxt_KCN4/XqPLWY3P-TI/AAAAAAAANoQ/lqkM1idY8CYDO_VzswikhrNw60oibAZ2QCLcBGAsYHQ/s1600/%25D1%2581%25D0%25BB%25D0%25B0%25D0%25B9%25D0%25B4%25D0%25B5%25D1%2580.jpg" alt="Эффект для картинок">
  </div>

Вот и всё.

Благодарю всех за ваше внимание. Всем добра.

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

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

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

Доброго времени суток, друзья. И опять я про новые изменения редактора Blogger. Да, вот так время от времени,  копаюсь и нахожу новые "подводные камни".  Как пишут разработчики, что уже с конца июня, блоги переведут на обновлённую версию. Конечно, это не совсем привычно и с первого взгляда непонятно, но придётся разбираться потихоньку.

На этот раз решила поиграться с изображениями в новом редакторе. Скажу вам, что в старой версии это более удобно. Но, думаю, "руку набьём" и в этой. Поделюсь сегодня некоторыми моментами как работать с изображениями в новом редакторе. Есть на что обратить внимание.

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

Не поленилась и сбегала на форум Блоггер. Там этот вопрос поднимался уже и обещали разобраться с этим .
Ну и дальше. Изображение загружено и при нажатии на него, появляется всплывающее окно, где можно разместить его слева, справа и по центру.
Если кликнуть на иконку карандаша, задаётся нужный размер картинки. И заполняются поля для названия и описания(Alt и Title). Последняя функция добавление подписи к изображению.

Сейчас давайте перейдём из обычного режима в формат HTML, чтобы посмотреть как выглядит наш код. Для этого в правом верхнем углу кликаем на две скобки < >.

Сам код, как и старом редакторе имеем 2 ссылки. А нам это ой как не нужно. Но выход тот же. Чтобы удалить одну ссылку возвращаемся обратно в обычный режим. Нажмите на картинку и обратите внимание, на верхнюю панель. Цвет текса отмечен синим цветом, а кружок в виде скрепки - серый.

Нажимаем на эту скрепку. В открывшемся окне выбираем опцию удалить ссылку. Всё. Ради интереса перейдите обратно в режим HTML и посмотрите, как код изменился.

Ещё обращу внимание на одну деталь. Здесь можно форматировать код, если кликнуть на иконку справа в верху. Вот как он будет выглядеть.



Получаем такой код, где прописаны размеры, расположение,  заголовок. И присутствует строка  border="0". Это означает, что наша картинка получается сразу без рамки. Раньше мы специально избавлялись от неё, добавляя код в шаблон. Но есть пользователи, которым рамка нравится. Не переживайте - поменяйте значение border="0" на нужное значение, допустим border="4" или другое.

Рамка появится у картинки. Но вот на этом этапе я немного затормозила сама. Рамка - то есть, но она в чёрном траурном цвете. И только в самом коде можно прописать стили. Но многие  ведь не знают как. Или бояться что - то править в коде и не рассматривают такой вариант. И всё же, методом тыка, добралась я до нужного результата.

Чтобы рамка окрасилась в нужный цвет. необходимо кликнуть на саму картинку, а в верху на панели нажать на функцию цвет текста.

Рамка нужного цвета и размера. Ну очень прошу, если вы найдёте другой способ, как это сделать без правки самого кода, буду очень признательна если отпишитесь мне. Если в сообщении много картинок, это канительно, конечно.

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

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

Во пара самых кричащих

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

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

Даю ссылку на само сообщество. Может пригодится кому.

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

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

Введите Ваш email

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

Всем, доброго времени суток. Мы привыкли, что в Блоггер автоматически после публикации очередной статьи, на главной странице отображается миниатюра первой картинки и краткий анонс. Главная страница, это как обложка обычного журнала, где посетитель сразу может видеть о чём блог. 

ВОТ ПРИВЫЧНЫЙ ВИД ГЛАВНОЙ СТРАНИЦЫ

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

Что же, определённый смысл в этом всё же есть. Мы хотя бы избавимся от некоторых ссылок на главной странице, что очень хорошо для SEO. Разместим больше сообщений на главной и вроде как, небольшая интрига на кричащий заголовок. Вам решать.

Всё делается очень просто.

Нужно зайти во вкладку Тема, нажать Изменить HTML и с помощью клавиш GTRL + F ( читаем здесь)  найти закрывающийся тег </head >. Прямо над ним установить следующий код

Код

<style type='text/css'>

<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:blog.pageType != "item"'>

.post {
margin:.5em 0 1.5em;
border-bottom:0px dotted $bordercolor;
padding-bottom:1.0em;
height:50px;
}
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:20px;
font-family:Tahoma,Georgia,Century gothic,Arial,sans-serif;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}

.post h3 a, .post h3 a:visited, .post h3 strong {
display:block;
text-decoration:none;
color:#cc6600;
font-weight:normal;
}

.post h3 strong, .post h3 a:hover {color:#333333;}

.post-body {display:none;}
.post-footer {display:none;}
.comment-link {display:none;}
.post img {display:none;}
.post blockquote {display:none;}
.post blockquote p {display:none;}
h2.date-header {display:none;}
.post-labels {display:none;}
.post-rating {display:none;}

</b:if>
</b:if>

</style>

Сохранить изменения и посмотреть результат. Нет анонсов статей и картинки превьюшки. Мы её немного ещё и от ссылок разгрузили.

Вообще можно создать разные варианты оформления главной страницы.

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

Я желаю всем добра. Увидимся. 

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

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

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