Привет, друзья. При открытии некоторых сайтов можно видеть сначала приветственную заставку, которая через несколько секунд пропадает и пользователю открывается сам сайт. Наверняка вы встречали такое в сети. Видела я очень интересные варианты оформления такой приветственной заставки. Которая совсем не отвлекает и не раздражает. На ней просто "зависнуть" хочется.

заставка в блоге

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


Для реализации нужно зайти во вкладку Тема и найти закрывающийся тег </ head>. Прямо над ним установить этот код

<style type='text/css'>
.visibile {display:block;}
.invisibile {display:none;}
</style>
<script type='text/javascript'>
function mostranascondi(identificazione){
  var menu = document.getElementById(identificazione);
  if(menu.className == &quot;visibile&quot;){menu.className = &quot;invisibile&quot;; }
  else{ menu.className = &quot;visibile&quot;; }
}
</script>

Там же находим <body>. Он где - то рядом с предыдущим. В некоторых шаблонах вместо него есть такая строка

<body expr:class='&quot;loading&quot; + data:blog.mobileClass'>

Сразу после тега или этой строчки неё следующий код

<b:if cond='data:blog.homepageUrl == data:blog.url'>
<div class='visibile' id='benvenuto' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visibile; width:100%; height:100%; background: #E4F9F8;'>
<div style='width:600px; height:400px; position:absolute; top:40%; left:40%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#003366; font-size:24px; line-height:24px; text-align:center;'>
<p><strong>ДОБРО ПОЖАЛОВАТЬ!!!</strong></p>
<p><strong>РАДА ВАС ВИДЕТЬ </strong></p>
<p><img src='https://www.kittstillrocks.com/wp-content/uploads/2018/10/kittstillrocks-com-welcome-1024x261.png'/></p>
<p><strong> СЕЙЧАС БЛОГ ОТКРОЕТСЯ</strong></p>
</div>
</div>
<script type='text/javascript'>
window.load=setTimeout(&quot;mostranascondi(&#39;benvenuto&#39;)&quot;, 5000);
</script>
</b:if>

Ваши индивидуальные настройки

В строках отмеченных зелёным цветом пишите свой текст. Адрес изображения отмечен розовым цветом.

5000 - это время в миллисекундах, когда сообщение остается видимым до исчезновения

# E4F9F8 - цвет фона на странице сообщений

width:600px; height: 400 px ширина и высота сообщения

верх: 40 % ; слева: 40% ; - это процентная точка макета, где начинается сообщение

color: # 003366 - цвет текста сообщения

размер шрифта: 24 px; line-height: 24 px - это размер символов и строк текста сообщения

text-align: center ; для центрирования сообщения и любых вставленных изображений

После установки кодов не забудьте сохранить шаблон и посмотрите результат. Кстати, советую подумать - в канун праздников можно использовать такую приветственную заставку в качестве поздравления читателям или сделать важное объявление.

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

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

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

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

панорамное фото на веб странице

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

Для создания панорамного фото будем использовать сайт momento360.

Вы попадёте по этой ссылке сразу на страницу, где нужно пройти регистрацию обычном способом. Здесь мы должны выбрать бета-версию FREE и внизу нажать на кнопку SIGN UP. Откроется окно с формой. Заполняете все поля - Введите имя, фамилию, адрес электронной почты, пароль, проверьте условия предоставления услуги.
Затем на указанную вами почту придёт письмо с успешной регистрацией и подтверждением.

У вас появился свой аккаунт и сразу можно приступить к работе. Выбираете пункт SHARED WITH ME. Кто работает с браузером Хром включите перевод. Вот такое окно, где соответственно выбираем Загрузить. Берем свою картинку с компьютера и загружаете.



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

панорамное фото на веб странице


Копируем эту ссылку. Она будет примерно такого вида

https://momento360.com/e/u/8c589472198c4f87a341ee0aefb42a44?utm_campaign=embed&utm_source=other&utm_medium=other&heading=0&pitch=0&field-of-view=75

Нам нужна только та часть, которую я отметила розовым цветом чтобы было вот так

<iframe height="350px" width="100%" allowfullscreen="true".
src="https://momento360.com/e/u/8c589472198c4f87a341ee0aefb42a44"> </iframe>


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

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

Код нужно установить в редакторе сообщения или страницы в режиме HTML.

Красиво и стильно смотрятся такие панорамные фото. Попробуйте. 

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

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

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

В ней нет отображаемых ярлыков и даты публикации. Сообщения отображены в виде списка от новых до более ранних.

карта блога

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

Копируйте приведённый ниже код целиком

<style>
#contenitore{border:1px solid #666;width:100%;margin:0 auto}
#el_box{margin:0px}
.elementi{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.elementi img{background:#aaa;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.elementi h6,.elementi h6 a{font-size:14px!important;margin:0;color:#111}
.elementi:hover{background-color:#afe5f3;}
.elementi p{font:12px Georgia; text-align:justify;color:#555;line-height:14px;margin:5px 0}

#navigazione{border:1px solid #d4d4d4;color:#bbb;font-family:Georgia;font-size:12px;text-align:center;margin:0px}
#navigazione:hover{background-color:#d4d4d4;}
#navigazione a{color:#262626!important;font-family:Georgia!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#navigazione span{padding:5px 10px}
#navigazione .next{float:right}
#navigazione .previous{float:left}
#navigazione .home{text-align:center}
#navigazione a:hover,#navigazione span.noactived{color:transparant!important}
</style>
<script type="text/javascript">
//<![CDATA[
var numfeed = 15;
var startfeed = 0;
var urlblog = "https://poluhka.blogspot.com/";
var characnumber = 200;
var urlprevious, urlnext;
function maskolisfeed(johny,banget){
var showfeed = johny.split("<");
for(var i=0;i<showfeed.length;i++){
if(showfeed[i].indexOf(">")!=-1){
showfeed[i] = showfeed[i].substring(showfeed[i].indexOf(">")+1,showfeed[i].length);
}
}
showfeed = showfeed.join("");
showfeed = showfeed.substring(0,banget-1);
return showfeed;
}
function mostrapost(json) {
var entry, posttitle, posturl, postimg, postcontent;
var showblogfeed = "";
urlprevious = "";
urlnext = "";
for (var k = 0; k < json.feed.link.length; k++) {
if (json.feed.link[k].rel == 'previous') {
urlprevious = json.feed.link[k].href;
}
if (json.feed.link[k].rel == 'next') {
urlnext = json.feed.link[k].href;
}
}
for (var i = 0; i < numfeed; i++) {
if (i == json.feed.entry.length) { break; }
entry = json.feed.entry[i];
posttitle = entry.title.$t;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
if ("content" in entry) {
postcontent = entry.content.$t;
} else if ("summary" in entry) {
postcontent = entry.summary.$t;
} else {
postcontent = "";
}
if ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = "https://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/s300-no/no-immagini.jpg";
}
showblogfeed += "<div class='elementi'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6>
<a href='" + posturl + "'>" + posttitle + "</a></h6>
";
showblogfeed += "<p>
" + maskolisfeed(postcontent,characnumber) + "...</p>
";
showblogfeed += "</div>
";
}
document.getElementById("el_box").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:feed_nav(-1);' class='previous'>Следующие</a>";
} else {
showblogfeed += "<span class='noactived previous'>Следующие</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:feed_nav(1);' class='next'>Предыдущие </a>";
} else {
showblogfeed += "<span class='noactived next'>Предыдущие</span>";
}
showblogfeed += "<a href='javascript:feed_nav(0);' class='home'>последние 15 статей</a>";
document.getElementById("navigazione").innerHTML = showblogfeed;
}
function feed_nav(url){
var p, parameter;
if(url==-1) {
p = urlprevious.indexOf("?");
parameter = urlprevious.substring(p);
} else if (url==1) {
p = urlnext.indexOf("?");
parameter = urlnext.substring(p);
} else {
parameter = "?start-index=1&max-results=" + numfeed + "&orderby=published&alt=json-in-script"
}
parameter += "&callback=mostrapost";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("el_box").innerHTML = "<div id='caricamento'>
</div>
";
document.getElementById("navigazione").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var el_box = document.createElement('script');
el_box.setAttribute('type', 'text/javascript');
el_box.setAttribute('src', archievefeed);
el_box.setAttribute('id', 'Ip_etichette');
document.getElementsByTagName('head')[0].appendChild(el_box);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("Ip_etichette");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { feed_nav(0); }
//]]>
</script>
<br />
<div id="el_box">
</div>
<div id="navigazione">
</div>


https://poluhka.blogspot.com/ адрес вашего блога
15;  количество отображаемых постов на странице
height:70px; width:70px  размеры изображений
background-color:#afe5f3; цвет фона при наведении курсора
background-color:#d4d4d4; цвет фона нижней панели навигации при наведении

https://lh5.googleusercontent.com/-CQ9_FmDG2nY/UynxZ68NKBI/AAAAAAAAmVA/WF03wZqixTY/s300-no/no-immagini.jpg  адрес картинки, если изображение отсутствует

Настроек индивидуальных можно сделать много. Если что, спрашивайте.

Сначала подготовьте код. Затем создайте новую страницу, дайте ей название и переходите в режим HTML. Вставьте код.

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

Вот и всё. Добра вам и до новых встреч.

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

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

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

карта блога


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

Что мы имеем в этой карте блога
  • Красиво оформленный внешний вид с полосой прокрутки.
  • Карта отображает все опубликованные посты от новых до самых ранних.
  • Показана дата публикации к постам.
  • Отображаются заданные ярлыки при клики на которые открывается страница со всеми статьями данного ярлыка.
  • При наведении на заголовок статьи появляется всплывающее окно с кратким анонсом.
  • Карту блога можно легко настроить под ваш дизайн.
  • Легко устанавливается на странице. 
Если решились сделать на своём блоге такую, копируйте без изменений следующий код.

<div id="bp_toc" style="max-height:1300px;overflow:scroll;overflow-x:auto;">
</div>
<script type='text/javascript'>
//<![CDATA[

   var postTitle = new Array();     // array of posttitles
   var postUrl = new Array();       // array of posturls
   var postDate = new Array();      // array of post publish dates
   var postSum = new Array();       // array of post summaries
   var postLabels = new Array();    // array of post labels
// global variables
   var sortBy = "datenewest";         // default value for sorting ToC
   var tocLoaded = false;           // true if feed is read and ToC can be displayed
   var numChars = 250;              // number of characters in post summary
   var postFilter = '';             // default filter value
   var tocdiv = document.getElementById("bp_toc"); //the toc container
   var totalEntires =0; //Entries grabbed till now
   var totalPosts =0; //Total number of posts in the blog.
// main callback function
function loadtoc(json) {
   function getPostData() {
   // this functions reads all postdata from the json-feed and stores it in arrays
      if ("entry" in json.feed) {
         var numEntries = json.feed.entry.length;
         totalEntires = totalEntires + numEntries;
         totalPosts=json.feed.openSearch$totalResults.$t
         if(totalPosts>totalEntires)
         {
         var nextjsoncall = document.createElement('script');
         nextjsoncall.type = 'text/javascript';
         startindex=totalEntires+1;
         nextjsoncall.setAttribute("src", "/feeds/posts/summary?start-index=" + startindex + "&max-results=500&alt=json-in-script&callback=loadtoc");
         tocdiv.appendChild(nextjsoncall);
         }
      // main loop gets all the entries from the feed
         for (var i = 0; i < numEntries; i++) {
         // get the entry from the feed
            var entry = json.feed.entry[i];
         // get the posttitle from the entry
            var posttitle = entry.title.$t;
         // get the post date from the entry
            var postdate = entry.published.$t.substring(0,10);
         // get the post url from the entry
            var posturl;
            for (var k = 0; k < entry.link.length; k++) {
               if (entry.link[k].rel == 'alternate') {
               posturl = entry.link[k].href;
               break;
               }
            }
         // get the post contents from the entry
         // strip all html-characters, and reduce it to a summary
            if ("content" in entry) {
               var postcontent = entry.content.$t;}
            else
               if ("summary" in entry) {
                  var postcontent = entry.summary.$t;}
               else var postcontent = "";
         // strip off all html-tags
            var re = /<\S[^>]*>/g;
            postcontent = postcontent.replace(re, "");
         // reduce postcontent to numchar characters, and then cut it off at the last whole word
            if (postcontent.length > numChars) {
               postcontent = postcontent.substring(0,numChars);
               var quoteEnd = postcontent.lastIndexOf(" ");
               postcontent = postcontent.substring(0,quoteEnd) + '...';
            }
         // get the post labels from the entry
            var pll = '';
            if ("category" in entry) {
               for (var k = 0; k < entry.category.length; k++) {
                  pll += '<a href="javascript:filterPosts(\'' + entry.category[k].term + '\');" title="Click here to select all posts with label \'' + entry.category[k].term + '\'">' + entry.category[k].term + '</a>,  ';
               }
            var l = pll.lastIndexOf(',');
            if (l != -1) { pll = pll.substring(0,l); }
            }
         // add the post data to the arrays
            postTitle.push(posttitle);
            postDate.push(postdate);
            postUrl.push(posturl);
            postSum.push(postcontent);
            postLabels.push(pll);
         }
      }
      if(totalEntires==totalPosts) {tocLoaded=true;showToc();}
   } // end of getPostData
// start of showtoc function body
// get the number of entries that are in the feed
//   numEntries = json.feed.entry.length;
// get the postdata from the feed
   getPostData();
// sort the arrays
   sortPosts(sortBy);
   tocLoaded = true;
}
// filter and sort functions
function filterPosts(filter) {
// This function changes the filter
// and displays the filtered list of posts
  // document.getElementById("bp_toc").scrollTop = document.getElementById("bp_toc").offsetTop;;
   postFilter = filter;
   displayToc(postFilter);
} // end filterPosts
function allPosts() {
// This function resets the filter
// and displays all posts
   postFilter = '';
   displayToc(postFilter);
} // end allPosts
function sortPosts(sortBy) {
// This function is a simple bubble-sort routine
// that sorts the posts
   function swapPosts(x,y) {
   // Swaps 2 ToC-entries by swapping all array-elements
      var temp = postTitle[x];
      postTitle[x] = postTitle[y];
      postTitle[y] = temp;
      var temp = postDate[x];
      postDate[x] = postDate[y];
      postDate[y] = temp;
      var temp = postUrl[x];
      postUrl[x] = postUrl[y];
      postUrl[y] = temp;
      var temp = postSum[x];
      postSum[x] = postSum[y];
      postSum[y] = temp;
      var temp = postLabels[x];
      postLabels[x] = postLabels[y];
      postLabels[y] = temp;
   } // end swapPosts
   for (var i=0; i < postTitle.length-1; i++) {
      for (var j=i+1; j<postTitle.length; j++) {
         if (sortBy == "titleasc") { if (postTitle[i] > postTitle[j]) { swapPosts(i,j); } }
         if (sortBy == "titledesc") { if (postTitle[i] < postTitle[j]) { swapPosts(i,j); } }
         if (sortBy == "dateoldest") { if (postDate[i] > postDate[j]) { swapPosts(i,j); } }
         if (sortBy == "datenewest") { if (postDate[i] < postDate[j]) { swapPosts(i,j); } }
      }
   }
} // end sortPosts
// displaying the toc
function displayToc(filter) {
// this function creates a three-column table and adds it to the screen
   var numDisplayed = 0;
   var tocTable = '';
   var tocHead1 = 'Все статьи';
   var tocTool1 = 'Clicca per ordinare per titolo';
   var tocHead2 = 'Дата публикации';
   var tocTool2 = 'Clicca per ordinare per data';
   var tocHead3 = 'Категории';
   var tocTool3 = '';
   if (sortBy == "titleasc") {
      tocTool1 += ' (scendi)';
      tocTool2 += ' (nuovi)';
   }
   if (sortBy == "titledesc") {
      tocTool1 += ' (scendi)';
      tocTool2 += ' (prima nuovi post)';
   }
   if (sortBy == "dateoldest") {
      tocTool1 += ' (sali)';
      tocTool2 += ' (prima nuovi post)';
   }
   if (sortBy == "datenewest") {
      tocTool1 += ' (sali)';
      tocTool2 += ' (prima vecchi post)';
   }
   if (postFilter != '') {
      tocTool3 = 'Clicca per vedere tutti i post';
   }
   tocTable += '<table>';
   tocTable += '<tr>';
   tocTable += '<td class="toc-header-col1">';
   tocTable += '<a href="javascript:toggleTitleSort();" title="' + tocTool1 + '">' + tocHead1 + '</a>';
   tocTable += '</td>';
   tocTable += '<td class="toc-header-col2">';
   tocTable += '<a href="javascript:toggleDateSort();" title="' + tocTool2 + '">' + tocHead2 + '</a>';
   tocTable += '</td>';
   tocTable += '<td class="toc-header-col3">';
   tocTable += '<a href="javascript:allPosts();" title="' + tocTool3 + '">' + tocHead3 + '</a>';
   tocTable += '</td>';
   tocTable += '</tr>';
   for (var i = 0; i < postTitle.length; i++) {
      if (filter == '') {
         tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
         numDisplayed++;
      } else {
          z = postLabels[i].lastIndexOf(filter);
          if ( z!= -1) {
             tocTable += '<tr><td class="toc-entry-col1"><a href="' + postUrl[i] + '" title="' + postSum[i] + '">' + postTitle[i] + '</a></td><td class="toc-entry-col2">' + postDate[i] + '</td><td class="toc-entry-col3">' + postLabels[i] + '</td></tr>';
             numDisplayed++;
          }
        }
   }
   tocTable += '</table>';
   if (numDisplayed == postTitle.length) {
      var tocNote = '<span class="toc-note">Статьи блога' + postTitle.length + ' постов<br/></span>'; }
   else {
      var tocNote = '<span class="toc-note">показано ' + numDisplayed + ' постов с ярлыком \'';
      tocNote += postFilter + '\'из '+ postTitle.length + 'опубликованных постов<br/></span>';
   }
   tocdiv.innerHTML = tocNote + tocTable;
} // end of displayToc
function toggleTitleSort() {
   if (sortBy == "titleasc") { sortBy = "titledesc"; }
   else { sortBy = "titleasc"; }
   sortPosts(sortBy);
   displayToc(postFilter);
} // end toggleTitleSort
function toggleDateSort() {
   if (sortBy == "datenewest") { sortBy = "dateoldest"; }
   else { sortBy = "datenewest"; }
   sortPosts(sortBy);
   displayToc(postFilter);
} // end toggleTitleSort
function showToc() {
  if (tocLoaded) {
     displayToc(postFilter);
     var toclink = document.getElementById("toclink");
  }
  else { alert("Just wait... TOC is loading"); }
}
function hideToc() {
  var tocdiv = document.getElementById("toc");
  tocdiv.innerHTML = '';
  var toclink = document.getElementById("toclink");

}
//]]>
</script>
<script src="/feeds/posts/summary?alt=json-in-script&amp;max-results=9999&amp;callback=loadtoc" type="text/javascript"></script>
<style scoped="" type="text/css">
    #comments {display:none;}
    </style>
<style type='text/css'> 
    #bp_toc {background:#1dbb9b;margin:0 auto;padding:5px;}
    span.toc-note {padding:20px;margin:0 auto;display:block;text-align:center;color:#fedede;font-family:'Georgia';font-weight:bold;text-transform:uppercase;font-size:30px;line-height:normal;}
    .toc-header-col1 {padding:10px;background-color:#fff;width:250px;}
    .toc-header-col2 {padding:10px;background-color:#fff;width:75px;}
    .toc-header-col3 {padding:10px;background-color:#fff;width:125px;}
    .toc-header-col1 a:link, .toc-header-col1 a:visited, .toc-header-col2 a:link, .toc-header-col2 a:visited, .toc-header-col3 a:link, .toc-header-col3 a:visited {font-size:13px;
    text-decoration:none;color:#F60909;font-family:'Georgia';font-weight:bold;letter-spacing: 0.5px;}
    .toc-header-col1 a:hover, .toc-header-col2 a:hover, .toc-header-col3 a:hover {
    text-decoration:none;}
    .toc-entry-col1, .toc-entry-col2, .toc-entry-col3 {background:#fff;padding:5px;padding-left:5px;font-size:89%}
    .toc-entry-col1 a, .toc-entry-col2 a, .toc-entry-col3 a{color:#555;font-size:13px;}
    .toc-entry-col1 a:hover, .toc-entry-col2 a:hover, .toc-entry-col3 a:hover{color:#f60909;}
    #bp_toc table {width:100%;margin:0 auto;counter-reset:rowNumber;}
    .toc-entry-col1 {counter-increment:rowNumber;}
    #bp_toc table tr td.toc-entry-col1:first-child::before {content: counter(rowNumber);min-width:1em;margin-right:0.5em;}
    td.toc-entry-col2 {background:#fdfdfd;}
    </style>


Ширина столбцов отмечена как 250px, 75px и 125px .
#1dbb9b;  фон заголовка и полосы прокрутки.
#F60909;  цвет шрифта в названиях столбцов.
#fedede; цвет шрифта заголовка.

Здесь я хочу вам дать несколько важных советов.

1. Идём в админку блога и создаём новую страницу, даём ей название.
2. Переходим из обычного режима в режим HTML и в поле вставляем скопированный код.
3. Не нужно переходить в режим просмотра. Вставили код и сразу жмём на кнопку публикации. Вот после этого уже можно будет её увидеть.
4. Все нужные настройки по самому дизайну описаны выше.
5. Если у вас уже установлена какая -то карта, которая формирует статьи через фид блога, они могут конфликтовать и результата не будет.

В принципе всё проще "паренной репы".

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

Вставьте следующий код чуть выше основного
<style type="text/css">
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 920px; /* Ширина */
}
</style>

Ширина 920px; может быть изменена при необходимости.

Эту карту блога я протестировала на всех своих рабочих блогах. Ведёт себя волне корректно. Чего и вам желаю.

Если что не понятно или пошло не так, обращайтесь.

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

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

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

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

анимированный фон

У меня была статья как сделать постоянно меняющийся фон страницы, в которой предложен вариант для блога в целом и для отдельной страницы.

То, чем делюсь сегодня, можно посмотреть наглядно на тестовом блоге.


Код совершенно простой и не требует каких - то особых навыков. Заранее приготовьте нужные картинки, которые будут фоновым изображением. Рассчитано на 6 меняющих друг друга слайдов.

<style>

ul#fonstyly {
list-style:none;
}
.dsimageanimation {
margin:0;
width:100%;
height:100%;
top:0px;
left: 0px;
z-index: -1;
}
.dsimageanimation li#fonlink span#fondrive {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
background-size:100% 100%;
-moz-background-size:100% 100%;
-webkit-background-size:100% 100%;
-o-background-size:100% 100%;
-ms-background-size:100% 100%;
background-repeat: none;
background-attachment: fixed;
opacity: 0;
z-index: -1;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.dsimageanimation li#fonlink:nth-child(1) span#fondrive {
background-image: url(Адрес картинки 1);
}
.dsimageanimation li#fonlink:nth-child(2) span#fondrive {
background-image: url(Адрес картинки 2);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.dsimageanimation li#fonlink:nth-child(3) span#fondrive {
background-image: url(Адрес картинки 3);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.dsimageanimation li#fonlink:nth-child(4) span#fondrive {
background-image: url(Адрес картинки 4);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.dsimageanimation li#fonlink:nth-child(5) span#fondrive {
background-image: url(Адрес картинки 5);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.dsimageanimation li#fonlink:nth-child(6) span#fondrive {
background-image: url(Адрес картинки 6);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@-webkit-keyframes imageAnimation {
0% { opacity: 0;
-webkit-animation-timing-function: ease-in; }
8% { opacity: 1;
-webkit-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-moz-keyframes imageAnimation {
0% { opacity: 0;
-moz-animation-timing-function: ease-in; }
8% { opacity: 1;
-moz-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@-o-keyframes imageAnimation {
0% { opacity: 0;
-o-animation-timing-function: ease-in; }
8% { opacity: 1;
-o-animation-timing-function: ease-out; }
17% { opacity: 1 }
 25% { opacity: 0 }
100% { opacity: 0 }
}
@-ms-keyframes imageAnimation {
0% { opacity: 0;
-ms-animation-timing-function: ease-in; }
8% {opacity: 1;
-ms-animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes imageAnimation {
0% { opacity: 0;
animation-timing-function: ease-in; }
8% { opacity: 1;
animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
</style>

<ul class="dsimageanimation" id="fonstyly">
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
<li id="fonlink"><span id="fondrive"></span></li>
</ul>


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

Картинки лучше подобрать с таким фоном, чтобы текст был виден контрастнее. Публикуйте сообщение и полюбуйтесь на его анимированный фон.

Если есть желание можно просто изменить фон страницы на желаемый.

У меня сегодня всё. До встречи. 

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

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

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