Страница Содержание в картинках по одному ярлыку для Blogger ( Blogspot)

Здравствуйте, посетители и гости сайта Я блоггер. Сегодня расскажу как вывести ярлык (рубрику или категорию) в меню на Blogger (Blogspot) и красиво его оформить. К примеру хотите вы вынести какой-то особый раздел из рубрики в горизонтальное меню, то этот вариант именно для вас.

Как сделать страницу Содержание по одному ярлыку на Blogger

Дизайн вывода публикаций напоминает стандартный  гаджет blogger " Популярные сообщения", только в две колонки. Записи блога  на странице будут с оригинальным размером превью изображений и с названием сообщения. Как создать карту блога ( содержание) всех публикаций я писала в предыдущей статье.

Как вывести ярлык в меню на Blogger (Blogspot)

Что бы вывести ярлык (рубрику или категорию) на отдельную страницу в меню, для начала надо создать Страницу, дать ей название и решить какие сообщения там будут, более подробно как создать страницу в блоггер читайте на сайте. Перейти по ссылке >>> на статью. Соответственно прежде каждому сообщению нужно присвоить один ярлык.

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

А теперь добавим код в свой блог. Создаем новую страницу > открываем вкладку редактор HTML > копируем и вставляем код.

<style>
#resultados { /* общий блок */ }
#loadingscript { /* текст "Загрузка" */ }

.paginaposts { /* каждого прямоугольника */
border: 1px solid #CC6600;
float: left;
height: 50px;
margin: 1px;
padding: 5px;
width: 230px;
background: #FFCC99;
}

.paginaposts a { /* ссылки */
color: #000000;
display: block;
font-size: 11px;
text-decoration: none;
text-indent: 0px;
}

.paginaposts img { /* изображения */
float: left;
height: 40px;
width: 40px;
padding: 2px;
margin: 2px 5px 2px 2px;
}

.paginaposts h6 { /* заголовки */
height: 45px;
margin: 0;
font-weight: normal;
}

.paginaposts:hover { /* эффект при наведении мышки */
background-image: -moz-linear-gradient(100% 100% 90deg,#FF9900, #FF9900);
background-image: -webkit-gradient(linear, left bottom, left top, from(#FF9900), to(#FF9900));
filter:progid: DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#FF9900', EndColorStr='#FF9900');
border: 1px solid #CC6633;
}

#paginacion { /* нижний контейнер с количеством записей */
color: #bbb;
font-family: Lucida Grande;
font-size: 24px;
font-weight: bold;
height: 35px;
line-height: 28px;
padding: 20px 0;
text-align: center;
}

#paginacion span, #paginacion a { /* постраничная навигация */
border: 1px solid #ddcca3;
color: #d6a87a;
display: inline-block;
font-family: Lucida Grande;
font-size: 24px;
font-weight: bold;
margin: 0 2px;
padding: 0 5px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
border-radius: 2px;
text-indent: 0px;
}

#paginacion span.actual { /* текущая страница */
color: #000080;
padding: 0 5px;
-moz-box-shadow: 0 0 30px #fff inset;
-webkit-box-shadow: 0 0 30px #fff inset;
box-shadow: 0 0 30px #fff inset;
}

#paginacion a:hover { /* наведение на эти ссылки */
color: #fff;
-moz-box-shadow: 0 0 20px #666 inset;
-webkit-box-shadow: 0 0 20px #666 inset;
box-shadow: 0 0 20px #666 inset;
text-decoration: none;
}

#paginacion .antesdespues { border: none; }
#paginacion .antesdespues:hover {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}

#paginacion span.deshabilitado { /* следующие */
border: none;
color: #1621c4;
}

#totales {text-align:center;}

</style><script type="text/javascript">
//<![CDATA[
var postporpagina = 100; // число записей на странице
var urlsitio = "https://yablogger.info/"; // адрес блога
var minpaginas = 5; // минимальное количество страниц
var maxpaginas = 10; // максимальное количество страниц
var imgxdefecto = "http://3.bp.blogspot.com/_hljKDuw-cxQ/SsmfbhHhGrI/AAAAAAAAOU0/vCmT5Y4wzEo/s1600/vagaPlantilla_resumenpostsnoimage.gif"; // адрес изображения, который будет показан при отсутствии картинки в сообщении

var firsttime = 0;
var paginaactual = 1;
var cantidadpaginas = 0;
var cantidadposts = 0;

