Привет, друзья . Если у васт есть желание отобразить последние опубликованные сообщения вашего блога на отдельную страницу, то этот пост для вас. Бывает, что сайдбар не вмещает в себя какие - то гаджеты, то такой вариант, на отдельной странице, вполне может подойти для навигации.
Вот так это будет выглядеть
А наглядно увидеть можно на моём блоге
Что в итоге мы будем иметь
Все настройки разберём. А сейчас скопируйте пока предложенный ниже код целиком
Настройки элементарные и совсем не сложные.
width: 820px; } меняйте по желанию саму ширину фрагментов
var numberOfPosts = 20; количество отображаемых последних сообщений
вместо моего https://poluhka.blogspot.com/ вставьте адрес вашего блога.
Сейчас идём в админ - панель, выбираем опцию страницы и создаём новую страницу. Перейдя сразу в режим HTML, вставляем готовый код и, не используя функцию просмотра, сразу публикуем. Сейчас просмотрите страницу и увидите, что последние статьи отображены, соответственно настройкам.
У меня уже набралось масса вариантов отображения последних статей блога. Если вы заинтересованы посмотрите их в меню ВСЕ СТАТЬИ под ярлыком ГАДЖЕТЫ.
Всем добра, настроения. Увидимся.
Вот так это будет выглядеть

