Настройка блога - все материалы по теме
Сообщения из Рубрики Настройка блога
Показаны сообщения с ярлыком Настройка блога. Показать все сообщения

среда 24 2024

Как добавить нумерацию страниц в Blogger: Как изменить навигацию в блоге

Постраничная навигация для Blogger



Пагинация — это нумерация страниц по возрастанию, которую используют на сайте для последовательного отображения контента. Разбивка по страницам или навигация по страницам, не встроена в Blogger, но ее можно реализовать с помощью простого кода. Основная цель — для удобства навигации пользователей. Ее просто и легко интегрировать, а стиль можно изменить по вашему желанию...




Установка скрипта "следующая/предыдущая" в свой блог

  1. Перейдите  «ТЕМА» > «НАСТРОИТЬ» > «РЕДАКТИРОВАТЬ HTML»
  2. Теперь найдите тег </body> и вставьте перед ним приведенный ниже код.

<script type='text/javascript'>;
var home_page=&#39;/&#39;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=4;
var upPageWord =&#39;Prev&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('6 I;6 i;6 f;6 n;1f();C 1g(15){6 5=\'\';J=K(N/2);4(J==N-J){N=J*2+1}A=f-J;4(A<1)A=1;d=K(15/j)+1;4(d-1==15/j)d=d-1;D=A+N-1;4(D>d)D=d;5+="<3 7=\'1A\'>1B "+f+\' 1C \'+d+"</3>";6 16=K(f)-1;4(f>1){4(f==2){4(i=="o"){5+=\'<3 7="1D"><a 9="\'+B+\'">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">\'+O+\'</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+16+\');w x">\'+O+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+16+\');w x">\'+O+\'</a></3>\'}}}4(A>1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}4(A>2){5+=\' ... \'}1h(6 l=A;l<=D;l++){4(f==l){5+=\'<3 7="1E">\'+l+\'</3>\'}b 4(l==1){4(i=="o"){5+=\'<3 7="g"><a 9="\'+B+\'">1</a></3>\'}b{5+=\'<3 7="g"><a 9="/r/s/\'+n+\'?&c-k=\'+j+\'">1</a></3>\'}}b{4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+l+\');w x">\'+l+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+l+\');w x">\'+l+\'</a></3>\'}}}4(D<d-1){5+=\' ... \'}4(D<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+d+\');w x">\'+d+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+d+\');w x">\'+d+\'</a></3>\'}}6 17=K(f)+1;4(f<d){4(i=="o"){5+=\'<3 7="g"><a 9="#" v="L(\'+17+\');w x">\'+1i+\'</a></3>\'}b{5+=\'<3 7="g"><a 9="#" v="M(\'+17+\');w x">\'+1i+\'</a></3>\'}}5+=\'<1j><a 9="1F://1G.1H-1k.1I" 1J="1K-1L: 1M; 1N: 1O; 1P: 1Q;" 1R="1S">1T 1U 1V-1k</a></1j>\';6 E=y.1W("E");6 18=y.1X("1Y-1Z");1h(6 p=0;p<E.P;p++){E[p].1l=5}4(E&&E.P>0){5=\'\'}4(18){18.1l=5}}C 1a(Q){6 R=Q.R;6 1m=K(R.21$22.$t,10);1g(1m)}C 1f(){6 h=u;4(h.e("/r/s/")!=-1){4(h.e("?S-c")!=-1){n=h.F(h.e("/r/s/")+14,h.e("?S-c"))}b{n=h.F(h.e("/r/s/")+14,h.e("?&c"))}}4(h.e("?q=")==-1&&h.e(".5")==-1){4(h.e("/r/s/")==-1){i="o";4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n("<m T=\\""+B+"U/V/W?c-k=1&X=Y-Z-m&11=1a\\"><\\/m>")}b{i="s";4(h.e("&c-k=")==-1){j=20}4(u.e("#G=")!=-1){f=u.F(u.e("#G=")+8,u.P)}b{f=1}y.1n(\'<m T="\'+B+\'U/V/W/-/\'+n+\'?X=Y-Z-m&11=1a&c-k=1" ><\\/m>\')}}}C L(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C M(H){12=(H-1)*j;I=H;6 13=y.1o(\'1p\')[0];6 z=y.1q(\'m\');z.1r=\'1s/1t\';z.1u("T",B+"U/V/W/-/"+n+"?1v-1w="+12+"&c-k=1&X=Y-Z-m&11=1b");13.1x(z)}C 1b(Q){1c=Q.R.24[0];6 1y=1c.1z.$t.F(0,19)+1c.1z.$t.F(23,25);6 1d=26(1y);4(i=="o"){6 1e="/r?S-c="+1d+"&c-k="+j+"#G="+I}b{6 1e="/r/s/"+n+"?S-c="+1d+"&c-k="+j+"#G="+I}27.9=1e}',62,132,'|||span|if|html|var|class||href||else|max|maksimal|indexOf|nomerhal|showpageNum|thisUrl|jenis|postperpage|results|jj|script|lblname1|page|||search|label||urlactivepage|onclick|return|false|document|newInclude|mulai|home_page|function|akhir|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|redirectpage|redirectlabel|numshowpage|upPageWord|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|div||innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|http||||style|font|size|0pt|float|right|margin|0px||||||getElementsByName|getElementById|blog|pager||openSearch|totalResults||entry|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>


