Притурка Последни публикации за Blogger в три варианта

Здравейте, скъпи мои читатели. Притурката „Последни публикации“ са най-доброто решение за показване на всички наскоро публикувани материали на постоянните ни читатели. Обикновено добавяме тази притурка към страничната лента на нашия блог.

По подразбиране Blogger не поддържа тази притурка в панела с приспособления. Но ние можем много лесно да създаваме и използваме притурка „Последни публикации“ за Blogger.
С добавянето на притурка „Последни публикации“ за Blogger в нашия блог можем значително да подобрим привлекателността му. Читателите ще намерят всичките ни последни публикации чрез тази притурка. Тя ще увеличи шанса да получим повече кликвания от читателите. Това ще намали степента на отпадането им от блога ни. По този начин притурката ни помага да подобрим SEO на нашия блог и неговата използваемост. Затова трябва да добавим тази притурка към нашия блог и така да се опитаме да го направим по-атрактивен, благодарение на индивидуалния дизайн.
Знам, че не всеки блогър е уеб разработчик или дизайнер. Ето защо ще ви дам някои стилни кодове за Притурка „Последни публикации“, които можете да добавите чрез копиране и инсталиране в блога си. Така, че нека да започнем работа.

Притурка „Последни публикации“ с миниатюри

Това е красиво проектирана притурка за Последни публикации на Blogger. Тази притурка показва последните 5 публикации в блога ви с миниатюра. Заглавието и малък фрагмент от текста ще бъдат видими в притурката. Най-хубавото е, че хората могат да видят и предишни публикации чрез система за навигация в тази притурка.

Код

