Takzvané related posts, jedná se o náhledy článků, které mají podobné štítky jako ten, ve kterém se čtenář nachází. Tento widget se obvykle dává nakonec článku, aby si každý mohl po dočtení stávajícího vybrat další obdobný... Podíváme se na pár vzhledů, které by se daly použít...
Můj návod.
Kopírovat se zdrojem!
Varianta 1 - podle mého blogu
Já například na svém blogu mám tento způsob, ale možností je mnohem více...
Pokud se vám líbí můj styl, použijte následující kroky... Pod </b:skin>, tedy pod css styly vložíte následující kód:
<!--Related Posts with thumbnails Scripts and Styles Start-->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 150; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUUN2BriNGCnZq3_ab4dYxe4i-2_ji28XI7agjD1dBzgp4DMIPB9kp_72g0RvtInzzUG6f9QHYfbjhQERZQ7hNQnCraW7ggjutRntplgcJYx7EHcgBOs6tPdpkmOw2hLIFQP8AgGQbrT4/s1600/no_image2.png"; // default picture for entries with no image
function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}
//]]>
</script>
<style>
.relatedsumposts {
padding: 0px 10px;
text-align: justify;
width: 135px;
height: 260px;
float:left;
margin-bottom:15px;
}
.relatedsumposts h6 {
margin: 5px 0;
text-align:left;
font-weight: normal;
}
.relatedsumposts img {
object-fit: scale-down;
width:120px;
height:110px;
position: relative;
}
.relatedsumposts p {
height: 200px;
line-height:1.2;
font-size:11px;
margin: 5px 0 0;
padding: 5px 0 15px 0;
}
#relatedpostssum {
width: 100%;
}
.relatedpoststitle h2 {
margin-top: 12px;
font-size:14px;
padding:3px;
color:#000;
text-transform:uppercase;
}
</style>
<!--Related Posts with thumbnails Scripts and Styles End-->
<script type='text/javascript'>
//<![CDATA[
var relatedTitles = new Array();
var relatedUrls = new Array();
var relatedpSummary = new Array();
var relatedThumb = new Array();
var relatedTitlesNum = 0;
var relatedPostsNum = 4; // number of entries to be shown
var relatedmaxnum = 150; // the number of characters of summary
var relatednoimage = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUUN2BriNGCnZq3_ab4dYxe4i-2_ji28XI7agjD1dBzgp4DMIPB9kp_72g0RvtInzzUG6f9QHYfbjhQERZQ7hNQnCraW7ggjutRntplgcJYx7EHcgBOs6tPdpkmOw2hLIFQP8AgGQbrT4/s1600/no_image2.png"; // default picture for entries with no image
function readpostlabels(e){for(var t,r,l,a=0;a<e.feed.entry.length&&(t=e.feed.entry[a],a!=e.feed.entry.length);a++){relatedTitles[relatedTitlesNum]=t.title.$t,l="","content"in t?l=t.content.$t:"summary"in t&&(l=t.summary.$t),relatedpSummary[relatedTitlesNum]=removetags(l,relatedmaxnum),r="media$thumbnail"in t?t.media$thumbnail.url:relatednoimage,relatedThumb[relatedTitlesNum]=r;for(var d=0;d<t.link.length;d++)if("alternate"==t.link[d].rel){relatedUrls[relatedTitlesNum]=t.link[d].href;break}relatedTitlesNum++}}function showrelated(){for(var e=new Array(0),t=new Array(0),r=new Array(0),l=new Array(0),a=0;a<relatedUrls.length;a++)contains(e,relatedUrls[a])||(e.length+=1,e[e.length-1]=relatedUrls[a],t.length+=1,t[t.length-1]=relatedTitles[a],r.length+=1,r[r.length-1]=relatedpSummary[a],l.length+=1,l[l.length-1]=relatedThumb[a]);relatedTitles=t,relatedUrls=e,relatedpSummary=r,relatedThumb=l;for(var a=0;a<relatedTitles.length;a++){var d=Math.floor((relatedTitles.length-1)*Math.random()),n=relatedTitles[a],s=relatedUrls[a],m=relatedpSummary[a],i=relatedThumb[a];relatedTitles[a]=relatedTitles[d],relatedUrls[a]=relatedUrls[d],relatedpSummary[a]=relatedpSummary[d],relatedThumb[a]=relatedThumb[d],relatedTitles[d]=n,relatedUrls[d]=s,relatedpSummary[d]=m,relatedThumb[d]=i}for(var u,h=0,o=Math.floor((relatedTitles.length-1)*Math.random()),g=o,f=document.URL;h<relatedPostsNum&&(relatedUrls[o]==f||(u="<div class='relatedsumposts'>",u+="<a href='"+relatedUrls[o]+"' title='"+relatedTitles[o]+"'><img src='"+relatedThumb[o]+"' /></a>",u+="<h6><a href='"+relatedUrls[o]+"' target='_self'>"+relatedTitles[o]+"</a></h6>",u+="<p>"+relatedpSummary[o]+" ... </p>",u+="</div>",document.write(u),h++,h!=relatedPostsNum))&&(o<relatedTitles.length-1?o++:o=0,o!=g););}function removetags(e,t){for(var r=e.split("<"),l=0;l<r.length;l++)-1!=r[l].indexOf(">")&&(r[l]=r[l].substring(r[l].indexOf(">")+1,r[l].length));return r=r.join(""),r=r.substring(0,t-1)}function contains(e,t){for(var r=0;r<e.length;r++)if(e[r]==t)return!0;return!1}
//]]>
</script>
<style>
.relatedsumposts {
padding: 0px 10px;
text-align: justify;
width: 135px;
height: 260px;
float:left;
margin-bottom:15px;
}
.relatedsumposts h6 {
margin: 5px 0;
text-align:left;
font-weight: normal;
}
.relatedsumposts img {
object-fit: scale-down;
width:120px;
height:110px;
position: relative;
}
.relatedsumposts p {
height: 200px;
line-height:1.2;
font-size:11px;
margin: 5px 0 0;
padding: 5px 0 15px 0;
}
#relatedpostssum {
width: 100%;
}
.relatedpoststitle h2 {
margin-top: 12px;
font-size:14px;
padding:3px;
color:#000;
text-transform:uppercase;
}
</style>
<!--Related Posts with thumbnails Scripts and Styles End-->
Světle šedá část je javascript, který neměníte, kromě vyznačené fialové.
- var relatedPostsNum = 4; počet náhledů dalších článků
- var relatedmaxnum = 150; počet znaků (písmen) v náhledu, určuje jeho délku
- var relatednoimage = ... náhradní obrázek, pokud není v článku žádný načtený, já mám třeba otazník...
Ve stylech pak máte tyto možnosti:
- Roměry jednoho náhledu na výšku a šířku - width: 135px; height: 260px;
- Nastavení zarovnání nadpisu, v tomto případě vlevo - text-align:left;
- Nastavení obrázku v náhledu, jeho rozměry a přizpůsobení obrázku, přičemž toto je asi nejideálnější, v jiných variantách to totiž obrázky deformuje - object-fit: scale-down; width:120px;height:110px;
- Nastavení odstavce s textem - jeho výška, rozteče mezi řádky a velikost písma - height: 200px; line-height:1.2; font-size:11px;
- Nastavení nadpisu nad náhledy (v mém případě podobné články), můžete si napsat cokoli vás napadne. Velikost písma, barva písma a úprava na všechny velké. Opět si můžete zvolit cokoli jiného - font-size:14px; color:#000; text-transform:uppercase;
Pak ta důležitější část, hlavní kód musíte vložit dále do šablony. Já si našla nejvhodnější místo v tomto kódu, pokud by někomu nevyhovovalo, lze vkládat i jinam nebo mi případně napsat a nějak to vymyslíme ;-) Tak tedy, já si našla <b:includable id='shareButtons' var='post'> a hned za to jsem vložila následující kód:
<center>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:loop>
<div class='post-footer-line post-footer-line-4'>
<div class='relatedpoststitle'><h2>Podobné články:</h2></div>
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
</center><br/>
<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == "item"'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=readpostlabels&max-results=50"' type='text/javascript'/>
</b:loop>
<div class='post-footer-line post-footer-line-4'>
<div class='relatedpoststitle'><h2>Podobné články:</h2></div>
<div id='relatedpostssum'>
<script type='text/javascript'>showrelated();</script>
</div>
<div style='clear:both;'/>
</div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->
</center><br/>
Podobné články můžete přejmenovat i jakkoli jinak, třeba Navštivte i..., Mohlo by vás zajímat... a mnoho dalších...
Varianta 2 - různé možnosti
Tady v těchto následujících možnostech jsem našla už přednastavené styly. Je tedy potřeba v druhé části měnit čísla od 1 do 9 (označená modrá část).První část kódu pod </b:skin>:
<style type='text/css'>
.related-posts-container {
margin:55px 0px;
}
.related-posts-container h4 {
font-size:14px;
margin-bottom:20px;
text-transform:uppercase;
}
.related-posts-container ul,.related-posts-container ul li{
list-style: none;
margin: 0;
padding: 0;
}
.related-posts-container ul li a{
text-transform:capitalize !important;
font:bold 13px;
outline: 0;
}
.related-snippets{
margin-top:5px;
font:italic 12px;
}
.related-posts-1 li{
list-style:inside none disc !important;
}
.related-posts-1 li,.related-posts-2 li{
border-top:1px solid rgba(0,0,0,0.04);
padding:0.8em 0 !important;
}
.related-posts-1 li:first-child,.related-posts-2 li:first-child{
border-top:medium none;
}
li.related-post-item{
margin:0 3% 3% 0 !important;
width:22.7%;
float:left;
list-style:none;
position:relative;
}
li.related-post-item:last-child{
margin:0 0 2% !important;
}
.related-thumb-large{
width:100%;
height:auto;
border:none;
margin:0px auto 10px;
padding:0 !important;
}
.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{
padding-left:74px;
}
.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){
margin:0 0 4% !important;
}
.related-posts-8 li,.related-posts-9 li{
box-shadow:0 0 4px rgba(180, 180, 180, 0.55);
width:42% !important;
float:left;
margin:0 4% 4% 0 !important;
padding:3% !important;
}
.related-thumb{
float:left;
height:64px;
margin-right:10px;
object-fit:cover;
width:64px;
}
.related-posts-6 li,.related-posts-6 a{
line-height:1.0 !important;
}
.related-posts-6 .related-thumb-large{
margin-bottom:0;
}
.related-posts-7 li.related-post-item{
margin:0 !important;
width:25% !important;
}
.related-wrapper{
position:absolute;
left:0px;
right:0;
top:0px;
bottom:0;
margin:0 auto;
z-index:4;
}
.related-wrapper-inner{
position:relative;
height:100%;
z-index:99;
width:100%;
display:table;
vertical-align:middle;
text-align:center;
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
}
.related-wrapper .related-title{
vertical-align:middle;
display:table-cell;
font:bold 16px;
padding:0 20px;
}
.related-date{
margin-top:5px;
font:italic 11px;
}
</style>
.related-posts-container {
margin:55px 0px;
}
.related-posts-container h4 {
font-size:14px;
margin-bottom:20px;
text-transform:uppercase;
}
.related-posts-container ul,.related-posts-container ul li{
list-style: none;
margin: 0;
padding: 0;
}
.related-posts-container ul li a{
text-transform:capitalize !important;
font:bold 13px;
outline: 0;
}
.related-snippets{
margin-top:5px;
font:italic 12px;
}
.related-posts-1 li{
list-style:inside none disc !important;
}
.related-posts-1 li,.related-posts-2 li{
border-top:1px solid rgba(0,0,0,0.04);
padding:0.8em 0 !important;
}
.related-posts-1 li:first-child,.related-posts-2 li:first-child{
border-top:medium none;
}
li.related-post-item{
margin:0 3% 3% 0 !important;
width:22.7%;
float:left;
list-style:none;
position:relative;
}
li.related-post-item:last-child{
margin:0 0 2% !important;
}
.related-thumb-large{
width:100%;
height:auto;
border:none;
margin:0px auto 10px;
padding:0 !important;
}
.related-posts-8 li .related-title,.related-posts-9 li .related-title,.related-posts-9 li .related-snippets{
padding-left:74px;
}
.related-posts-8 li:nth-child(even),.related-posts-9 li:nth-child(even){
margin:0 0 4% !important;
}
.related-posts-8 li,.related-posts-9 li{
box-shadow:0 0 4px rgba(180, 180, 180, 0.55);
width:42% !important;
float:left;
margin:0 4% 4% 0 !important;
padding:3% !important;
}
.related-thumb{
float:left;
height:64px;
margin-right:10px;
object-fit:cover;
width:64px;
}
.related-posts-6 li,.related-posts-6 a{
line-height:1.0 !important;
}
.related-posts-6 .related-thumb-large{
margin-bottom:0;
}
.related-posts-7 li.related-post-item{
margin:0 !important;
width:25% !important;
}
.related-wrapper{
position:absolute;
left:0px;
right:0;
top:0px;
bottom:0;
margin:0 auto;
z-index:4;
}
.related-wrapper-inner{
position:relative;
height:100%;
z-index:99;
width:100%;
display:table;
vertical-align:middle;
text-align:center;
-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;
}
.related-wrapper .related-title{
vertical-align:middle;
display:table-cell;
font:bold 16px;
padding:0 20px;
}
.related-date{
margin-top:5px;
font:italic 11px;
}
</style>
- Nastavení nadpisu (Podobné články...) - .related-posts-container h4
Druhá část kódu pod <b:includable id='shareButtons' var='post'>:
<b:if cond='data:blog.pageType == "item"'>
<center>
<div class='related-posts-container' id='related-posts-widget'/>
<div style='clear: both;'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:"<data:blog.homepageUrl/>",
relatedHeading:"<h4><span>Podobné články</span></h4>",
relatedPosts:4,
relatedStyle:1,
thumbnailSize:"w300-h200-p-nu",
defaultThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmJqxU6Y7Z0W1auqac0X3U_ZF3eYx3w49HHBQ-cXtE9u-jzXTP-zsQaDzRkzMyfabmMd-5dMATa-WPwPq6pV2IEd28YQpDNxx0DAXXZFOEunY3dktozTmDVys78Ogr34wG2PYrqk04Xpr/w300-c-h200/no-thumb.png",
roundThumbs:false,
titleLength:"auto",
snippetLength:45,
centerText:false,
openNewTab:false
};</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"…":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"…":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script></center>
</b:if>
<center>
<div class='related-posts-container' id='related-posts-widget'/>
<div style='clear: both;'/>
<script type='text/javascript'>
var labelArray = [<b:if cond='data:post.labels'><b:loop values='data:post.labels' var='label'>"<data:label.name/>"<b:if cond='data:label.isLast != "true"'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:"<data:blog.homepageUrl/>",
relatedHeading:"<h4><span>Podobné články</span></h4>",
relatedPosts:4,
relatedStyle:1,
thumbnailSize:"w300-h200-p-nu",
defaultThumb:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpmJqxU6Y7Z0W1auqac0X3U_ZF3eYx3w49HHBQ-cXtE9u-jzXTP-zsQaDzRkzMyfabmMd-5dMATa-WPwPq6pV2IEd28YQpDNxx0DAXXZFOEunY3dktozTmDVys78Ogr34wG2PYrqk04Xpr/w300-c-h200/no-thumb.png",
roundThumbs:false,
titleLength:"auto",
snippetLength:45,
centerText:false,
openNewTab:false
};</script>
<script type='text/javascript'>
//<![CDATA[
var randomRelatedIndex,startRelated;!function(a,b,c){var d={callBack:function(){}};for(var e in relatedSettings)d[e]="undefined"==relatedSettings[e]?d[e]:relatedSettings[e];var f=function(a){var d=b.createElement("script");d.type="text/javascript",d.src=a,c.appendChild(d)},g=function(a,b){return Math.floor(Math.random()*(b-a+1))+a},h=function(a){var c,d,b=a.length;if(0===b)return!1;for(;--b;)c=Math.floor(Math.random()*(b+1)),d=a[b],a[b]=a[c],a[c]=d;return a},i="object"==typeof labelArray&&labelArray.length>0?"/-/"+h(labelArray)[0]:"",j=function(a){var b=a.feed.openSearch$totalResults.$t-d.relatedPosts,c=g(1,b>0?b:1);f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&start-index="+c+"&max-results="+d.relatedPosts+"&callback=startRelated")},k=function(a){var l,m,n,o,p,q,b=document.getElementById("related-posts-widget"),c=h(a.feed.entry),e=d.relatedStyle,f=d.relatedHeading+'<ul class="related-posts-'+e+'">',g=d.openNewTab?' target="_blank"':"",i=d.centerText?"text-align:center;":"",j=d.roundThumbs?"-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;":"",k='<span style="display:block;clear:both;"></span>';if(b){for(var r=0;r<d.relatedPosts&&r!=c.length;r++){n=c[r].title.$t,o="auto"!==d.titleLength&&d.titleLength<n.length?n.substring(0,d.titleLength)+"…":n,p="media$thumbnail"in c[r]&&d.thumbnailSize!==!1?c[r].media$thumbnail.url.replace(/\/s[0-9]+(\-c)?/,"/"+d.thumbnailSize):d.defaultThumb,l=h(c[r].published.$t);for(var s=[1,2,3,4,5,6,7,8,9,10,11,12],t=["January","February","March","April","May","June","July","August","September","October","November","December"],u=l.split("-")[2].substring(0,2),v=l.split("-")[1],w=l.split("-")[0],x=0;x<s.length;x++)if(parseInt(v)==s[x]){v=t[x];break}postdate=v+" "+u+" "+w,q="summary"in c[r]&&d.snippetLength>0?c[r].summary.$t.replace(/<br ?\/?>/g," ").replace(/<.*?>/g,"").replace(/[<>]/g,"").substring(0,d.snippetLength)+"…":"";for(var y=0,z=c[r].link.length;y<z;y++)m="alternate"==c[r].link[y].rel?c[r].link[y].href:"#";1==e?f+='<li><a href="'+m+'" '+g+">"+o+"</a></li>":2==e?f+='<li><a href="'+m+'" '+g+'><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":3==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>":4==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":5==e?f+='<li class="related-post-item" style="'+i+'"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-title">'+o+"</div></a></li>":6==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"><div class="related-wrapper" style="'+j+'"><div class="related-wrapper-inner"><div class="related-title">'+o+"</div></div></div></a></li>":7==e?f+='<li class="related-post-item"><a href="'+m+'" '+g+'><img alt="" class="related-thumb-large" src="'+p+'" style="'+j+'"></a></li>':8==e?f+='<li class="related-post-item"><a class="related-post-item-wrapper" href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-date">'+postdate+"</div></li>":9==e&&(f+='<li><a href="'+m+'" '+g+'><img alt="" class="related-thumb" src="'+p+'" style="'+j+'"><div class="related-title">'+o+'</div></a><div class="related-snippets">'+q+"</div></li>")}b.innerHTML=f+="</ul>"+k,d.callBack()}};randomRelatedIndex=j,startRelated=k,f(d.blogURL.replace(/\/$/,"")+"/feeds/posts/summary"+i+"?alt=json-in-script&orderby=updated&max-results=0&callback=randomRelatedIndex")}(window,document,document.getElementsByTagName("head")[0]);
//]]>
</script></center>
</b:if>
- relatedPosts:4, - určuje počet odkazů
- relatedStyle:1, - určuje typ stylu (1-9)
- můžete si změnit názvy měsíců - ["January","February","March","April","May",...]
Styl 1 - seznam
Styl 2 - seznam s úryvky
Styl 3 - náhledy s úryvky
Styl 4 - náhledy s datem
Styl 5 - náhledy s názvem článku
Styl 6 - název v obrázku
Styl 7 - jen obrázky
Styl 8 - náhled s datem
Styl 9 - náhled s úryvkem
Všechny tyto widgety jsou upraveny tak, aby se přizpůsobily vašemu písmu na blogu a barvám vašeho textu a odkazů... Případně si jen upravíte velikost písma, pokud budete chtít větší či menší.
Co lze ještě vytvořit
Zde půjde jen o úpravy stylů. Takže postupujte podle návodu výše a jen v první části měňte určité fragmenty kódu.
Styl 1 - úpravy
.related-posts-1 li{
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ccc;
background:#f2f2f2;
text-indent:14px;
}
.related-posts-1 li,.related-posts-2 li{
padding:0.8em 0 !important;
}
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ccc;
background:#f2f2f2;
text-indent:14px;
}
.related-posts-1 li,.related-posts-2 li{
padding:0.8em 0 !important;
}
Změňte .related-posts-1 li na
.related-posts-1 li{
list-style:inside none disc !important;
border-radius: 2em;
background: #f2f2f2;
border: .2em solid #fff;
}
.related-posts-1 li,.related-posts-2 li{
padding:0.8em 0 !important;
}
list-style:inside none disc !important;
border-radius: 2em;
background: #f2f2f2;
border: .2em solid #fff;
}
.related-posts-1 li,.related-posts-2 li{
padding:0.8em 0 !important;
}
Styl 2 - úpravy
Pod .related-posts-1 li,.related-posts-2 li{
padding:0.8em 0 !important;
}
padding:0.8em 0 !important;
}
vložte
.related-posts-2 li{
margin:0 0 20px 15px !important;padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ccc;
background:#f2f2f2;
text-indent:14px;
}
Pod .related-posts-1 li,.related-posts-2 li{
padding:0.8em 0 !important;
} vložte
padding:0.8em 0 !important;
} vložte
.related-posts-2 li{
border-top: 1px solid #ddd;
width: 60%;
}
border-top: 1px solid #ddd;
width: 60%;
}
.related-posts-2 li{
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ccc;
background:#f2f2f2;
text-indent:14px;
box-shadow: 5px 5px 5px #dddddd;
width: 70%;
}
margin:0 0 20px 15px !important;
padding:4px 5px 4px 10px !important;
list-style:none;
*list-style: decimal;
border-bottom:1px solid #ccc;
background:#f2f2f2;
text-indent:14px;
box-shadow: 5px 5px 5px #dddddd;
width: 70%;
}
Styl 3 - úpravy
Pod .related-posts-1 li,.related-posts-2 li{
border-top:1px solid rgba(0,0,0,0.04);
padding:0.8em 0 !important;
}
přidatborder-top:1px solid rgba(0,0,0,0.04);
padding:0.8em 0 !important;
}
.related-posts-3 li{
height: 245px;
background: #f2f2f2;
}
height: 245px;
background: #f2f2f2;
}
.related-posts-3 li{
height: 245px;background: #f2f2f2;
border-bottom: 1px solid #ccc;
}
.related-posts-3 li{
height: 245px;
background: #f2f2f2;
border-bottom: 1px solid #ccc;
box-shadow: 5px 5px 5px #dddddd;
}
height: 245px;
background: #f2f2f2;
border-bottom: 1px solid #ccc;
box-shadow: 5px 5px 5px #dddddd;
}
Styl 9 - úpravy
Smažte ,.related-posts-9 li aby zůstal jen styl 8
.related-posts-8 li,.related-posts-9 li{
box-shadow:0 0 4px rgba(180, 180, 180, 0.55); width:42% !important;
float:left;
margin:0 4% 4% 0 !important;
padding:3% !important;
}
A vložte pod to nové
.related-posts-9 li{
background: #f2f2f2;
border-bottom: 1px solid #ccc;
box-shadow: 5px 5px 5px #dddddd;
width:40% !important;
float:left;
margin:0 4% 4% 0 !important;
padding:3% !important;
}
background: #f2f2f2;
border-bottom: 1px solid #ccc;
box-shadow: 5px 5px 5px #dddddd;
width:40% !important;
float:left;
margin:0 4% 4% 0 !important;
padding:3% !important;
}
.related-posts-9 li{
background: #f2f2f2;
border-bottom: 1px solid #ccc;
width:40% !important;
float:left;
margin:0 4% 4% 0 !important;
padding:3% !important;
}
background: #f2f2f2;
border-bottom: 1px solid #ccc;
width:40% !important;
float:left;
margin:0 4% 4% 0 !important;
padding:3% !important;
}
A to je zatím asi vše. Článek je už i tak docela dlouhý. Možností jsou desítky od změn barev, rámečků a dalších věcí. Takže další styly si připravím zase na příště :-) Nápady jsem čerpala z googlu, helploggeru a taky jsem hodně experimentovala a upravovala sama... Snad se vám něco z toho hodí a příště zase ;-)
Pokud vás článek zaujal, můžete sdílet
Lucy Lillianne
V posledních letech jsem neskutečně podlehla knihám. Nejen jejich čtení, blogování o nich, ale i nakupování. Ráda si rozšiřuji knihovničku a velice mě mrzí, když vidím tolik knih, které nemohu mít. Přesto jsem ráda za každý kousek, který se mi dostane do rukou. Největší radost mi dělají žánry fantasy a sci-fi, v poslední době hodně ujíždím na apokalyptických a dystopických knihách a když si potřebuji odpočinout, často sáhnu po nějakém thrilleru nebo jiné napínavé četbě...
Samozřejmě nepohrdnu ani lehčí četbou. Nejméně mě lákají romantické knihy, i když i tam občas dojde k nějaké výjimce. Doufám, že čtení mě bude bavit ještě dlouho, protože můj seznam je téměř nekonečný... :-)
To nejdůležitější,
co o mě musíte vědět je, že je mi přes třicet, mám ráda knihy, filmy, nekonečné lenošení a čokoládu. Blogování mě strašně baví
a věčně jsem nespokojená s designem, pořád do něj vrtám :-) A ze všeho nejraději spím :-P. 
Wow, super blog, musím prolézt tyhle blogerské rady. Jsem počítačový střevo, takže se mi budou určitě hodit :)
OdpovědětVymazatdekuji, tak snad se bude nejaky navod hodit :-)
Vymazat