Добавляем стили CSS для постраничной навигации



Найдите тег </b:skin> и вставьте перед ним приведенный ниже код

.blog-pager,#blog-pager{font-family:"Times New Roman", Times, serif;font-weight:normal;font-size:12px;width:700px;padding:17px;} 
.showpageNum a,.showpage a {background:#069; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageNum a:hover,.showpage a:hover {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}
.showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;font-size:100%;}
.showpagePoint {background:orange; color:#FFF; margin-right:.6em;text-decoration:none;font-size:15px;font-style:italic;line-height:0;text-align:center;padding:12px 18px 12px;-moz-border-radius:36px;-webkit-border-radius:36px;border-radius:36px;}


Настройки скрипта:
  • Измените postperpage=... на количество отображаемых сообщений, которые будут отображаться на Главной странице. Оно должно совпадать с числом, которое вы выбрали в разделе Дизайн  > Записи в блоге  > Количество сообщений на Главной странице.
  • Измените numshowpage=... на количество страниц, которые вы хотите отображать в нумерованной навигации.
  •  Вы также можете изменить значения Рrev/Next на текст, который хотите отобразить.

См.  Пример пагинации  на моем блоге

суббота 20 2024

 Как добавить следующую и предыдущую нумерованную нумерацию страниц в Blogger


Платформа Blogger предоставляет своим пользователям традиционный набор элементов блога.

понедельник 15 2024

Меняем дизайн Google Translate : Как изменить стили переводчика Blogger

Дизайн гаджета Translate для Blogger


Виджет Google переводчик способен перевести блог на платформе blogger на большинство языков мира.
Если вам нужно, чтоб ваш блог переводился на другие языки, то для вас подойдет виджет на базе Google переводчик...




Изменим стили в Google translate на Blogger

  • Создадим стильную кнопки Перевести для автоматического перевода
  • Удалим ссылку на Технологии Google Переводчик
  • Добавим CSS стили

Как добавить код виджета ?


Ваш блог →Дизайн→ Добавить гаджет→ HTML/Javascript. Скопируйте и вставьте в него весь приведенный ниже фрагмент кода.

💡Пример кода отыскался на "буржуйских" сайтах, если хотите, можете поискать другие варианты переводчика на просторах интернета. Я только внес свои небольшие изменения для того, чтоб код работал❕ Сайт с кодом Cybup Translator Widget 



Скопировать код:

<center>
<style type="text/css">/*Cybup Translator Widget */
#cybup-trans-warp {
display:block;
width:90%;
max-width:300px;
border:none;
background-color:#fff;
color:#444;
overflow:hidden;
position:relative;
height:40px;
line-height:40px;
border:1px solid #e0e0e0;
}
#cybup-trans-warp select {
border:none;
background:transparent;
font-family:'Verdana',Arial,Sans-Serif;
font-size:12px;
width:100%;
color:#444;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-appearance:none;
cursor:text;
padding:5px 10px;
}
#cybup-trans-warp a,
#cybup-trans-warp a:hover {
display:block;
background-color:#f79d42;
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;
}
#cybup-trans-warp 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;
}
#cybup-trans-warp a:hover {opacity:0.9;}
#cybup-trans-warp a:active {opacity:0.9;}
#cybup-trans-warp select:focus,
#cybup-trans-warp a:focus,
#cybup-trans-warp select:active,
#cybup-trans-warp a:active {
border:none;
outline:none;
cursor:pointer;
}
option {
background:#4f2323;
color:#fff;
}
</style>
<div id="cybup-trans-warp">
<select id="translate-language">

