Вначале идем в дизайн - добавить гаджет - HTML\Javascript и туда вставляем следующий код:
<div id="recentpostsae">
</div>
<div id="recentpostnavfeed">
</div>
<style scoped="" type="text/css">
*{padding:0;margin:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-box-sizing:border-box}
a,a:link,a:visited{text-decoration:none;transition:all .3s}
button,input[type="button"],input[type="reset"],input[type="submit"],.button{border:0;color:#fff;cursor:pointer;font-size:14px;font-weight:400;padding:12px 16px;white-space:normal;width:auto;border-radius:3px;outline:0}button:focus,button:hover,input[type="button"]:focus,input[type="button"]:hover,input[type="reset"]:focus,input[type="reset"]:hover,input[type="submit"]:focus,input[type="submit"]:hover,.button:focus,.button:hover{color:#fff}
#recentpostnav{border:1px solid #585858;width:100%;margin:0 auto}
#recentpostsae{margin:0}
#recentpostsae .recentpostel{width:100%;background:#fff;display:inline-block;margin:0 20px 10px 0;padding:15px;overflow:hidden;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostsae .recentpostel:nth-child(even){margin:0 0 10px 0}
#recentpostsae .recentpostel img{background:#ecf0f1;padding:0;float:left;margin:0;margin-right:13px;width:72px}
#recentpostsae .recentpostel h6,.recentpostel h6 a{text-decoration:none;font-size:14px;font-weight:400;margin:0;color:#000}
#recentpostsae .recentpostel:hover{background-color:#fefefe}
#recentpostsae .recentpostel p{font-size:12px;text-align:left;color:#555;line-height:normal;margin:5px 0}
#recentpostload{letter-spacing:-10px;text-align:center;background:transparent url(https://2.bp.blogspot.com/-GeeSB564W-o/Wum3zpg8qNI/AAAAAAAAGmM/aRoomVJFtSQfUoAJrRjD6h1wTSU8J8DUQCLcBGAs/s1600/ellipsis-preloader.gif) no-repeat 50% 50%;height:470px}
#recentpostnavfeed{display:table;padding:5px 10px 5px 0;text-align:left;margin:15px auto}
#recentpostnavfeed a{color:#141414;font-size:12px;font-weight:400;display:block;padding:5px 10px}
#recentpostnavfeed span{padding:0;cursor:pointer;transition:all .3s}
#recentpostnavfeed .next,#recentpostnavfeed .previous{position:relative;overflow:hidden;display:inline-block;background:#fff;color:#222;padding:10px 16px;font-size:1rem;border-radius:99em;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed .next{float:right;margin:0 0 0 10px}
#recentpostnavfeed .previous{float:left;margin:0 10px 0 0}
#recentpostnavfeed .home{text-align:center;display:table;background:#fff;color:#222;font-size:1rem;float:none;padding:10px 16px;border-radius:99em;margin:auto;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1)}
#recentpostnavfeed a:hover,#recentpostnavfeed span.noactived{color:#ccc}
#recentpostnavfeed i{font-family:fontawesome;font-style:normal}
#recentpostnavfeed .next:hover,#recentpostnavfeed .previous:hover,#recentpostnavfeed .home:hover{background:#fff;color:#222;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
@media screen and (max-width:993px){#recentpostsae .recentpostel{width:100%;margin:0 0 10px 0}}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://dan-blog127.blogspot.com/";
var charac = 80;
var urlprevious, urlnext;
function arlinafeed(e,t){for(var n=e.split("<"),r=0;r<n.length;r++)-1!=n[r].indexOf(">")&&(n[r]=n[r].substring(n[r].indexOf(">")+1,n[r].length));return n=n.join(""),n=n.substring(0,t-1)}function showrecentpostsae(e){var t,n,r,a,i,s="";urlprevious="",urlnext="";for(var l=0;l<e.feed.link.length;l++)"previous"==e.feed.link[l].rel&&(urlprevious=e.feed.link[l].href),"next"==e.feed.link[l].rel&&(urlnext=e.feed.link[l].href);for(var d=0;d<numfeed&&d!=e.feed.entry.length;d++){t=e.feed.entry[d],n=t.title.$t;for(var l=0;l<t.link.length;l++)if("alternate"==t.link[l].rel){r=t.link[l].href;break}i="content"in t?t.content.$t:"summary"in t?t.summary.$t:"",a="media$thumbnail"in t?t.media$thumbnail.url:"https://3.bp.blogspot.com/-BHuXHny1kOk/VXrkSyxKCjI/AAAAAAAACas/pZLJAEUDtds/s1600/no-image.png",s+="<div class='recentpostel'>",s+="<a href='"+r+"'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"</p>",s+="</div>"}document.getElementById("recentpostsae").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'><i class='fas fa-arrow-left'></i></a>":"<span class='noactived previous'><i class='fas fa-arrow-left'></i></span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'><i class='fas fa-arrow-right'></i></a>":"<span class='noactived next'><i class='fas fa-arrow-right'></i></span>",s+="<a href='javascript:navigasifeed(0);' class='home'><i class='fas fa-home'></i></a>",document.getElementById("recentpostnavfeed").innerHTML=s}function navigasifeed(e){var t,n;-1==e?(t=urlprevious.indexOf("?"),n=urlprevious.substring(t)):1==e?(t=urlnext.indexOf("?"),n=urlnext.substring(t)):n="?start-index=1&max-results="+numfeed+"&orderby=published&alt=json-in-script",n+="&callback=showrecentpostsae",incluirscript(n)}function incluirscript(e){1==startfeed&&removerscript(),document.getElementById("recentpostsae").innerHTML="<div id='recentpostload'></div>",document.getElementById("recentpostnavfeed").innerHTML="";var t=urlblog+"/feeds/posts/default/-/Главное"+e,n=document.createElement("script");n.setAttribute("type","text/javascript"),n.setAttribute("src",t),n.setAttribute("id","arlinalabel"),document.getElementsByTagName("head")[0].appendChild(n),startfeed=1}function removerscript(){var e=document.getElementById("arlinalabel"),t=e.parentNode;t.removeChild(e)}onload=function(){navigasifeed(0)};
//]]>
</script>Разберем код:
| Значение | Информация |
|---|---|
| var numfeed | 5 (количество отображаемых публикаций) |
| var urlblog | https://dan-blog127.blogspot.com/ (смените на ссылку своего блога) |
| var charac | 80 количество символов в описании публикации |
/-/Главное
| Замените главное на назание своего ярлыка или удалите его вместе со слешами и тире |
Если виджет не срабатывает перейдите в раздел Тема - Изменить HTML и перед закрывающим тегом </head> вставьте код:
<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
Сохраните Тему.
Blogger: виджет новых сообщений 2017.
Описание виджета: Выводит более 5 сообщений, Комментарии, Читать дальше, Миниатюры, Не содержит внешних скриптов.
Виджет новых сообщений: играет не мало важную роль при продвижении сайта в поисковых системах. В основном благодаря данному виджету можно значительно уменьшить показатель отказа и соответственно увеличить поведенческий фактор.
Смотреть демо.
Как установить в блог
1.) В панели управления перейдите в раздел Дизайн
3). В появившемся окне вставьте код:
<script> function showlatestpostswiththumbs(json) {
document.write('<ul class="recent-posts-container">');
for (var i = 0; i < posts_no; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var postsurl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' &&
entry.link[k].type == 'text/html') {
var commentstext = entry.link[k].title;
var commentsurl = entry.link[k].href;
}
if (entry.link[k].rel == 'alternate') {
postsurl = entry.link[k].href;
break;
}
}
var recenthumb;
try {
recenthumb = entry.media$thumbnail.url;
} catch (error) {
s = entry.content.$t;
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 != "")) {
recenthumb = d;
} else recenthumb =
'http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/s1600/no-thumb.png';
}
var postdate = entry.published.$t;
var showyear = postdate.substring(0, 4);
var showmonth = postdate.substring(5, 7);
var showday = postdate.substring(8, 10);
var monthnames = new Array();
monthnames[1] = "Jan";
monthnames[2] = "Feb";
monthnames[3] = "Mar";
monthnames[4] = "Apr";
monthnames[5] = "May";
monthnames[6] = "Jun";
monthnames[7] = "Jul";
monthnames[8] = "Aug";
monthnames[9] = "Sep";
monthnames[10] = "Oct";
monthnames[11] = "Nov";
monthnames[12] = "Dec";
document.write('<li class="recent-posts-list">');
if (posts_date == true) document.write('<div
class="post-date">
' + monthnames[parseInt(showmonth, 10)] + ' ' + showday + ' ' + showyear
+ '</div>
');
if (showpoststhumbs == true)
document.write('<a href="' + postsurl + '"><img
class="recent-post-thumb" src="' + recenthumb + '"/></a>');
document.write('<div class="recent-post-title">
<a href="' + postsurl + '" target ="_top">' + posttitle +
'</a></div>
');
var posts_details = '';
var flag = 0;
document.write('<div class="recent-posts-details">
');
if (showcommentslink == true) {
if (flag == 1) {
posts_details = posts_details + ' <br> ';
}
if (commentstext == '1 Comments') commentstext = '1
Comment';
if (commentstext == '0 Comments') commentstext = 'No
Comments';
commentstext = '<a href="' + commentsurl + '" target
="_top">' + commentstext + '</a>';
posts_details = posts_details + commentstext;
flag = 1;;
}
if (readmorelink == true) {
if (flag == 1) posts_details = posts_details + ' | ';
posts_details = posts_details + '<a class="readmorelink"
href="' + postsurl + '" class="url" target ="_top">Read
more</a>';
flag = 1;;
}
document.write(posts_details);
document.write('</div>
');
document.write('</li>
');
}
document.write('</ul>
');
}</script>
<script>
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = false;
</script>
<script
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your
browser does not support JavaScript!</noscript>
<link href="http://fonts.googleapis.com/css?family=Oswald"
rel="stylesheet" type="text/css"></link>
<style type="text/css">
img.recent-post-thumb {padding: 2px;
width:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border:
1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: 'Oswald', sans-serif; float:
left;width: 100%;min-height: 70px;margin: 20px 0px 5px 0px;padding:
0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px;
list-style-type: none; margin: 0px 10px 5px 5px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type:
none;}
ul.recent-posts-container li:before {content:
counter(countposts,decimal);counter-increment: countposts;z-index:
2;position:absolute; left: 20px; font-size: 16px;color:
#fff;background: rgba(0,0,0,0.4);padding: 9px 14px;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #f74f4f!important;}
.post-date {color:#989c9c; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color:
#111!important;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px dashed #fd8c9e; margin-top: 5px;
padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
img.recent-post-thumb { padding: 2px 0px; width: 65px;
height: 65px; float: left; margin: -14px 10px 0px 0px;
border-radius: 10%; border:none!important}
</style>
4.) Сохраните виджет.