Виджет Blogger Последние сообщения

Приветствую вас, дорогой читатель! Сегодня хочу предложить пользователям бесплатной платформы Blogger ещё пару виджетов: Последние сообщения/статьи. Виджет Blogger Последние сообщения отображает ваши новые опубликованные записи, он устанавливается на боковую панель блога при помощи не заменимого гаджета HTML/JavaScript. Код совмещён со стилями и поэтому, вам не нужно будет отдельно устанавливать стиль CSS в шаблон, вставили код виджета в поле гаджета HTML/JavaScript и всё. Ни каких лишних телодвижений, очень легко и просто, вам только нужно выбрать подходящий стиль последних записей и будет вам счастье. И так, смотрим.

Последние сообщения виджет для Blogger

Виджет Blogger Последние сообщения

Красивый виджет, с перелистыванием - кнопки Предыдущая - Главная - Следующая. Данный виджет можно установить при помощи этого кода:

<script type='text/javascript'> var numfeed = 4; var startfeed = 0; var urlblog = "######"; var charac = 50; var urlprevious, urlnext; function cyberghost(ghost, banget) { var showfeed = ghost.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 = "http://1.bp.blogspot.com/-eiX9aalicz8/VWEORfDN71I/AAAAAAAAHdg/vfHyEfYKBh0/s1600/no_image.gif"; } showblogfeed += "<div class='cg-elemen'>"; showblogfeed += "<a =href='" + posturl + "' target='_blank'><img src='" + postimg + "' /></a>"; showblogfeed += "<h6> <a href='" + posturl + "'>" + posttitle + "</a></h6> "; showblogfeed += "<p> " + cyberghost(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("cg-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='cg-loading'> </div> "; document.getElementById("cg-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> <style> /*Recent Post Navigation*/ a, a:visited { color: #555; outline: none; text-decoration: none; } a:hover, a:focus, a:visited:hover { color: #22a1c4; text-decoration: none; } .terbaru-container { background: #fff; width: 320px; margin: 20px auto; padding: 15px; border: 1px solid #ccc; } #cg-terbaru { border: 1px solid #585858; width: 100%; margin: 0 auto; } #terbaru { margin: 0px; } .cg-elemen { margin: 5px 0; padding: 5px; height: 79px; background: #FFF url("http://smruthycollege.com/images/shadow2.png") no-repeat scroll center bottom; overflow: hidden; padding-bottom: 20px; } .cg-elemen img { padding: 0; float: left; height: 70px; margin-right: 15px; width: 70px; } .cg-elemen h6, .cg-elemen h6 a { font-size: 14px!important; font-weight: 500; margin: 0; color: #222; font-family:'Oswald'; line-height: 18px; text-transform: uppercase; text-aligaln:'center'; } .cg-elemen p { font-size: 12px; font-family: 'Oswald'; text-align: left; color: #555; line-height: normal; margin: 5px 0; } #cg-loading { color: #888; font-family: inherit; font-size: 100px; letter-spacing: -10px; text-align: center; text-shadow: -5px 0 1px #444; background: #fff url(http://4.bp.blogspot.com/-jSUS8v5kwpQ/U8Z_6Ufr-PI/AAAAAAAAEYY/o4cQPKvt8vQ/s1600/loading.gif) no-repeat 50% 50%; height: 470px; } #cg-navigasifeed { color: #bbb; font-family: Oswald; font-size: 12px; text-align: center; margin: 0px; } #cg-navigasifeed a { color: #141414!important; font-family: inherit!important; font-size: 12px!important; font-weight: 400!important; display: block; padding: 5px 10px; } #cg-navigasifeed span { padding: 5px 10px; } #cg-navigasifeed .next { float: right; } #cg-navigasifeed .previous { float: left; } #cg-navigasifeed .home { text-align: center; } #cg-navigasifeed a:hover, #cg-navigasifeed span.noactived { color: transparant!important; } @media screen and (max-width:700px) { .terbaru-container, #terbaru, #cg-navigasifeed { width:auto; } } @media screen and (max-width:300px) { .cg-elemen img { display:none; } } Lanjut, Sekarang Tinggal Memasukan Javascriptnya. Cari </style> <div class="terbaru-container"> <div id="terbaru"> </div> <div id="cg-navigasifeed"> </div> </div>
Здесь, в коде в место решёток вставьте свой URL блога, установите количество вывода сообщений, текст (кнопок) поменяйте на русский, а между строк <style> и </style> вы можете изменить размер виджета, цветовые настройки и так далее. Следующий виджет можно установить над сообщениями, так как, он сделан в виде слайдера.

источник