<style scoped='' type='text/css'>
/* Recent Post Widget */
#recentpostnav{width:100%;border:1px solid #585858;margin:0 auto}
#borpbox{margin:0}
.recentposarea{display:block;background:#fff;height:79px;border:1px solid #ddd;margin:5px 0;padding:10px}
.recentposarea img{float:left;background:#fff;border:1px solid #ddd;margin-right:8px;padding:4px;height:70px;width:70px}
.recentposarea h6,.recentposarea h6 a{text-decoration:none;margin:0;color:#111;font-size:13px!important;font-weight:700!important;}
.recentposarea:hover{background-color:#fefefe}
.recentposarea p{text-align:left;font-size:12px;margin:5px 0;color:#555;line-height:normal}
#loadrecentpost{font-family:Tahoma;color:#888;font-size:100px;letter-spacing:-10px;text-shadow:-5px 0 1px #444;text-align:center;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifNpMTAW0-jGl0tq6mJzU6MbStjz2shT8zNsDG2U_n71hTYjjKPAmNRtM3MJszLIAtKMcgoRyU03TRhNyS4WJAXBLbXXtB38ECplKGOYARgxYN69n5mJ8734uNJXF-_Vog57JDjTSNWtQp/s1600/loader.gif) 50% 50% no-repeat #fff;height:470px;border:1px solid #ddd}
#rpnavigation{color:#bbb;border:1px solid #ddd;font-family:Verdana;text-align:center;font-size:12px;margin:0}
#rpnavigation:hover{background-color:#fefefe}
#rpnavigation a{color:#141414!important;font-family:Tahoma!important;font-size:12px!important;font-weight:400!important;display:block;padding:5px 10px}
#rpnavigation span{padding:5px 10px}
#rpnavigation .next{float:right}
#rpnavigation .previous{float:left}
#rpnavigation .home{text-align:center}
#rpnavigation a:hover,#rpnavigation span.noactived{color:transparant!important}
</style>
<script type='text/javascript'>
//<![CDATA[
    var numfeed = 5;
    var startfeed = 0;
    var urlblog = "####";
    var charac = 40;
    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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCx5kF-i7Y0Z-rU3tFtXTGihiXYrEoVJfBNoto7PxHp_VhNuf-DJEGC0RaFZudNQrEZdAwBnn5nigj1EhzJEF6-BZR9rvE4ElSyqdymqyWZ3_9A9KJHku5H60jFiU-KyCzulEZcJKXiyGX/s1600/no-image.png",s+="<div class='recentposarea'>",s+="<a href='"+r+"' target='_blank'><img src='"+a+"' /></a>",s+="<h6><a href='"+r+"'>"+n+"</a></h6>",s+="<p>"+arlinafeed(i,charac)+"...</p>",s+="</div>"}document.getElementById("borpbox").innerHTML=s,s="",s+=urlprevious?"<a href='javascript:navigasifeed(-1);' class='previous'>Previous</a>":"<span class='noactived previous'>Previous</span>",s+=urlnext?"<a href='javascript:navigasifeed(1);' class='next'>Next</a>":"<span class='noactived next'>Next</span>",s+="<a href='javascript:navigasifeed(0);' class='home'>Home</a>",document.getElementById("rpnavigation").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("borpbox").innerHTML="<div id='loadrecentpost'></div>",document.getElementById("rpnavigation").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>
<div id="borpbox"></div>
<div id="rpnavigation"></div>

Настройки

Можете да промените:

➤В червено – брой на показваните публикации;

➤В синьо – URL на вашия блог;

Притурка "Последни публикации" в стил „Галерия“

Това е притурка в стил "Галерия" за Blogger. Конфигурацията на тази притурка е много проста. Можете да добавите тази притурка към страничната лента на блога си с няколко кликвания. Тази притурка ще покаже три миниатюрни изображения на последните публикации в три реда. Изображенията с миниатюри са красиво декорирани. Ефектът от слайд също е наличен в тази притурка.

Код

<style>
/* CSS Recent Post Gallery Widget */
.recent-grid {padding:0;clear:both;}
.recent-grid:after {content:"";clear:both;display:table;}
.recent-grid .galleryview{position:relative;display:inline-block;margin:6px 0;overflow:hidden;}
.recent-grid .galleryview a{text-decoration:none;float:left;position:relative;margin:0 6px}
.recent-grid .galleryview .ptitle{display:block;background:rgba(0,0,0,.7);clear:left;position:absolute;font-size:10px;line-height:1.3em;text-align:left;bottom:3px;left:3px;right:3px;top:3px;color:#fff;overflow:hidden;padding:5px;word-wrap:break-word;visibility:hidden;opacity:0;backface-visibility:hidden;transition:all .2s}
.recent-grid .galleryview:hover .ptitle{visibility:visible;opacity:1}
.recent-grid a img{background:#fdfdfd;float:left;padding:2px;border:1px solid #e3e3e3;transition:all .3s}
.recent-grid a:hover img {border-color:#bbb;}
</style>
<script type='text/javascript'>
//<![CDATA[
// Recent Post Gallery
function gallerygrid(a){for(var t=a.feed.entry||[],e=['<div class="recent-grid">'],i=0;i<t.length;++i){for(var l=t[i],r=l.title.$t,n=l.media$thumbnail?l.media$thumbnail.url:"http://2.bp.blogspot.com/-4fCf53FqYKM/Vccsy7apoZI/AAAAAAAAK4o/XJkv3RkC0pw/s1600/default%2Bimage.png",s=n.replace("s72-c","s"+recentpost_thumbs+"-c"),h=l.link||[],c=0;c<h.length&&"alternate"!=h[c].rel;++c);var d=h[c].href,m='<img src="'+s+'" width="'+recentpost_thumbs+'" height="'+recentpost_thumbs+'"/>',p=recentpost_title?'<span class="ptitle">'+r+"</span>":"",g='<a href="'+d+'" target="_blank" title="'+r+'">'+m+p+"</a>";e.push('<div class="galleryview">',g,"</div>")}e.push("</div>"),document.write(e.join(""))}
//]]>
</script>
<script>
var recentpost_thumbs = 72;
var recentpost_title = true;
</script>
<script src="/feeds/posts/summary?max-results=9&amp;alt=json-in-script&amp;callback=gallerygrid"></script>

Настройки

➤По желание променете:

max-results=9 - броят на показващите се миниатюри;

➤Други настройки не се налагат. Просто копирайте и инсталирайте в блога си.

Разноцветна притурка „Последни публикации“

Тази цветна притурка "Последни публикации" привлича посетителите. Те ще забележат всичките ви последни публикации 100 пъти по-добре, отколкото с всяка друга притурка.

➤Можете да покажете последните 3, 4 или 5 (по ваше желание) публикации чрез тази притурка;

➤Всяка публикация ще се показва с датата на публикуване и връзка към допълнителна информация;

➤Заглавието и малък фрагмент от текста ще бъдат показани със симпатично миниатюрно изображение;

Код

<style type="text/css">
img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}
ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #222;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #222;}
.recent-posts-details {padding: 5px 0px 5px; }
</style>
<script type="text/javascript">
function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,m=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Wi-cz7ljf62L6HKNSkSUWbH3n9RtHjtha86gQiiS9hzZZxjYfWQT6oZgy-FkCb6Qxd1h4fFoc0JcaN6o-n5z2d14xTUAxTaZZf4ht1N4P_YVclaHLbxkSp1g8tnXOj0Ix5Kk-owCFqr4/s1600/no-thumb.png"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),v=p.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="recent-posts-list">'),1==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" src="'+u+'"/></a>'),document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"),"content"in n)var A=n.content.$t;else if("summary"in n)var A=n.summary.$t;else var A="";var k=/<\S[^>]*>/g;if(A=A.replace(k,""),1==post_summary)if(A.length<summary_chars)document.write(A);else{A=A.substring(0,summary_chars);var y=A.lastIndexOf(" ");A=A.substring(0,y),document.write(A+"...")}var _="",$=0;document.write('<br><div class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+" "+v+" "+f,$=1),1==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(1==$&&(_+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",_+=l,$=1),document.write(_),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_number = 5;
var showpostswiththumbs = true;
var insidereadmorelink = true;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>
<noscript>Your browser does not support JavaScript!</noscript>
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

Настройки

Променете, ако искате:

➤background: #FCD092; - фона на всяка показана публикация в притурката;

➤var posts_number = 5; - броят на показаните публикации в притурката;

➤Не е нужна каквато и да е друга настройка на този вариант притурка. Тя работи автоматично.

Всички тези притурки са красиво проектирани и тествани от блогъри. Надявам се, че можете да добавите такава притурка към блога си без никакви затруднения. Дала съм също и инструкции за тяхното добавяне, както и конфигурацията за всяка притурка. Още варианти на притурка „Последни публикации“ ще видите, ако прочетете публикацията от преди месец.

За въпроси, моля, в коментарите. А може и на тази страница.
 Ще съм благодарна да оцените моя труд и кликнете върху звездичките по-долу. Или гласувайте за блога ми на:


Здраве за всички вас! Не забравяйте да правите добро на други хора!