А наглядно увидеть можно на моём блоге
1. Статьи расположены списком
2. Настраиваемое по желанию количество постов
3. Заголовок, картинка и анонс поста
4. Отображение даты публикации, количество комментариев и ссылка читать далее
Все настройки разберём. А сейчас скопируйте пока предложенный ниже код целиком
<style>
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 820px; }
.bp_item_summary {text-align:justify;}
</style>
<br />
<div id="bp_recent">
</div>
<script>
//<![CDATA[
var postTitleOriginal, myLink, myDiv, myImage,mySeparator;
var main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
var entry = json.feed.entry[i];
var postTitle = entry.title.$t;
postTitleOriginal = postTitle;
if (isNaN(titleLength) || titleLength == 0) {
postTitle = '';
}
else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
var postUrl="";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commentText = entry.link[k].title;
var commentUrl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}
if (showThumbs == true) {
var thumbUrl = "";
try {
thumbUrl = entry.media$thumbnail.url;
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
} catch (error) {
if ("content" in entry) s = entry.content.$t; else s="";
if (thumbUrl == "" && mediaThumbsOnly == false) {
regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
videoIds = s.match(regex);
if (videoIds != null) {
videoId = videoIds[4];
}
if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
}
if (thumbUrl == "" && mediaThumbsOnly == false) {
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;
}
}
if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
if (thumbUrl == "" && showNoImage == true)
{
thumbUrl = "https://lh5.googleusercontent.com/-Qwbi5xozsS8/T6pkMpQ4ZmI/AAAAAAAAYEo/kpwCFEWIKR8/s72/noimage.png";
try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
}
}
if (showPostDate == true) {
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "январь";
monthnames[2] = "февраль";
monthnames[3] = "март";
monthnames[4] = "апрель";
monthnames[5] = "май";
monthnames[6] = "июнь";
monthnames[7] = "июль";
monthnames[8] = "август";
monthnames[9] = "сентябрь";
monthnames[10] = "октябрь";
monthnames[11] = "ноябрь";
monthnames[12] = "декабрь";
}
code = "";
main = document.getElementById('bp_recent');
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_title");
myLink = createLink(postUrl,"_top",postTitleOriginal)
if(main.innerHTML!=""){
mySeparator = createDiv("bp_recent_separator");
main.appendChild(mySeparator)
}
if(postTitle != ''){myDiv.appendChild(myLink);}
main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;
if (showThumbs == true && thumbUrl != "") {
myImage = document.createElement('img');
myImage.setAttribute("src", thumbUrl);
if(imgFloat!="none")
{
float_clear=true;
myImage.style.cssFloat=imgFloat;
myImage.style.styleFloat=imgFloat;
}
try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
myImage.setAttribute("alt", postTitleOriginal);
myImage.setAttribute("width", imgDim);
myImage.setAttribute("height", imgDim);
myLink = document.createElement('a');
myLink.setAttribute("href", postUrl+"");
myLink.setAttribute("target", "_top");
myLink.setAttribute("title", postTitleOriginal);
myLink.appendChild(myImage);
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_thumb");
myDiv.appendChild(myLink);
main.appendChild(myDiv);
}
try {
if ("content" in entry) {
var postContent = entry.content.$t;
}
else if ("summary" in entry) {
var postContent = entry.summary.$t;
}
else var postContent = "";
var re = /<\S[^>]*>/g;
postContent = postContent.replace(re, "");
if (showSummary == true) {
myDiv = createDiv("bp_item_summary");
if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
else {
postContent = postContent.substring(0, summaryLength);
var quoteEnd = postContent.lastIndexOf(" ");
postContent = postContent.substring(0, quoteEnd);
myDiv.appendChild(document.createTextNode(postContent + '...'));
}
main.appendChild(myDiv);
}
} //end try
catch (error) {}
myDiv = createDiv("bp_item_meta");
myDiv.style.clear="both";
myDiv.style.marginBottom="4px";
if (showPostDate == true) {
myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
flag = 1;
}
if (showCommentCount == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
if (commentText == '1 Comments') commentText = '1 Comment';
if (commentText == '0 Comments') commentText = 'No Comments';
var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML=commentText;
flag = 1;;
}
if (showReadMore == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
var myLink = createLink(postUrl,"_top",postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML = readMore+" »";
flag = 1;;
}
if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent_link").style.backgroundImage="url('http://3.bp.blogspot.com/-H8WPIh3wjr4/TmHnuo9tnnI/AAAAAAAACDE/_yuVqfb1HAk/blogger-widgets.png')";
document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+""+"#comment-form";myLink.setAttribute("href", href);}
else myLink.setAttribute("href", href+"");
myLink.setAttribute("target", target);
myLink.setAttribute("title", title);
return myLink;
}
//]]>
</script>
<script>
var numberOfPosts = 20;
var showPostDate = true;
var showSummary = true;
var summaryLength = 400;
var titleLength = 140;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'далее';
</script>
<script src="https://poluhka.blogspot.com/feeds/posts/summary?max-results=18&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails"></script>
#sidebar-left-1, #sidebar-right-1, #sidebar-right-2-1, sidebar-right-2-2 {
display: none;
visibility: hidden;
}
#main {
width: 820px; }
.bp_item_summary {text-align:justify;}
</style>
<br />
<div id="bp_recent">
</div>
<script>
//<![CDATA[
var postTitleOriginal, myLink, myDiv, myImage,mySeparator;
var main;
var float_clear=false;
var flag = 0;
function bprecentpostswiththumbnails(json) {
for (var i = 0; i < numberOfPosts; i++) {
if (i == json.feed.entry.length) break;
var s;
var entry = json.feed.entry[i];
var postTitle = entry.title.$t;
postTitleOriginal = postTitle;
if (isNaN(titleLength) || titleLength == 0) {
postTitle = '';
}
else if (postTitle.length > titleLength) postTitle = postTitle.substring(0, titleLength) + "...";
var postUrl="";
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
var commentText = entry.link[k].title;
var commentUrl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postUrl = entry.link[k].href;
break;
}
}
if (showThumbs == true) {
var thumbUrl = "";
try {
thumbUrl = entry.media$thumbnail.url;
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
} catch (error) {
if ("content" in entry) s = entry.content.$t; else s="";
if (thumbUrl == "" && mediaThumbsOnly == false) {
regex = /http\:\/\/www\.youtube(-nocookie){0,1}\.com\/(v){0,1}(embed){0,1}\/(([^"&?' ]*))/;
videoIds = s.match(regex);
if (videoIds != null) {
videoId = videoIds[4];
}
if (videoIds != null && videoId != null) thumbUrl = "http://img.youtube.com/vi/" + videoId + "/2.jpg"
}
if (thumbUrl == "" && mediaThumbsOnly == false) {
a = s.indexOf("<img");
b = s.indexOf("src=\"", a);
c = s.indexOf("\"", b + 5);
d = s.substr(b + 5, c - b - 5);
if ((a != -1) && (b != -1) && (c != -1) && (d != "")) thumbUrl = d;
}
}
if(thumbUrl.indexOf("static.flickr.com")!=-1) {thumbUrl= thumbUrl.replace("_b_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m_t.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_s_t.jpg","_s.jpg");
thumbUrl= thumbUrl.replace("_b.jpg","_s.jpg");thumbUrl= thumbUrl.replace("_m.jpg","_s.jpg");}
if (thumbUrl == "" && showNoImage == true)
{
thumbUrl = "https://lh5.googleusercontent.com/-Qwbi5xozsS8/T6pkMpQ4ZmI/AAAAAAAAYEo/kpwCFEWIKR8/s72/noimage.png";
try{if(defaultImage!="") thumbUrl=defaultImage;}catch(error){}
thumbUrl = thumbUrl.replace("/s72-c/","/s"+imgDim+"-c/");
}
}
if (showPostDate == true) {
var postdate = entry.published.$t;
var cdyear = postdate.substring(0, 4);
var cdmonth = postdate.substring(5, 7);
var cdday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "январь";
monthnames[2] = "февраль";
monthnames[3] = "март";
monthnames[4] = "апрель";
monthnames[5] = "май";
monthnames[6] = "июнь";
monthnames[7] = "июль";
monthnames[8] = "август";
monthnames[9] = "сентябрь";
monthnames[10] = "октябрь";
monthnames[11] = "ноябрь";
monthnames[12] = "декабрь";
}
code = "";
main = document.getElementById('bp_recent');
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_title");
myLink = createLink(postUrl,"_top",postTitleOriginal)
if(main.innerHTML!=""){
mySeparator = createDiv("bp_recent_separator");
main.appendChild(mySeparator)
}
if(postTitle != ''){myDiv.appendChild(myLink);}
main.appendChild(myDiv);if(postTitle != '')myLink.innerHTML = postTitle;
if (showThumbs == true && thumbUrl != "") {
myImage = document.createElement('img');
myImage.setAttribute("src", thumbUrl);
if(imgFloat!="none")
{
float_clear=true;
myImage.style.cssFloat=imgFloat;
myImage.style.styleFloat=imgFloat;
}
try{if(myMargin!=0)myImage.style.margin = myMargin+"px";} catch(error){}
myImage.setAttribute("alt", postTitleOriginal);
myImage.setAttribute("width", imgDim);
myImage.setAttribute("height", imgDim);
myLink = document.createElement('a');
myLink.setAttribute("href", postUrl+"");
myLink.setAttribute("target", "_top");
myLink.setAttribute("title", postTitleOriginal);
myLink.appendChild(myImage);
myDiv = document.createElement('div');
myDiv.setAttribute("class", "bp_item_thumb");
myDiv.appendChild(myLink);
main.appendChild(myDiv);
}
try {
if ("content" in entry) {
var postContent = entry.content.$t;
}
else if ("summary" in entry) {
var postContent = entry.summary.$t;
}
else var postContent = "";
var re = /<\S[^>]*>/g;
postContent = postContent.replace(re, "");
if (showSummary == true) {
myDiv = createDiv("bp_item_summary");
if (postContent.length < summaryLength) {myDiv.appendChild(document.createTextNode(postContent));}
else {
postContent = postContent.substring(0, summaryLength);
var quoteEnd = postContent.lastIndexOf(" ");
postContent = postContent.substring(0, quoteEnd);
myDiv.appendChild(document.createTextNode(postContent + '...'));
}
main.appendChild(myDiv);
}
} //end try
catch (error) {}
myDiv = createDiv("bp_item_meta");
myDiv.style.clear="both";
myDiv.style.marginBottom="4px";
if (showPostDate == true) {
myDiv.appendChild(document.createTextNode(monthnames[parseInt(cdmonth, 10)] + '-' + cdday + '-' + cdyear));
flag = 1;
}
if (showCommentCount == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
if (commentText == '1 Comments') commentText = '1 Comment';
if (commentText == '0 Comments') commentText = 'No Comments';
var myLink = createLink(commentUrl,"_top",commentText + " on " + postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML=commentText;
flag = 1;;
}
if (showReadMore == true) {
if (flag == 1) {
myDiv.appendChild(document.createTextNode(" | "));
}
var myLink = createLink(postUrl,"_top",postTitleOriginal)
myDiv.appendChild(myLink);
myLink.innerHTML = readMore+" »";
flag = 1;;
}
if (flag == 1) main.appendChild(myDiv);
}
if(float_clear==true && imgFloat!="none")
{
myDiv = createDiv("bp_clear_float");
myDiv.style.clear=imgFloat;
main.appendChild(myDiv);
}
document.getElementById("bp_recent_link").style.backgroundImage="url('http://3.bp.blogspot.com/-H8WPIh3wjr4/TmHnuo9tnnI/AAAAAAAACDE/_yuVqfb1HAk/blogger-widgets.png')";
document.getElementById("bp_recent_link").style.backgroundRepeat="no-repeat";
try{
if(myMargin!=0 && imgFloat=="left" && flag==0) document.getElementById("bp_recent_link").style.marginLeft = myMargin+"px";
} catch(error){}
}
function createDiv(className)
{
var myDiv = document.createElement('div');
myDiv.setAttribute("class", className);
return myDiv;
}
function createLink(href,target,title)
{
var myLink = document.createElement('a');
if(href.substring(href.length-13,href.length)=="#comment-form") {href= href.substring(0,href.length-13)+""+"#comment-form";myLink.setAttribute("href", href);}
else myLink.setAttribute("href", href+"");
myLink.setAttribute("target", target);
myLink.setAttribute("title", title);
return myLink;
}
//]]>
</script>
<script>
var numberOfPosts = 20;
var showPostDate = true;
var showSummary = true;
var summaryLength = 400;
var titleLength = 140;
var showCommentCount = true;
var showThumbs = true;
var showNoImage = false;
var imgDim = 100;
var imgFloat = 'left';
var myMargin = 5;
var mediaThumbsOnly = true;
var showReadMore = true;
var readMore = 'далее';
</script>
<script src="https://poluhka.blogspot.com/feeds/posts/summary?max-results=18&orderby=published&alt=json-in-script&callback=bprecentpostswiththumbnails"></script>
Настройки элементарные и совсем не сложные.
width: 820px; } меняйте по желанию саму ширину фрагментов
var numberOfPosts = 20; количество отображаемых последних сообщений
вместо моего https://poluhka.blogspot.com/ вставьте адрес вашего блога.
Сейчас идём в админ - панель, выбираем опцию страницы и создаём новую страницу. Перейдя сразу в режим HTML, вставляем готовый код и, не используя функцию просмотра, сразу публикуем. Сейчас просмотрите страницу и увидите, что последние статьи отображены, соответственно настройкам.
У меня уже набралось масса вариантов отображения последних статей блога. Если вы заинтересованы посмотрите их в меню ВСЕ СТАТЬИ под ярлыком ГАДЖЕТЫ.
Всем добра, настроения. Увидимся.
хотите оформить подписку на новые шпаргалки
Очень интересно, если последние статьи будут находится не на сайдбаре, а на странице блога. Спасибо, Виктория!
ОтветитьУдалитьДа, Ирина, согласна с тобой.
ОтветитьУдалитьДа, Вика, вот рекламы наберу на весь сайдбар)))), тогда точно пригодится, и опять же хорошая идея, когда вкладок-страничек мало, можно и такую добавить, чтобы дольше и больше бродилось по сайту).
ОтветитьУдалитьЛера,у меня вон адсенс совсем сбрендил. Тычет её(рекламу) куда надо, и не надо. Экспериментирую его новшества. А ещё так на странице выводить лучше - в сайтмап они не включены и не будет переспама.
УдалитьОй, я пока только начинаю рекламой интересоваться. Еще надо разбираться и разбираться...С адсенсе вообще ничего не поняла, в задумке партнерки.
УдалитьПопробуем! Спасибо, Вика!
ОтветитьУдалитьвИК, У МЕНЯ СТРАНИЦЫ СКРЫТЫ, но по ссылке последние публикации не высветились. Не знаю в чем дело. Страницу опубликовала, потом скрыла. Может быть в адресе нужен com на конце? Или у меня слишком давно были опубликованы последние статьи? Какой временный промежуток нужен для постов, чтобы они появились на этой новой странице "Посл. публикации"? Сейчас попробую новый пост опубликовать и проверю.
ОтветитьУдалитьИрина, в смысле, скрыты. Это же не страницы, а статьи последние. Не важно когда были опубликованы. Формируется это через фид канал.Так у тебя адрес и так https://bibliomir83.blogspot.com/
ОтветитьУдалитьнет, Вик! Что - то не так. Не виден и новый пост. Может быть надо всё же не скрывать эту страницу?
ОтветитьУдалитьИрина, я не могу понять что значит скрыть страницу. как ты её скрываешь. Если она уже опубликована.
ОтветитьУдалитьа я вписала https://bibliomir83.blogspot.ru/ Стало видно, но текст в форме символов. Сейчас переделаю адрес.Посмотрю.Может быть дело в этом!
ОтветитьУдалитьНет, появляется в форме символов. вот ссылка- посмотри как это у меня https://bibliomir83.blogspot.com/p/blog-page_13.html
ОтветитьУдалитьИрина, ты вот этот момент учитываешь - "идём в админ - панель, выбираем опцию страницы и создаём новую страницу. Перейдя сразу в режим HTML, вставляем готовый код и, не используя функцию просмотра, сразу публикуем". Вставить готовый код в режиме HTML и не нужно не просматривать, не переходить в обычный режим. Вставила - публикация.
ОтветитьУдалитьТак и сделала, но..увы
ОтветитьУдалитьДа, у меня на тестовом с твоим адресом такая же фигня. У тебя я вообще страниц не вижу. Ирина, я уже который раз спрашиваю и не пойму, что значит скрыть страницу.
ОтветитьУдалитьНУ Я УБРАЛА СТРАНИЦУ С БЛОГА( СКРЫЛА ИХ) НУ КАК СКАЗАТЬ... КАРМАШКИ, ( НАЗВАНИЯ СТРАНИЦ) ВВЕРХУ, ПОСЛЕ ЗАГОЛОВКА СКРЫЛА.я ИХ ПЕРЕНЕСЛА В ТВОЮ МЕНЮШКУ КНИЖКУ, А ПОД ЗАГОЛОВКОМ СКРЫЛА.
ОтветитьУдалитьЯ уже и так , и сяк..- та же фигня. Видимо где - то конфликт какой - то
ОтветитьУдалитьЕсли вставляю адрес с com, то видно, но вместо текста - коды, но картинка есть, Если вставляю https://bibliomir83.blogspot.ru/ - то вообще тишина
ОтветитьУдалитьОтветила на почту уже тебе. виджет кнопки твоих uptolike.js мешает.
УдалитьСпасибо Вика! Значит на этот раз - не судьба!:)
ОтветитьУдалитьДа, Ирина. Врт он где его JS https:' == w.location.protocol ? 'https' : 'http') + '://w.uptolike.com/widgets/v1/uptolike.js'; вылез. Посмотри здесь https://domikdom.blogspot.com/p/blog-page_97.html потом уберу.
ОтветитьУдалитьну да та же фигня. Спасибо, Вика! буду ждать других красот от тебя! С этой красотой - не судьба!
ОтветитьУдалитьЯ даже не думала о такой возможности, но прочитала с большим интересом. Спасибо за полезности )))
ОтветитьУдалитьИз блога Блоггер можно вообще полноценный сай сделать.
ОтветитьУдалить