<option value="en" selected />Выбрать язык...
<option value="af" />африкаанский
<option value="sq" />албанский
<option value="ar" />арабский
<option value="hy" />армянский
<option value="az" />азербайджанский
<option value="eu" />баскский
<option value="be" />белорусский
<option value="bn" />бенгальский
<option value="bg" />болгарский
<option value="ca" />каталанский
<option value="zh-TW" />китайский (традиционный)
<option value="zh-CN" />китайский (упрощенный)
<option value="hr" />хорватский
<option value="cs" / />чешский
<option value="da" />датский
<option value="nl" />голландский
<option value="en" />английский
<option value="eo" />эсперанто
<option value="et" / />эстонский
<option value="tl" />филиппинский
<option value="fi" />Финский
<option value="fr"/>французский
<option value="gl" />галисийский
<option value="ka" / />грузинский
<option value="de" />немецкий
<option value="el" />греческий
<option value="gu" />гуджарати
<option value="ht" />гаитянский
<option value="iw" />иврит
<option value="hi" />хинди
<option value="hu" />венгерский
<option value="is" />исландский
<option value="id" />индонезийский
<option value="ga" />ирландский
<option value="it" />итальянский
<option value="ja" />японский
<option value="kn" />каннадский
<option value="ko" />корейский
<option value="la" />латинский
<option value="lv" />латышский
<option value="lt" />литовский
<option value="mk" />македонский
<option value="ms" />малайский
<option value="mt" />мальтийский
<option value="no" />норвежский
<option value="fa" />персидский
<option value="pl" />польский
<option value="pt" />португальский
<option value="ro" />румынский
<option value="ru" />русский
<option value="sr" />сербский
<option value="sk" />словацкий
<option value="sl" />словенский
<option value="es" />испанский
<option value="sw"/>суахили
<option value="sv" />шведский
<option value="ta" />тамильский
<option value="te" />телугу
<option value="th" />тайский
<option value="tr" />турецкий
<option value="uk" />украинский
<option value="ur" />урду
<option value="vi" />вьетнамский
<option value="cy" />валлийский
<option value="yi" />идиш
</select><a id="translate-me" href="#" title="Перевести"></a>
</div>
<script type="text/javascript">
(function () {
var mylang = "ru"; // Язык вашего сайта
var anchor = document.getElementById('translate-me');
anchor.onclick = function () {
var selectedLang = document.getElementById('translate-language').value;
window.open('https://translate.google.com/translate?u=' + encodeURIComponent(location.href) + '&langpair=' + mylang + '%7C' + selectedLang + '&hl=' + selectedLang);
return false;
};
})();
</script></center>

пятница 12 2024

Как сделать карту сайта для Blogspot: Как создать страницу Sitemap в Blogger

Что такое HTML Sitemap и ее преимущества


