l Віджет для сайту "Останні публікації" - Довідник блогера

Віджет для сайту "Останні публікації"

Якщо для вашого блогу-сайту потрібен віджет, в якому анонсуються останні публікації, то ви потрапили за адресою.
У сайдбарі мого блогу встанолений його зразок під назвою "Новини".
Віджет цікавий тим, що не потребує значної переробки. Його легко встновлювати на сайті.
Для цього слід:
зайти в розділ "Дизайн", 
вибрати форму віджету " HTML/JavaScrip",
вставити код, який ви знайдете нижче.

Назвіть його на свій смак: "Останні публікації", "Новини", "Нове на сайті".
Натисніть кнопку зберегти. Справу зроблено.
Додам, що віджет не гальмує завантаження сайту.
-----------------
<script  style="text/javascript">//<![CDATA[
function showlatestpostswiththumbs(t){document.write('<ul  class="recent-posts-container">');for(var  e=0;e<posts_no;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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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==showpoststhumbs&&document.write('<a  href="'+r+'"><img class="recent-post-thumb"  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('<div  class="recent-posts-details">'),1==posts_date&&(_=_+w[parseInt(g,10)]+"  "+v+"  "+f,$=1),1==readmorelink&&(1==$&&(_+=" |  "),_=_+'<a href="'+r+'" class="url" target  ="_top">Read  more</a>',$=1),1==showcommentslink&&(1==$&&(_+=""),"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 style="text/javascript">
var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = false;
var showcommentslink = 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=showlatestpostswiththumbs"></script><noscript>Your browser does not support  JavaScript!</noscript>
<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:65px;height:65px;float:left;margin: 0px 20px 10px 0;  background: #fff; border: 1px solid #ddd;}
.recent-posts-container {font-family: 'Oswald', sans-serif;float:  left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding:  0;font-size:12px;}
ul.recent-posts-container li {position:relative;padding:5px  7px;min-height:65px; list-style-type: none; margin-bottom: 5px;border:1px solid  #ddd}
ul.recent-posts-container {color:#555;counter-reset:  countposts;list-style-type: none;}
.recent-posts-container a { text-decoration:none; }
.recent-post-title a {font-weght:bold; text-transform:  uppercase; color: #333333;}
.recent-posts-details {margin: 5px 0px 0px 92px; }
.recent-posts-details a{ color: #777;}
</style>
----------------------------
Що можна змінити у віджеті:
var posts_no = 5; - кількість анонсів, які відображаються у віджеті.
Більш просунуті у знанні мови HTML блогери можуть повправлятися у стилях запропонованого віджета.
Віджет також можна сховати на головній сторінці блогу, адже він дублює її зміст. Як це зробити - читайте тут.
Якщо маєте якісь питання - задавайте їх у коментарях. З радістю відповім.
Василь Терещук
Віджет для сайту "Останні публікації" Віджет для сайту "Останні публікації" Reviewed by Vasyl Markovych on квітня 23, 2017 Rating: 5

Немає коментарів:

На платформі Blogger.