neděle 22. října 2017


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://3.bp.blogspot.com/-OasN_pvt2Xk/WWr_G17RkQI/AAAAAAAAUhw/iQHswW_s4GYs2V_Bq3Iru6kn-mgj5aOxgCKgBGAs/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 == &quot;item&quot;'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=readpostlabels&amp;max-results=50&quot;' 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>

  • 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 == &quot;item&quot;'>
<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'>&quot;<data:label.name/>&quot;<b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if></b:loop></b:if>];
var relatedSettings = {
blogURL:&quot;<data:blog.homepageUrl/>&quot;,
relatedHeading:&quot;&lt;h4&gt;&lt;span&gt;Podobné články&lt;/span&gt;&lt;/h4&gt;&quot;,
relatedPosts:4,
relatedStyle:1,

thumbnailSize:&quot;w300-h200-p-nu&quot;,
defaultThumb:&quot;https://4.bp.blogspot.com/-BLiit18tHXA/V9gCeNNCXzI/AAAAAAAALt8/SF8SUhGI1m8QuoHklq24MKiIEwKHIqwBACLcB/w300-h200-c/no-thumb.png&quot;,
roundThumbs:false,
titleLength:&quot;auto&quot;,
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)+"&hellip;":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)+"&hellip;":"";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;
}



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;
}

Styl 2 - úpravy


Pod .related-posts-1 li,.related-posts-2 li{
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

.related-posts-2 li{
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%;
}

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řidat

.related-posts-3 li{
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;
}

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;
}


.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;
}



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 ;-)



Sdílení článku:
Sdílet emailem Sdílet gmailem Sdílet Facebookem Sdílet Googlem Plus Sdílet Twitterem Sdílet Pinterestem Sdílet Tumblrem Sdílet Bloggerem Sdílet Wordpressem Sdílet whatsappem

Autorka článku:

Lucy Lillianne Vždycky mě bavilo hrát si s grafikou, dělat blogy a jejich vzhledy. Nikdy jsem se nepovažovala za nějakého experta a ani nikdy nebudu. To, co sem publikuji jsou věci, které by se mohly někomu do budoucna hodit nebo i mě samotné, pokud bych nějaký postup zapomněla... Každopádně jsem ráda, že sem tam si nějaký článek najde svého čtenáře nebo rovnou uplatnění :-)

štítky

2 komentáře:

  1. 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ětVymazat
    Odpovědi
    1. dekuji, tak snad se bude nejaky navod hodit :-)

      Vymazat


  • Tipy pro blogery

    Nápady a postřehy, odkoukané fígle, prostě vše, co by se vám mohlo hodit při práci na vašem vlastním blogu...

  • Moje grafika

    Amatérské pokusy o grafiku, mnohdy vytvořené s obrovským štěstím nebo díky volně stažitelné předchystané práci...

  • Calibre program

    Pár návodů s postupy, které jsem objevila díky experimentům s programem nebo diskuzním fórům na netu. Calibre slouží ke správě elektronických knih...