HTML Sitemap — это страница на вашем сайте, которая описывает полную структуру вашего сайта. Она включает ссылки на все ваши страницы и записи, что упрощает навигацию для пользователей. Она полезна для ваших посетителей, помогая им легко перемещаться по вашему сайту...




  1. Сканирование поисковыми системами: карты сайта помогают поисковым роботам понять структуру вашего веб-сайта и более эффективно индексировать страницы.
  2. Индексация: роботы поисковых систем систематизируют собранные в процессе сканирования данные о страницах сайта.
  3. Часто обновляемый контент: когда вы обновляете или добавляете новый контент, карта сайта помогает поисковым системам быстро его находить, повышая скорость индексации.

Самый простой вариант Sitemap

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




Как добавить карту на отдельную страницу?

  • Создайте новую страницу блога, дайте название
  • В режиме HTML новой страницы вставьте код карты:

    Перейти по Ссылке

Замените адрес в коде, выделенный желтым на url вашего блога 📌

👉❓ Если хотите такую карту, как у меня на странице Карта блога (три раздела: оглавление; дата публикации и ярлыки к записям), то задавайте вопросы✏️в комментариях или через форму обратной связи❕

воскресенье 07 2024

Как отредактировать дату в Blogger : Как изменить формат заголовка даты

Как изменить стили заголовка даты публикации в Blogger


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





Настройка стилей для заголовка даты Blogge/Blogspot


