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

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

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

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

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

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

тёмная страница 404


Код

<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. Симпатичная страничка с анимацией и переходом на главную страницу.

анимация страницы 404

Чтобы посмотреть на странице вбейте в поиск 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. Совсем простая страничка. Картинку можно поменять на более жизнеутверждающую

светлая страница ошибка 404

Чтобы увидеть вбейте в поиск 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. Вот такая с котейкой. Тоже с картинкой и соответствующими ссылками.

страница 404 с котиком

Вбейте в поиск 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>




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

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



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

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

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

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

 Всем привет.  Давненько я не писала в блоге. Не могу не поделиться с вами, как вернуть, исчезнувшие картинки  В блог. Ко мне уже несколько раз обращались мои дорогие читатели с вопросом что с изображениями в блах творится и где искать решение. У меня у самой на всех блогах исчезли  сразу все картинки. Восстанавливать заново просто нереально . Руки опустились Но ответ нащла на этом сайте  и на форуме blogger

Все адреса с .bp.blogspot.com заблокированы в России.

Просто напросто РКН заблокировал все 4 хостинга, куда в blogger загружались изображения

Тут, уже американцам жаловаться бесполезно. Это ж не они блокируют. А Гугл теперь с РКН вообще дружить не будет. 

 Когда мы размещаем картинки свой блог, то "Blogger" их кидает на поддомены: "1-2-3-4.bp.blogspot.com", а они-то как раз в России и заблокированы. Если указать картинкам непосредственный адрес "архива альбомов", то есть: https://lh3.googleusercontent.com, то всё отображается нормально. 

<script>

  var images = document.getElementsByTagName(&quot;img&quot;);

for(var i=0;i&lt;images.length;i++) {

images[i].src = images[i].src.replace(/[1-4]+.bp.blogspot.com/,&quot;lh4.googleusercontent.com&quot;);

}

</script>

Все адреса с .bp.blogspot.com заблокированы в России.

Просто-напросто РКН заблокировал все 4 хостинга, куда в blogger загружались изображения

Да, уж, американцам жаловаться бесполезно. Это ж не они блокируют. А Гугл теперь с РКН вообще дружить не будет. 

 когда вы их размещаете в свой блог, то "Blogger" их кидает на поддомены: "1-2-3-4.bp.blogspot.com", а они-то как раз в России и заблокированы. Если указать картинкам непосредственный адрес "архива альбомов", то есть: https://lh3.googleusercontent.com, то всё отображается нормально.

 что делать теперь ?

Нашлись умные люди, которые написали скрипт для подмены адресов картинок в блоге с bp.blogspot.com на h4.googleusercontent.com ( это всё зеркальные адреса) 

Нужен вот такой скрипт

<script>

  var images = document.getElementsByTagName(&quot;img&quot;);

for(var i=0;i&lt;images.length;i++) {

images[i].src = images[i].src.replace(/[1-4]+.bp.blogspot.com/,&quot;lh4.googleusercontent.com&quot;);

}

</script>

В скрипте src.replace(/[1-4]+.bp.blogspot.com/,&quot;lh4 -наши блокированные домены с 1.bp до 4.bpэто  блокированные домены с 1.bp до 4.bp.

Как вставить скрипт,чтобы в блоге появились все пропавшие картинки снова. 

Копируйте данный скрипт. Заходите во вкладку  Тема, Сделайте (на всякий случай), резервную копию шаблона В открывшимся окне Нажимаем на оранжевую кнопку и выбираем изменить HTML




проблема с картинками


Далее, находим в шаблоне закрывающийся тег </body>. Он обычно конце шаблона прописан. И над ним вставляем


скрипт для картинок

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


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

Введите Ваш email


Всем, доброго времени суток. Сегодня задача заключается в том, как выделить весь DIV, Span текст при щелчке мыши по кнопке с помощью JavaScript для копирования. Многие блогеры используют подобную опцию, чтобы дать своим посетителям не прокручивать содержание всего блока для копирования, а одним щелчком мыши скопировать сразу всю область. 

копирование кода одним кликом


Что в итоге имеем

Выделяется все содержимое DIV/Span/Textarea с помощью кнопки.

Чистый JavaScript-Код.

Простота в использовании

Вы можете добавить неограниченное количество DIV даже на одну страницу / пост.

Вы можете добавить CSS стили на ID.

Он отменит выделение всего содержимого DIV/Span/Textarea так же с помощью кнопки.


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

<script type="text/javascript"> function fnSelectundefinedobjId) { fnDeSelectundefined); if undefineddocument.selection) { var range = document.body.createTextRangeundefined); range.moveToElementTextundefineddocument.getElementByIdundefinedobjId)); range.selectundefined); } else if undefinedwindow.getSelection) { var range = document.createRangeundefined); range.selectNodeundefineddocument.getElementByIdundefinedobjId)); window.getSelectionundefined).addRangeundefinedrange); } } function fnDeSelectundefined) { if undefineddocument.selection) document.selection.emptyundefined); else if undefinedwindow.getSelection) window.getSelectionundefined).removeAllRangesundefined); } </script> <div id="execodediv0"> А здесь будет зашифрованный код или просто текст </div> <center> <input onclick="javascript:fnSelectundefined'execodediv0');" title="скопировать код" type="submit" value="скопировать код" /> <input onclick="javascript:fnDeSelectundefined);" title="отменить копирование" type="submit" value="отменить копирование" /> </center>


