Гаджеты Последние сообщения Blogspot

Продолжаю статью о гаджете Последних сообщений. Для чего нужен этот виджет?

Во-первых, он автоматически показывает читателю новые статьи сайта.

Во-вторых — украшает блог.

Устанавливаются все виджеты легко, в шаблоне блога ничего менять не потребуется. Заходим в Дизайн — Добавить гаджет - HTML / JavaScript. Вставляем код в окно, можно по желанию написать название гаджета — Последние сообщения или что-то другое, к примеру — Читай новости. Нажимаем Сохранить.

Виджет 1

Простенький, но со вкусом.

<div class="recentpostarea"><style type="text/css">.recentpostarea {list-style-type: none;counter-reset: countposts;}.recentpostarea a {text-decoration: none; color: #49A8D1;}.recentpostarea a:hover {color: #000;}.recentpostarea li:before {background: #879539;float: left;counter-increment: countposts;content: counter(countposts,decimal);z-index: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff; padding: 0px 10px; margin: 15px 5px 0px -6px; border-radius: 100%;}li.r-p-title { padding: 5px 0px;}.r-p-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}.r-p-title a {text-decoration: none;color: #444;font-weight: bold;font-size: 13px; padding: 2px;}.recent-post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;}.r-p-summ { border-left: 1px solid #879539; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;}</style><script type = "text/JavaScript">function showrecentposts(json) {for (var i = 0; i < posts_number; i++) { var entry = json.feed.entry[i];var posttitle = entry.title.$t;var posturl;if (i == json.feed.entry.length) break; for (var k = 0; k < entry.link.length; k++) {if (entry.link[k].rel == 'alternate') {posturl = entry.link[k].href;break;}} posttitle = posttitle.link(posturl);var readmorelink = "... Продолжение";readmorelink = readmorelink.link(posturl); 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"; 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, ""); document.write('<li class="r-p-title">');document.write(posttitle);document.write('</li><div class="r-p-summ">');if (post_summary == true) {if (postcontent.length < summary_chars) {document.write(postcontent);} else { postcontent = postcontent.substring(0, summary_chars);var quoteEnd = postcontent.lastIndexOf(" ");postcontent = postcontent.substring(0,quoteEnd);document.write(postcontent + ' ' + readmorelink);}} document.write('</div>'); if (posts_date == true) document.write('<div class="recent-post-date">' + monthnames[parseInt(showmonth,10)] + ' ' + showday + ' ' + showyear + '</div>'); }} </script> <script> var posts_number = 5; var posts_date = true; var post_summary = true; var summary_chars = 80; </script> <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script> <noscript>Your browser does not support JavaScript!</noscript></div>

Поменять можно:

Цвет овалов с цифрами и линия в коде выделены синим.

Красным выделила сколько будет анонсов статей в гаджете, меняйте на большее или меньшее значение.

Голубой в коде — меняйте шрифты.

Размер шрифта выделила оранжевым.

Кроме этого можно поменять цвет текста, сменить названия месяцев на русский язык, изменить слово Продолжение на своё и многое другое.

Виджет 2

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

В коде можно многое поменять под дизайн своего блога.

Код:

<style type='text/css'>
#mas-terbaru{border:1px solid #879539;width:100%;margin:0 auto}
#terbaru{margin:0px}
.mas-elemen{border:1px solid #ccc;margin:5px 0;padding:5px;height:79px}
.mas-elemen img{background:#999;padding:4px;float:left;height:70px;margin-right:8px;width:70px}
.mas-elemen h6,.mas-elemen h6 a{font-size:12px!important;font-weight:700!important;margin:0;color:#111}
.mas-elemen:hover{background-color:#c3c3c3}
.mas-elemen p{font:14px PT Sans Narrow;text-align:justify;color:#555;line-height:14px;margin:5px 0}
#mas-loading{color:#888;font-family:Tahoma;font-size:100px;letter-spacing:-10px;text-align:center;text-shadow:-5px 0 1px #444;background:#141414 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXnjDuqeLbYUgHHTTlr_GAUC5k4RmDDgMRLjwd93uWf-RIlqMAlUwtOeW709i_Rm8fMOUNPuyRBh71x4AFpng0umpVyu-flN8rCVMQX9w8fvh7F89hySVEf2esKATY4vtZnNYigIgGhrY2/s0/ezgif-4-08678157c72f.gif) no-repeat 50% 50%;height:470px;border:1px solid #c3c3c3}
#mas-navigasifeed{border:1px solid #c3c3c3;color:#bbb;font-family:Verdana;font-size:12px;text-align:center;margin:0px}
#mas-navigasifeed:hover{background-color:#c3c3c3}
#mas-navigasifeed a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#mas-navigasifeed span{padding:5px 10px}
#mas-navigasifeed .next{float:right}
#mas-navigasifeed .previous{float:left}
#mas-navigasifeed .home{text-align:center}
#mas-navigasifeed a:hover,#mas-navigasifeed span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
var numfeed = 5;
var startfeed = 0;
var urlblog = "https://nprocto.blogspot.com/";
var charac = 100;
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 showterbaru(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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiv3_yzBCWLPiDXHPOfuRMV7gD5UjQolI8rP7amhAUTch-33fwkdtGuMcbopLT-OYDyTTCQxPgtAWFV3A0MEG9x5rvW9pVQxAmLkcHlQOc7cqHsRHVn49AfRnq5AKrUwYhSB8notqs5uFc/s1600/no+image.jpg";
}
showblogfeed += "<div class='mas-elemen'>";
showblogfeed += "<a href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>";
showblogfeed += "<h6><a href='" + posturl + "'>" + posttitle + "</a></h6>";
showblogfeed += "<p>" + maskolisfeed(postcontent,charac) + "...</p>";
showblogfeed += "</div>";
}
document.getElementById("terbaru").innerHTML = showblogfeed;
showblogfeed = "";
if(urlprevious) {
showblogfeed += "<a href='javascript:navigasifeed(-1);' class='previous'>◄ Previous</a>";
} else {
showblogfeed += "<span class='noactived previous'>◄ Previous</span>";
}
if(urlnext) {
showblogfeed += "<a href='javascript:navigasifeed(1);' class='next'>Next ►</a>";
} else {
showblogfeed += "<span class='noactived next'>Next ►</span>";
}
showblogfeed += "<a href='javascript:navigasifeed(0);' class='home'>Home</a>";
document.getElementById("mas-navigasifeed").innerHTML = showblogfeed;
}
function navigasifeed(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=showterbaru";
incluirscript(parameter);
}
function incluirscript(parameter) {
if(startfeed==1) {removerscript();}
document.getElementById("terbaru").innerHTML = "<div id='mas-loading'></div>";
document.getElementById("mas-navigasifeed").innerHTML = "";
var archievefeed = urlblog + "/feeds/posts/default"+ parameter;
var terbaru = document.createElement('script');
terbaru.setAttribute('type', 'text/javascript');
terbaru.setAttribute('src', archievefeed);
terbaru.setAttribute('id', 'MASLABEL');
document.getElementsByTagName('head')[0].appendChild(terbaru);
startfeed = 1;
}
function removerscript() {
var elemen = document.getElementById("MASLABEL");
var parent = elemen.parentNode;
parent.removeChild(elemen);
}
onload=function() { navigasifeed(0); }
//]]>
</script>
<div id="terbaru"></div>
<div id="mas-navigasifeed"></div>

Меняем url блога на адрес своего блога — выделила в коде красным.

Жёлтым выделила количество символов в описании статьи.

Голубым - количество сообщений.

Оранжевым выделила слова Previous, Next, Home, их можно заменить на русский текст, например: Вперёд, Назад, Главная. Первые два слова заменить в коде дважды.

Розовым выделила ссылку на картинку Нет фото, можно установить любую свою.

Найти их можно в Яндекс.Картинках или на других ресурсах. Размер картинки 300х300 px.

Синим отметила в коде ссылку на картинку загрузки.

Поменяйте на свою. Размер ищите не большой. Найти картинку гифку можно здесь:

https://gifer.com/ru/gifs/loading
https://acegif.com/ru/gifki-zagruzki/

https://icons8.ru/icons/set/loading-gif

https://icons8.com/preloaders/ru

http://www.ajaxload.info/ - генератор

Уменьшить гиф-изображение можно на сайте https://ezgif.com/

Кроме этого, в коде можно менять цвет текста, цвет рамки, шрифт, размер шрифта и т.д.

От <style type='text/css'> до </style> меняйте на своё усмотрение оформление виджета.