Добавляем фон к заголовку

  • Перейдите в раздел «Тема»> «Настроить»> «Изменить HTML» на панели инструментов Blogger и создайте резервную копию существующего шаблона, прежде чем вносить какие-либо изменения!
  • Нажмите клавиши «Ctrl+F» для поиска кода < h2.date-header {font: $(date.font); color: $(date.text.color);} > или < .date-header span > 
    (Темы Watermark и Picture Window соответственно💡)
  • УДАЛИТЕ ЭТОТ КОД (в зависимости от темы💡и добавьте другой фрагмент  (Перейти по ссылке)


Добавляем иконку Awesome к заголовку
  1. Для добавления иконки  необходимо добавить ссылку в раздел заголовка сайта для того, чтобы подгружались иконки Font Awesome. 
  2. Правим код, для этого нажимаем клавиши «Ctrl+F» для поиска  <data:post.dateHeader/>. Он подсветится желтым цветом. 
💡Таких кодов может быть несколько! Поэкперементируйте с каждым по очереди! 

💡На  примере  ниже  уже добавлены и иконка и правки  кода! Вставляем код вместо старого!💡

<h2 class='date-header'><span><i class='fa fa-clock' style='font-size:18px;color:red'/><data:post.dateHeader/><data:post.times/></span></h2








воскресенье 23 2024

Иконочный шрифт в Blogger : Установка и настройка Font Awesome

Как правильно добавлять значки Font Awesome в logger

Использование иконок Font Awesome позволяет улучшить визуальное восприятие вашего контента, делая его более привлекательным и информативным…






Font Awesome предоставляет собой масштабируемые векторные значки, которые можно мгновенно настроить — размер, цвет, тень и все, что можно сделать с помощью CSS свойств.


Как подключить иконки Font Awesome к сайту, блогу

Есть два варианта подключения (См. на скриншоте ниже)
  1. Через официальный сайт:
  2. Перейдите на страницу начала работы с Font Awesome и введите свой адрес электронной почты. Они отправят вам электронное письмо с кодом для вставки, который выглядит примерно так:  
    <scriptsrc='https://kit.fontawesome.com/a076d05399.js'crossorigin='anonymous’>
    Теперь вам нужно скопировать и вставить его в заголовок вашей темы   «Тема»> «Настроить»> «Изменить HTML». Вставлять скрипт Font Awesome нужно между тегами заголовка  </head>…</head>

  3. Вставить ссылку, которая подключит ваш сайт к базе font awesome между  тегами <head> ... </head> вашей темы:
 <link crossorigin='anonymous' href='https://use.fontawesome.com/releases/v5.8.2/css/all.css' integrity='sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay' rel='stylesheet'/>


Как добавить к нужному элементу иконки Font Awesome

Вам нужно выбрать нужную иконку на сайте Font Awesome  и скопировать ее HTML код:
<i class="fa fa-car" </i> и вставить его перед тем элементом, который хотите выделить
Добавление стилей CSS к иконке
< i class="fa fa-car"style="color: red; font-size: 28px;"</i>
Машины
   Пример использование иконок для меню сайта:
  <button style='font-size:14px'><a href="#">Главная
  <i class='fa fa-home'style='font-size:18px;color:#0ac4fc'></i></a>
   </button> 



Вы можете разместить иконки Font Awesome в любом месте, используя в имени класса префикс fa и название иконки. Font Awesome разработан так, чтобы он мог быть использован в строчных элементах  (тег  <i> ... </i>).

Как изменить стили конкретной иконки и шрифт любого текста

  • *Для более тонкой настройки шрифта вам потребуется загрузить файлы Font Awesome в папку своего проекта, а затем создать ссылку на его CSS-файл на своих веб-страницах, чтобы импортировать Font Awesome.
  • *Перейдя на стартовую страницу fontawesome.com/, прокрутите вниз до раздела «Другие способы использования» (Other Ways to Use). Далее  жмем кнопку «Загрузить» и выбираем, в нашем случае, «FRE FOR WEB»

суббота 22 2024

Похожие сообщений под статьёй : Виджет сообщений в виде списка

Виджет связанных сообщений Blogger


Зачем это нужно? ― спросите вы. Для продвижения страниц сайта в топ-10 поисковой выдачи нужна дополнительная внутренняя перелинковка, что влияет на ранжирование в поисковой выдаче…






Как добавить виджет без вывода миниатюр в свой блог:

  •  Перейдите в раздел «Тема»>«Настроить»>«изменить HTML» на панели инструментов Blogger и создайте резервную копию существующего шаблона, прежде чем вносить какие-либо изменения!
  •   Нажмите клавиши «Ctrl+F» для поиска тега  <data:post.body/> (См. на скриншоте ниже)
  •  Добавьте код непосредственно после этого тега (Скачать по ссылке )


четверг 02 2024

Хлебные крошки на Blogger | Интернет shabashka

 
 

 

Хлебные крошки на Blogger

Заметила, что на блоге я мало коснулась темы гаджета "Хлебные крошки". Можно сказать совсем о них не писала. 
Для чего они нужны? "Хлебные крошки" - дополнительная навигация на сайте. Пользователь видит в какой части сайта он находится и ему проще найти нужный материал.

четверг 25 2024

Кнопка "Читать далее" : Как изменить ссылку "Read More" в Blogger

Установка на blogspot кнопки "Читать далее"


Кнопки являются очень важным элементом дизайна сайта. В этой статье я покажу, как установить кнопку "Читать далее".   Кнопка должна привлечь внимание читателя и в то же время гармонично вписываться в общее оформление блога...



❝ Главная страница — важная часть каждого блога. Она должна содержать до 5-6 постов, чтобы максимально привлечь внимание читателя. Удержать читателя дольше — это то, что я называю успехом блога...❞

Кнопка «Reed more» (Читать далее) заменяет ссылку на полную статью. Это достаточно удобно для читателя, когда на главной странице блога отображено лишь начало поста, отображающее основной смысл всей статьи. Положительно к такой разбивки относятся и поисковики, так как в этом случае уменьшается процент дублированного контента. Ниже на скриншоте подробное пошаговое описание как настроить запись и убрать "лишний" с точки зрения СЕО тег "#more" из кода разделения статьи.


Как вставить ссылку «Читать дальше»

  1. В режиме верстки текстового редактора сообщения ставим курсор в том месте статьи, где хотим ее разделить. Пункты 1и 2 на скриншоте. Сразу после этого увидите под текстом полосу — она отделает анонс от полной записи.
  2. Если переключиться в HTML режим, то увидите, что в коде применился специальный тег <! —more—>. Пункт 3 на скриншоте.
  3. Для настройки или изменения самого текста ссылки «Читать…» заходим во вкладку Дизайн>Гаджет Сообщения блога> Изменить и в появившемся окне вы можете менять настройки по своему усмотрению. Пункт 4 на скриншоте. 
    💡Не забудьте после этого сохранить все настройки.

Избавляемся от тега #more&quot;

💡Способ реализуются за счет правки шаблона Blogger для темы Watermark 💡

  • Раздел Тема> Настроить> Редактировать HTML. Ставим курсор в любом месте кода шаблона: Тема> Ctrl+F. В левом верхнем углу окна редактора HTML кода появится окно с текстом «Search».
  • В этом окне надо ввести HTML код: <div class='jump-link’> для поиска и нажать клавишу «Enter»💡(При наличии такого кода в шаблоне HTML будет выполнен переход на него. Первый найденный HTML скрипт в окне редактора выделится тёмно-жёлтым цветом.)💡
  • Удаляем старый код и вставляем новый. Пункт 5 на скриншоте выше.
  • Нажимаем на значок в форме дискеты с всплывающим текстом "Сохранить".  (Этот значок предназначен для сохранения изменений, внесённых в код темы Blogger.)

/*этот код копируем и вставляем*/


<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<b:if cond='data:blog.pageType != &quot;item&quot;'>

<div class='readmore'><a expr:href='data:post.url'>

<data:post.jumpText/></a></div></b:if></b:if>

суббота 04 2023

Почему нужна страница 404: Как создать страницу ошибки 404?

Как изменить вид собственной страницы 404 в Blogger


Если пользователь пытается загрузить в браузере несуществующий URL-адрес, появляется страница 404.
Ее задача — сообщить пользователю, что такой страницы на сайте нет...





Страница 404 по умолчанию в  Blogger не несет никакой информации, а просто отображает сообщение об ошибке: «К сожалению, страница, которую вы искали в этом блоге, не существует».
Разработчики нового дизайна предоставили возможность изменить внешний вид этого сообщения и сделать саму страницу 404 более информативной для пользователя, используя код HTML и CSS.
К тому же ее настройка сможет предложить готовые решения — перейти на главную страницу или к другим интересным статьям, чтобы пользователь не ушел сразу с вашего веб-сайта.

💡Если вы хотите посмотреть свою страницу 404, то самый простой способ  —  набрать 404 после URL-адреса в поисковой строке http://...blogspot.com/404/. 
Этот дизайн страницы ошибок является лишь одной из идей. Вы можете вставить свой код для оформления, поискав его в интернете.

    

Корректное оформление страницы с ошибкой 404

Общие рекомендации от известных "поисковиков":

Иногда при переходе на сайт посетитель видит сообщение об ошибке со статусом 404. Этот статус означает, что на сайте отсутствует запрашиваемая страница, то есть запрошенному URL не соответствует ни одна страница сайта (404 File not found). Это может произойти из-за неверной ссылки или потому, что запрашиваемая страница была удалена.
Увидев страницу с ошибкой, пользователь может решить, что ваш сайт не работает, и уйти. Чтобы этого избежать, необходимо правильно оформить и разместить на сайте специальную страницу, которая внешне будет отличаться от остальных страниц вашего сайта. При оформлении такой страницы используйте различные графические приемы, подсказывающие человеку, что по запрошенному адресу ничего не существует: например, другие цвета или отсутствие графики. Разместите на странице карту сайта, ссылку на главную страницу или форму поиска, дайте инструкции по дальнейшим действиям.
    

Как создать или отредактировать страницу ошибки 404 в блоге

На скриншоте ниже показаны шаги настройки:


  1. Панель инструментов Blogger › Название блога «Test_2» › вкладка «Настройки» на левой боковой панели
  2. Раздел «Ошибки и переадресации» › вкладка «Персонализированное сообщение об ошибке 404»
  3. Окно «Персонализированное сообщение об ошибке 404» › Вставить код

    <h1 style="text-align: center :...</p>

  4. Нажать «Сохранить»
<h1 style="text-align: center;">Oops ошибка 404!</h1>
<p style="text-align: center;">Страница 404</p>
<p style="text-align: center;"><br><b>Страница, которую вы ищете, возможно, была переименована или не существует на этом сервере..</b></p>
<p style="text-align: center;"><br><br><b>Перейдите на главную страницу.</b></p>
<p style="text-align: center;"><a class='back' href='/'>Главная</a></p>
 

среда 04 2023

Форма контактов для Blogger: Контакты на отдельной странице

Как создать форму контактов на отдельной странице


В инструментах Blogger появился виджет "Форма для связи". Однако, есть один нюанс. По умолчанию эта форма устанавливается на боковую панель блога. Удобнее всего ее  сделать на отдельной странице...








Для того чтобы не создавать новую отдельную страницу для  формы контактов, я использовал уже имеющуюся  — КОНТАКТЫ, куда собственно и поместил уже готовый код.

 Существует несколько вариантов добавления формы контактов на blogger.com:
  •  сторонние инструменты создания любых видов форм;
  •  установка гаджета Форма обратной связи на боковой панели;
  • вставка кода формы на отдельной странице. 

Подробная инструкция для создания формы

  1. Создайте новую страницу и откройте ее в режиме html редактора;
  2. Скопируйте приведенный ниже код  <form name='contact-form'>...</form>  и вставьте его;
  3.  Найдите следующий HTML-код в шаблоне вашего блога ]]></b:skin> и именно перед ним добавьте div#ContactForm1{display: none !important;} и ваша форма будет скрыта.