Как это добавить на страницу

В сообщении переходим в формат HTML и в строке, отмеченной синим цветом, вставляем свой текст.

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


Для нового Div на той же странице добавьте только этот код Div снова, но измените execodediv0 на execodediv1 в двух местах и т. д. Потом сохраните и всё.
Для информации предлагаю статью по теме - как копировать текст в буфер обмена кликом.


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

Введите Ваш email


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

Здравствуйте меня зовут Борис. Я долгое время читаю Блог Виктории "Шпаргалки Блогерши" и он меня радует своей простотой.

Код плеера мне достался даром и поэтому я решил поделиться им с людьми так же даром. Потому что в поиске практически не найдешь такой пост который я хочу написать для Вас. Такой же финт я пробовал сделать с кодом для фото и видео чтобы хостингом был непосредственно Гугл Диск.

плеер для сайта

Значит, первым делом загружаем аудиофайл на хостинг Гугла Google Disk в формате WAW, MP 3, Windows. Файл может быть и большой но желательно не очень большой так как он начнет сам сбиваться.

код ауди плеера с Гугл диска

Открываем доступ к файлу для всех. Копируем прямую ссылку в блокнот или в поле вставки плеера в блоге. Затем вырезаем из нее индификационный номер файла и вставляем его в поле кода для плеера. Сохраняем.


Копируем номер из прямой ссылки на файл





Вставляем номер файла сюда

Плеер сохранен и воспроизводится

Главное работать с кодом и ссылкой корректно.

Чтобы плеер располагался ровно можно использовать тег <br /> <center />

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

Так же, к плееру можно добавить ширину. Для Этого в команду кода вставляем тег <with>

Ширина плеера

<audio controls style="width: 200px;">
  
Код без расширения
  
<audio controls="controls">
 <source src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=18ckYBdErJN1BJZvf6-WROfWlgxCL40rc" type="audio/mpeg"></source></audio>

Как вы видите в команду audio controls добавлен тег style


Тогда плеер получится такой или такой...

Тогда плеер можно делать как шире так и уже.

Еще к плееру можно нарисовать свою кнопочку. Для этого к коду добавляем графический тег <img> и кнопочку <button> и вуаля ваш плеер работает персонально у вас в блоге без дополнительной регистрации и ограничения в загрузке. 


Код для аудиоплеера:

1 вариант.

<audio controls="controls">
 <source src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=1MPQtK50-u-UtjItMlI7jfClM4BFN0H8A" type="audio/mpeg"></source></audio>
<br/>


2 вариант. С картинкой/кнопкой


<img src="https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png" onclick="if (this.src=='https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png') {this.src='https://c.radikal.ru/c31/2009/61/98c14bce7608.jpg'; document.getElementById('audio').play() } else { this.src='https://c.radikal.ru/c19/2009/fd/cf20bc6d0167.png'; document.getElementById('audio').pause() };" />

<audio id="audio" src="https://drive.google.com/uc?export=download&amp;confirm=no_antivirus&amp;id=1AGNq6csVLhMZL3fjDErcZ7lCcu5i92Cw" type="audio/mpeg" controls ></audio><button onclick="document.getElementById('audio').play()">Play</button><button onclick="document.getElementById('audio').pause()">Pause</button><button onclick="document.getElementById('audio').volume+=0.1">Vol +</button><button onclick="document.getElementById('audio').volume-=0.1">Vol -</button>

Хостингом для картинки можно использовать как сам блоггер так и сторониие ресурсы например Радикал.ру


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

плеер для блога
Другой способ вставки плеера


плеер для блога


Плеер во всплывающем окне с кнопкой


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

Я попробовал вставить в окно даже интернет радио из WinAmip
Получилось здорово. В кнопке бегущая строка.

<a href="http://79.120.39.202:8000/pop80" onclick="newMyWindow(this.href); return false;"><button><marquee scrollamount="3" width="100"  height="20"style="font-size: 14pt; ">Слушать... </marquee></button> </a>

 

<script>

function newMyWindow(e) {

  var h = 150,

      w = 250;

  window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));

}

</script>


Как вставить аудиоплеер другим способом я могу подсказать вам в записанном мною видео в Ютубе. Таким же способом можно для блога вставить и картинку и видео и ворд файл, а так же сделать поле для чтения и горячую ссылку для возможности Скачать одним кликом.

