Виджет последних постов Blogger

Доброго времени суток, друзья. Очередной виджет последние сообщения для блога. У меня уже достаточно много сообщений на эту тему и вот пополню её очередной шпаргалкой. Если вы пропустили некоторые варианты гаджета самых новых статей, то можно посмотреть здесь и ещё 2 в этом сообщении.

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

Посмотрите как выглядит этот гаджет на тестовом блоге.

Демонстрация

Код виджета устанавливается в гаджет HTML/JavaScript. Единственное, что вы можете поменять количество выводимых сообщений (4). А в коде CSS, который я выделила другим цветом, меняйте все стили, как хотите. Кому в этом потребуется помощь, пишите в комментариях.

<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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBnD4Vpjxt9AvxzaOXAqkc202M_a_Zmie-J5k-_yvVuzarXrMykWsHiC7RCwKSnNLosEsztFuArMJZR-jCq6zw9Waz0k2piBlKYlIFSgcZXWJ5jVqs9GQAVrvGKbBjYPe3FyqKDTxRzzOr/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">Подробнее</a>'; flag = 1;; } document.write(posts_details); document.write('</div> '); document.write('</li> '); } document.write('</ul> '); }</script> <script> var posts_no = 4; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; var posts_date = false; </script> <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestpostswiththumbs"></script>
<link href="http://fonts.googleapis.com/css?family=Oswald" rel="stylesheet" type="text/css" />

 <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: 100%;} .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 #8B3A3A; 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>

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

Спасибо всем за внимание и до встречи. Лето пришло. ЖАРКО....

Здесь вы можете оформить подписку на новые шпаргалки

Введите Ваш email