<form name='contact-form'><div>Ваше имя: </div><input class='contact-form-name' id='ContactForm1_contact-form-name' name='name' size='30' type='text' value=''/><br />
	<br />
	<div>Email: <em>(обязательно)</em></div><input class='contact-form-email' id='ContactForm1_contact-form-email' name='email' size='30' type='text' value=''/><br />
	<br />
	<div>Сообщение: <em>(обязательно)</em></div><textarea class='contact-form-email-message' id='ContactForm1_contact-form-email-message' name='email-message' rows='5'></textarea><br />
	<br />
	<p></p><input class='contact-form-button contact-form-button-submit' id='ContactForm1_contact-form-submit' type='button' value='Отправить'/><br />
	<br />
	<div style='text-align: center; max-width: 450px; width: 100%'><p class='contact-form-error-message' id='ContactForm1_contact-form-error-message'></p><p class='contact-form-success-message' id='ContactForm1_contact-form-success-message'></p></div></form>
  

Теперь заполните все поля и попробуйте себе отправить письмо! На вашу почту прийдет такое сообщение:[PSWS] Получено новое сообщение.
Входящие
Форма для связи Blogger
пн, 28 авг., 00:10
Привет! С уважением, aleks | email@gmail.com Примечание. Это письмо отправлено с помощью гаджета "Форма для связи" из блога https://secretwsemswet.blogspot.com  
 ★ Если не пришло письмо на почту, проверьте папку спам. 

iklan banner
Приветствую Вас на сайте PSVS!
! Сегодня

Транслейт


Переводчик сайта на другие языки

Статистика
  • Сообщений
  • Комментариев
  • Просмотров
Технологии Blogger.

Random Posts

Архив-Календарь

Food

3/Food/feat-list

Fashion

3/Fashion/grid-small

Design

Shooting

Racing

Bottom

Sponsor Advertisement

Установка ‼️и настройка блогов на Blogspot❕❕

Text Widget

Text Widget

Копирование материала — с разрешения автора сайта © Copyright, 2020 г.

Форма для связи

Имя

Электронная почта *

Сообщение *

Постоянные читатели

Labels

Настройка блога (11) Копилка знаний (5) Установка ОС (2)

Sports

3/Sports/col-left

Video of Day

Музыка для настроения

Наведи курсор

Popular Posts

Меню

🔔Подписаться по email🔻

PSWS

Popular Jobs

Popular Posts

Advertisement With Us

Advertisement

About Me

Copyright ©2024 | Копирование — С разрешения автора сайта PSVS По секрету всему свету | У вас — вопросы, у нас — ответы!