Видео https://youtu.be/Zcpx14hLpUo

Спасибо за консолидацию!

Если возникнут вопросы или, что-то не совсем понятно, пишите в комментариях к этому посту.

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

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

Реализация достаточно простая. Нужно выбрать понравившейся вариант, скопировать код и установить его в разделе дизайн в гаджет HTML/JavaScript. И перетянуть в нужное место макета блога. Цвета самой панели меняйте на ваше усмотрение. 

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


 Вариант 1. Простая панель с рамкой и кликабельной надписью. 
панель в верхней части блога с кликабельными ссылками
Код.

<style>#knig_bar {width: auto; height: auto; display: block; text-align: center; padding: 7.5px; background: none repeat scroll 0 0 #004D40;
  border: 4px double black; 
    background: #fc3; 
    padding: 10px; 
   } color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}
</style>
<div id='knig_bar'>
Все статьи блога для вас <a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>
</div>

Вариант 2. Тёмная панель уже с другой рамкой , где ссылка оформлена в виде кнопки.

Код.

<style>#knigulper_bar {width: auto; height: auto; display: block; text-align: center; padding: 6.5px; background: #3e454c;border: 3px solid #ff6347 ;
    border-radius: 10px; color: #fff; position: relative; font-size: 14px;font-family: oswald;font-weight: normal;}
#knigulper_bar a{background: #fff; color: #3e454c; padding: 4px 16px; border-radius: 100px; margin-left: 5px; font-weight: 600;}
#knigulper_bar a:hover{background:#3e454c;color:#fff;}</style>
<div id='knigulper_bar'>
Все статьи блога для вас<a href='http://www.shpargalochki.ru/p/blog-page_1.html' target='_blank'>Перейти!</a>
</div>

Вариант 3. Панель с бегущей строкой.

Задали немного динамики  с помощью тега marquee и получили такую динамичную бегущую строку. Еще в этом варианте, кроме основной ссылки, добавлена ссылка на последнюю статью блога. Но это можно легко убрать, если посчитаете нужным.

С помощью свойства box-shadow зададим красивые границы с тенью.

бегущая строка с кликабельными сслыками

Код.

<style>#bloggernotificationWrap{display:none;position:relative;z-index:999999;width:100%;height:41px;margin:0px 0px -41px 0px;padding:0}

#bloggernotification{overflow:hidden; width:100%;height:28px;padding-top:7px;text-align:center; background:#37474F;position:relative;box-shadow:1px 2px 9px #2A5200;z-index:9998;text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400;text-shadow:1px 1px 4px #000;border-bottom:1px solid #90f128;margin:0}
#bloggernotification strong {font-size:14px;font-family:oswald; font-weight:normal;padding-right:7px;}
#bloggernotification a{text-decoration:none;color:#fff;font-family:oswald, arial,sans-serif;font-size:13px;font-weight:400; word-spacing:1px; text-shadow:1px 1px 1px #000;outline:none}
#bloggernotification a:hover{text-decoration:underline}
#openbloggernotification{display:block;position:absolute;top:-6px;right:15px;background:#2E2F2E;border-left:2px solid #90f128;border-right:2px solid #90f128;border-bottom:2px solid #90f128;cursor:pointer;z-index:1;-webkit-border-bottom-right-radius:5px;-webkit-border-bottom-left-radius:5px;-moz-border-radius-bottomright:5px;-moz-border-radius-bottomleft:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:1px 2px 9px #90f128;padding:0 7px}
#send{background:#6f9ff1;color:#fff;cursor:pointer;border-radius:4px;box-shadow:5px 5px 5px #ccc;border:1px solid #79a7f1;padding:6px 10px!important}
#send:hover{background:#79a7f1}
#send a{color:#fff;text-shadow:1px 1px 2px #333}
#send a:hover{text-decoration:none}</style>
<div class='openbloggernotification' id='bloggernotificationWrap' style='display: block; margin-top: 0px;'>
<div id='bloggernotification'>
<div style='width: 997px;margin: 0px auto;'>
<div style='-moz-background-inline-policy: continuous; background: none repeat scroll right top;font-size:14px;font-weight: normal;font-family: &apos;Oswald&apos;, sans-serif;'>
  <marquee behavior='alternate' onmouseout='this.start();' onmouseover='this.stop();' scrollamount='2'><a href='http://www.shpargalochki.ru/2018/04/dizajn-gadzheta-okno-poiska-blogger.html'><font color='yellow' size='3'>НОВОЕ</font> ДИЗАЙН ОКНА ПОИСКА</a>  <a href='http://www.shpargalochki.ru/p/blog-page_1.html'><font color='yellow' size='3'></font> Все статьи блога</a></marquee>
 </div>
</div></div></div>


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

Приветственный бар в верхней части блога
Фиксированная панель в нижней части блога.

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

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