function showpageposts(json) {
var entry, posttitle, posturl, postimg;
var salida = "";

if(cantidadpaginas==0) {
cantidadposts = parseInt(json.feed.openSearch$totalResults.$t);
cantidadpaginas = parseInt(cantidadposts / postporpagina) + 1;
}

for (var i = 0; i < postporpagina; 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 ("media$thumbnail" in entry) {
postimg = entry.media$thumbnail.url;
} else {
postimg = imgxdefecto;
}

salida += "<div class='paginaposts'>";
salida += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
salida += "<h6><a href='" + posturl + "' target='_blank'>" + posttitle + "</a></h6>";
salida += "</div>";
}

document.getElementById("resultados").innerHTML = salida;

paginacion();
}

function paginacion() {
contadorP = 0;
salida = "";

if(paginaactual>1) {
salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual-1) + ")'>следующие</a>";
} else {
salida += "<span class='deshabilitado'>следующие</span>";
}

if (cantidadpaginas<(maxpaginas+1)) {
for (contadorP = 1; contadorP <= cantidadpaginas; contadorP++){
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
} else if(cantidadpaginas>(maxpaginas-1)) {
if(paginaactual<minpaginas) {
for (contadorP=1; contadorP<(maxpaginas-2); contadorP++){
if (contadorP == paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
salida += " ... ";
salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
} else if(cantidadpaginas-(minpaginas-1)>paginaactual&&paginaactual>(minpaginas-1)) {
salida += "<a href='javascript:incluirscript(1)'>1</a>";
salida += "<a href='javascript:incluirscript(2)'>2</a>";
salida += " ... ";
for (contadorP=paginaactual-2; contadorP<=paginaactual+2; contadorP++) {
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
salida += " ... ";
salida += "<a href='javascript:incluirscript(" + parseInt(cantidadpaginas-1) + ")'>" + parseInt(cantidadpaginas-1) + "</a>";
salida += "<a href='javascript:incluirscript(" + cantidadpaginas + ")'>" + cantidadpaginas + "</a>";
} else {
salida += "<a href='javascript:incluirscript(1)'>1</a>";
salida += "<a href='javascript:incluirscript(2)'>2</a>";
salida += " ... ";
for (contadorP=cantidadpaginas-(minpaginas+1); contadorP<=cantidadpaginas; contadorP++) {
if (contadorP==paginaactual) {
salida += "<span class='actual'>" + contadorP + "</span>";
} else {
salida += "<a href='javascript:incluirscript(" + contadorP + ")'>" + contadorP + "</a>";
}
}
}
}

if (paginaactual<contadorP-1) {
salida += "<a class='antesdespues' href='javascript:incluirscript(" + parseInt(paginaactual+1) + ")'>предыдущие</a>";
} else {
salida += "<span class='deshabilitado'>предыдущие</span>";
}

document.getElementById("paginacion").innerHTML = salida;

var iniciopagina = (paginaactual * postporpagina) - (postporpagina - 1);
var finalpagina = paginaactual * postporpagina;
var totales = "Всего опубликовано сообщений: " + cantidadposts + " - из них показано " + iniciopagina + "-" + finalpagina + " записей";
document.getElementById("totales").innerHTML = totales;
}

function incluirscript(pagina) {

if(firsttime==1) {removerscript();}

document.getElementById("resultados").innerHTML = "<div id='loadingscript'>загрузка ...</div>";
document.getElementById("paginacion").innerHTML = "";
document.getElementById("totales").innerHTML = "";

var iniciopagina = (pagina * postporpagina) - (postporpagina - 1);

var archivo = urlsitio + "/feeds/posts/default/-/название ярлыка?start-index=" + iniciopagina;
archivo += "&max-results=" + postporpagina;
archivo += "&orderby=published&alt=json-in-script&callback=showpageposts";

var nuevo = document.createElement('script');
nuevo.setAttribute('type', 'text/javascript');
nuevo.setAttribute('src', archivo);
nuevo.setAttribute('id', 'TEMPORAL');
document.getElementsByTagName('head')[0].appendChild(nuevo);

firsttime = 1;
paginaactual = pagina;
}

function removerscript() {
var el = document.getElementById("TEMPORAL");
var padre = el.parentNode;
padre.removeChild(el);
}

onload=function() { incluirscript(1); }
//]]>
</script>
<div id="resultados" ></div>
<div style="clear:both;"></div>
<div id="paginacion"></div>

<div id="totales"></div>

Настройки кода для страницы Содержание

Изменяем то что выделено красным цветом, внимательно и аккуратно удаляем.

Адрес сайта https://yablogger.info/ изменяем на свой.
Название ярлыка - тут пишем название одного ярлыка с вашего блога, о чем я писала выше. Все остальное можно оставить без изменений.

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

Далее нажимаем Публикация. Если появилось слово Загрузка, то вы сделали все правильно и ждем когда загрузятся все статьи с одним ярлыком. Не видите это слово, значит что-то пошло не так, повторите еще раз все сначала. Удачи ВАМ!!!