Привет, друзья. И опять я с вариантом страницы для отображения всех постов блога. Понесло вот меня на эту тему. Как обещала читателям в комментариях к статье красивая карта блога ещё и такую. Не знаю как назвать, но скорее всего, это тоже карта блога. Отображаются картинки - превью, заголовок статьи с кратким анонсом.
В ней нет отображаемых ярлыков и даты публикации. Сообщения отображены в виде списка от новых до более ранних.
Устанавливается так же очень просто. И посмотрите её на этом блоге в действии.
Копируйте приведённый ниже код целиком
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. Вставьте код.
Сразу публикуйте. Не нужно переходить в обычный режим или пользоваться функцией предварительного просмотра. Вставили - опубликовали. Потом посмотрите на результат.
Вот и всё. Добра вам и до новых встреч.
В ней нет отображаемых ярлыков и даты публикации. Сообщения отображены в виде списка от новых до более ранних.
Устанавливается так же очень просто. И посмотрите её на этом блоге в действии.
Копируйте приведённый ниже код целиком
<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>
#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. Вставьте код.
Сразу публикуйте. Не нужно переходить в обычный режим или пользоваться функцией предварительного просмотра. Вставили - опубликовали. Потом посмотрите на результат.
Вот и всё. Добра вам и до новых встреч.
хотите оформить подписку на новые шпаргалки
Интересная информация, спасибо ! И мне кажется, что вставить такой код довольно легко ))
ОтветитьУдалитьВика, в предыдущей вообще ничего менять не нужно. Хотя тут только адрес блога. У тебя при таком количестве рубрик и постов она необходима.
УдалитьЗдравствуй, Виктория! Спасибо! Я хотела сделать страницу с картой блога у себя, но пока не сделала. Думаю...
ОтветитьУдалитьВиктория, я попробовала вставить карту блога на свой тестовый блог. У меня все получилось. Я взяла твою предыдущую карту. У меня вопрос. Это ничего, что получилось слишком много ссылок на этой странице?
ОтветитьУдалитьИрина, ссылки на статичных страницах блога и в сообщениях вещи разные. если не загнала в поиск статичные страницы, то они не в индексе. А у тебя, как и многих статичных страниц в поиске нет. Это всё для удобства читателей. Ирина, у тебя тоже постов на разные темы. А захочу допустим я найти у тебя, что - то как вроде было. Где я это возьму. Ведь сколько уже говорено, что карта это необходимейший элемент блога.
УдалитьВиктория, спасибо! Я сделала новый пост в "Волшебном фонарике" о закрытии Гугл+. Даю ссылку на твою электронную книгу. У Людмилы Фёдоровны какие-то проблемы с комментариями. Вдруг ты сможешь ей помочь?!
УдалитьВика))))! Вот ведь, только предыдущую поставила)))...а сейчас и эта нравится. Сплошные терзания теперь! Спасибо! А грузится она быстро? По ссылке переходила, пока не поняла, как со скоростью, у меня инет быстрый.
ОтветитьУдалитьВалерия, бывает и такое. Тут выбрать нужно, что бывает трудно. Тут тяжело сказать как она грузиться. Вроде я захожу нормально. ну может совсем доля секунд по сравнению с предыдущей. Всё же картинки. Но не напрягает. Ведь зависит не только от скорости интернета, а от всякой бяки и внутри шаблона.
ОтветитьУдалитьНапример девчата недавно просили именно такую, с картинками. У них там в основном фото и текста мало. Ладно, определишься, главное выбор есть.
Здравствуйте, Вика!
ОтветитьУдалитьА у меня ничего не получилось.
Здравствуйте Ольга. Я только предположить могу. А Вы фид оформили в .feedburner? Или как и у меня на некоторых тестовых блогах не встал из - за того что много всяких гаджетов. Или это условие не соблюдено Не нужно переходить в обычный режим или пользоваться функцией предварительного просмотра. Вставили - опубликовали.
УдалитьПопробуйте предыдущию. Ссылка в этом посте.
Круто! Скоро установлю себе такую.
ОтветитьУдалитьКарта обязательно нужна.
ОтветитьУдалить