Виджет "Последние сообщения" для Blogger
Если вы желаете показать читателям последние сообщения своего блога, то в этой статье предлагаю посмотреть варианты этого виджета.
Гаджет
Код устанавливаем в Дизайн/Добавить гаджет/HTML/JavaScript.
<script type="text/javascript"> 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:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_Traey4EKD6PRrx7MwRGZGjosDMDiGcbZF8MSv-iJCoVGnUYr1ckHFl8ug9yH2mfSzLTwCA1XNbRfUJWV6UbD49M4MA44Tu7ovodo91prZ57c0ztTFDUpwW3cKnXh83Zx17Zj-A3WPKT7/s0/%25D1%2584%25D0%25BE%25D1%2582%25D0%25BE.jpg"}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('<br><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">Дальше</a>',$=1),1==showcommentslink&&(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_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = false; var posts_date = true; var post_summary = true; var summary_chars = 70; </script> <script src="https://testikona.blogspot.com//feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> <a style="font-size: 9px; color: #282828; margin-top: 10px;" href=" " rel="nofollow"> </a> <noscript>Your browser does not support JavaScript!</noscript> <link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' /> <style type="text/css"> img.recent-post-thumb{width:50px;height:50px;float: arrow left;margin:5px -5px 0px 0px;-webkit-border-radius:50%;- moz-border-radius: 0em 0; border-radius:10%;padding:5px;background: #000} ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;margin: 5px 0px 5px 0px;} ul.recent-posts-container li:nth-child(1n+0) {background: #ffffff; width: 100%} ul.recent-posts-container li:nth-child(2n+0) {background: #ffffff; width: 100%} ul.recent-posts-container li:nth-child(3n+0) {background: #ffffff; width: 100%;} ul.recent-posts-container li:nth-child(4n+0) {background: #ffffff; width: 100%;} ul.recent-posts-container li:nth-child(5n+0) {background: #ffffff; width: 100%;} ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #ffffff ;} .recent-posts-container a { text-decoration:none; } .recent-posts-container a:hover { color: #222;} .post-date {color:#e0c0c6; font-size: 11px; } .recent-post-title a {font-size: 18px;color: #000000; font-weight: bold;} .recent-post-title {padding: 6px 0px;} .recent-posts-details a{ color: #000;} .recent-posts-details {padding: 5px 0px 5px; } </style>
Изменить в коде можно многое, но главное: поменяйте адрес моего тестового блога на адрес своего сайта. Выделила в коде красным.
1. Картинку Нет фото, (если в статье не будет изображений, она будет видна в гаджете) можно поменять на свою. В коде выделено синим. URL картинки меняйте на адрес своего изображения.
2. Голубым выделила в коде размер картинок. Поменяйте цифровые значения на свои.
3. В гаджете будет показано 5 последних статей, у каждого сообщения свой контейнер, в котором можно поменять цвет. Если сделать их разноцветными, то выглядеть будет гаджет так:
4. Если поменять ширину каждого контейнера, то у виджета будет такой вид:
Как вариант — сделать размер через один - 100%, 80%, 100%, 80%, 100%. Или придумать свою версию.
5. Ещё можно поменять цвет рамки картинки, в коде отметила оранжевым цветом.
6. Изменить слово Дальше, на своё, например — читать, далее. В коде выделено фиолетовым. Так же фиолетовым выделены названия месяцев, можно написать их на русском языке.
Кроме этого, можно менять размер шрифта, цвет текста, цвет ссылки, при наведении курсора, цвет названия статьи и многое другое. Покопайтесь в коде и вы сможете сделать не похожий на другие гаджет Популярных статей.
Продолжение статьи о виджетах Последние сообщения в следующем посте.
Комментарии со спамом удаляются.