шпаргалки блогерши

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

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

Демонстрация

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

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

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

<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("mostranascondi('benvenuto')", 5000);
</script>
</b:if>

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

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

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

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

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

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

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

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

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

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

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

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

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

Привет друзья. Покажу вам сегодня, как создать и вставить в блоге панорамную фотографию. 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

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

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

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

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

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

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

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

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

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

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

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

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. Вставьте код.

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

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

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

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

Привет, друзья. Очередная карта блога у меня сегодня для вас. Уж каких только не было, но эту, перед тем как писать пост, я экспериментировала несколько месяцев на предмет качества и работоспособности. И пока результатом осталась довольна. Она чётко выводит все статьи, по сравнению с многими, который публикуют только 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&max-results=9999&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. Если у вас уже установлена какая -то карта, которая формирует статьи через фид блога, они могут конфликтовать и результата не будет.

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

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

Вставьте следующий код чуть выше основного

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

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

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

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

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

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

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

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

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

демонстрация

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

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

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

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

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

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

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

шпаргалки блогерши

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