Очень оригинальный гаджет последних сообщений.

Всем, доброго времени суток. Гаджет последние сообщения с большим функционалом. Он может быть полностью настроен под дизайн вашего блога с помощью CSS. Некоторые настройки, о них речь будет ниже, позволяют  вывести показ последних постов как всего блога в целом, так и статьи определённого ярлыка.
И самое важное для тех, кто не хочет копаться в шаблоне - устанавливается весь код в гаджет HTML/JavaScript.

Вот некоторые отличительные особенности гаджета последних постов от других.

1. Кликабельная ссылка на ярлыки.

2. Миниатюра-аватор автора блога.

3. Кликабельное изображение - миниатюра.

4. Кликабельные комментарии.

5. Ссылка на страницу определённой категории с показом количества постов в ней.

6. Регулируемая длина названия и сниппета.

Попрошу вас перейти по этой ссылке и оценить сам гаджет. Я его сделала для ярлыка Гаджеты, но рассмотрим потом и другой вариант.

Код достаточно большой, но пусть вас это не пугает. Попытаюсь подробнее его разобрать.

<link href='//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>
<style>

.mbtlist {list-style-type:none;overflow:hidden; margin: 10px 0px!important; width:300px; padding:0px!important;}
.mbtlist li {margin:0px auto 10px auto; clear:both; color:#666; font-family:helvetica; font-size:12px; border-bottom:1px solid #eee; overflow:hidden; position:relative}
.mbtlist li a { color:#666; text-decoration:none; }
.mbtlist i{color:#999; padding-right:5px; }
.mbtlist .iline{line-height:2em; margin-top:3px;}
.mbtlist .icontent{line-height:1.5em; margin-top:5px;}
.mbtlist div span{margin:0 5px 0 0; display:inline-block;font-weight: normal; }
.mbtlist .mbttitle {font-family:oswald; font-size:13px; color:#666; font-weight:normal; text-decoration:none;}
.mbtlist .mbttitle:hover, .mbtlist .itotal a:hover  {color:#333; text-decoration:none;}
.mbtlist .iedit a{text-decoration:none; color:#999; cursor:pointer}
.mbtlist .iedit:before, .mbtlist .iauthor:before, .mbtlist .itag:before, .mbtlist .icomments:before, .mbtlist .idate:before, .mbtlist .itotal span:before{font-family:fontAwesome; position:relative; padding-right:8px; color:#999;}
.mbtlist .iauthorpic{width: 17px;height: 17px;border-radius: 50%;
float: none; display: inline-block; margin:0px 0px 0px 0px; padding-right:3px; position:relative; top:3px;}
.mbtlist .itag{    color: #fff;position: absolute;left: 7px;top: 8px;display: inline-block;font-size: 11px;width: 130px; height:22px;    overflow: hidden;}
.mbtlist .itag a{background:#000;background:rgba(0,0,0,0.7);text-decoration:none;color:#fff;padding:4px 5px;text-transform:capitalize;line-height: 2em;font-family: arial;
    font-size: 11px;border:1px solid #333;}
.mbtlist .itag a:hover{background:#222; color:#eee; text-decoration:none;}
.iFeatured{overflow:hidden;position:relative;float:left;margin:0 5px 10px 0;padding:0;}
.iFeatured a {background: url(http://3.bp.blogspot.com/-U2SNjBF_hE8/VLFfl4mJmtI/AAAAAAAAOYs/nDK3GKUJFr4/s100/mbt-bg1.png) 0 0;padding: 7px 7px 8px 7px;display: block;}
.iFeatured img{width:135px;height:80px;-moz-transition:all .3s;-webkit-transition:all .3s;transition:all .3s;     border-radius: 2px;}
.iFeatured:hover img{ opacity:1;   -moz-transform:scale(1.4);-webkit-transform:scale(1.4);transform:scale(1.4)}
.mbtlist .icomments a{color:#0080ff; font-family: arial;font-size:12px;}
.mbtlist .icomments a:hover{text-decoration:underline}
.mbtlist .icomments:before {content:'\f086'; padding:0px 3px 0px 7px; color:#84DB06;}
.mbtlist .idate:before {content:'\f073';padding-right:3px}
.mbtlist .iedit:before {content:'\f040';}
.mbtlist .imore {font-size:16px; font-weight:bold; text-decoration:none; color:#666;}
.mbtlist .itotal {color:#333;  padding:5px 0px; }
.mbtlist .itotal a {font-family:oswald, arial; font-size:12px; font-weight:normal; color:#0080ff; text-decoration:none}
.mbtlist .itotal span:before {content:'\f07c';}
.mbtlist .itotal span font {padding:0px 3px; color:#333; font-family:georgia; font-size:15px; font-weight:bold}
</style>
<script type="text/javascript">

var ListBlogLink = "http://www.shpargalochki.ru";
var ListCount = 3;
var ListLabel = "гаджеты";
var ChrCount = 200;
var TitleCount = 45;
var ImageSize = 50;
var showcomments = "on";
var showdate = "on ";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "on";
var showTotal = "on";

function mbtlist(json) {
document.write('<ul class="mbtlist">');
for (var i = 0; i < ListCount; i++)
{

var listing= ListImage = ListUrl = ListTitle = ListImage = ListContent = ListConten = ListAuthor = ListTag = ListDate = ListUpdate = ListComments = thumbUrl = TotalPosts = sk = AuthorPic= ListMonth = Y = D = M = m = YY = DD = MM = mm = TT =  "";

if (json.feed.entry[i].category != null)
{
for (var k = 0; k < json.feed.entry[i].category.length; k++) {
ListTag += "<a href='"+ListBlogLink+"/search/label/"+json.feed.entry[i].category[k].term+"'>"+json.feed.entry[i].category[k].term+"</a>";
if(k < json.feed.entry[i].category.length-1)
{ ListTag += " ";}
}}

for (var j = 0; j < json.feed.entry[i].link.length; j++) {
      if (json.feed.entry[i].link[j].rel == 'alternate') {
        break;
      }
    }
ListUrl= "'" + json.feed.entry[i].link[j].href + "'";
//################### Info
TotalPosts = json.feed.openSearch$totalResults.$t;
if (json.feed.entry[i].title!= null)
{
ListTitle= json.feed.entry[i].title.$t.substr(0, TitleCount);
}
if (json.feed.entry[i].thr$total)
{
ListComments= "<a href='"+json.feed.entry[i].link[j].href+"#comment-form'>"+json.feed.entry[i].thr$total.$t+"</a>";
}
ListAuthor= json.feed.entry[i].author[0].name.$t.split(" ");
ListAuthor=ListAuthor.slice(0, 1).join(" ");
AuthorPic = json.feed.entry[i].author[0].gd$image.src;

ListConten = json.feed.entry[i].content.$t;
ListContent= ListConten.replace(/(<([^>]+)>)/ig,"").substring(0, ChrCount);

ListMonth= ["январь", "февраль", "март", "апрель", "май", "июнь", "июль", "август", "сентябрь", "октябрь", "ноябрь", "декабрь"];
ListDate= json.feed.entry[i].published.$t.substring(0,10);
                         Y = ListDate.substring(0, 4);
                        m = ListDate.substring(5, 7);
                         D = ListDate.substring(8, 10);
                         M = ListMonth[parseInt(m - 1)];                    
ListUpdate= json.feed.entry[i].updated.$t.substring(0, 16);
                         YY = ListUpdate.substring(0, 4);
                        mm = ListUpdate.substring(5, 7);
                         DD = ListUpdate.substring(8, 10);
                         TT = ListUpdate.substring(11, 16);
                         MM = ListMonth[parseInt(mm - 1)];

if (json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/) != null)
{
    var youtube_id = json.feed.entry[i].content.$t.match(/youtube\.com.*(\?v=|\/embed\/)(.{11})/).pop();
 
    if (youtube_id.length == 11) {
        var ListImage = "'//img.youtube.com/vi/"+youtube_id+"/0.jpg'";
        }
}
else if (json.feed.entry[i].media$thumbnail)
{
thumbUrl = json.feed.entry[i].media$thumbnail.url;
sk= thumbUrl.replace("/s72-c/","/s"+ImageSize+"/");
ListImage= "'" + sk.replace("?imgmax=800","") + "'";
}
else if (json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/) != null)
{
// Support For 3rd Party Images
ListImage =  json.feed.entry[i].content.$t.match(/src=(.+?[\.jpg|\.gif|\.png]")/)[1];
}
else
{
ListImage= "'http://4.bp.blogspot.com/-HALLtgFeep0/VfryhQ0C5oI/AAAAAAAAPcY/77mSGND4q84/s200/Icon.png'";
}

document.write( "<li class='node"+[i]+"' >");
if (showthumbnail == 'on'){
document.write("<div class='iFeatured'><a  href="
+ ListUrl+
  "><img src="
+ListImage+
"/></a></div>");
}
if (showlabel == 'on'){
document.write("<span class='itag'>"
+ListTag +
"</span>");
}
document.write("<a class='mbttitle' href="
+ ListUrl+
">"
+ ListTitle+
"</a><div class='iline'>");
if (showauthor == 'on'){
document.write("<span class='iauthor'><img class='iauthorpic' src='"+AuthorPic+"'/>"
+ListAuthor+
"</span>");
}
if (showcomments == 'on'){
document.write("<span class='icomments'>"
+ListComments +
"</span> ");
}
if (showdate == 'on'){
document.write("<span class='idate'>"
+ M +
" "
+ D +
"</span>");
}
if (showcontent == 'on'){
document.write("<div class='icontent'>"
+ListContent +
"...</div> ");
}
document.write("</div></li>");
}if (showTotal == 'on'){
document.write("<div class='itotal'><span> <a href='"+ListBlogLink+"/search/label/"+ListLabel+"'>посмотреть все<font>"+TotalPosts+"</font> постов с ярлыком  →  " +ListLabel+" </a></span></div>");
}
document.write("</ul>");
}
document.write("<script src='"+ListBlogLink+"/feeds/posts/default/-/"+ListLabel+"?alt=json-in-script&callback=mbtlist'></"+"script>");
</script>

Давайте смотреть, что нужно и можно поменять. В самом коде CSS практически изменить можно всё по вашему усмотрению. Я лишь отметила фоновым цветом некоторые.

width:300px  ширина самого гаджета. 
135px; ширина миниатюры. 
#0080ff  цвет ссылки.
#84DB06; цвет иконки комментариев.

Вместо http://www.shpargalochki.ru пишите адрес своего блога.
 var ListCount = 3; количество отображаемых сообщений.
var ListLabel = "гаджеты"; название категории. Пишите именно так, как написано в строке браузера. Буквы очень чувствительны к регистру и если вместо прописных будут заглавные то работать не будет.
var ChrCount = 200;
var TitleCount = 45; количество символов заголовка сообщения.
var ImageSize = 50; количество символов в анонсе.

Чтобы показать сообщения всего блога, а не определённого ярлыка, удалите /-/"+ListLabel+", вместо var showTotal = "on"; напишите var showTotal = "off"; и замените ListLabel = "гаджеты"; на ListLabel = "";

И рассмотрим ещё некоторые способы настройки. Посмотрите как можно менять дизайн включением и выключением некоторых элементов в этом участке кода. Здесь у меня включены все и, именно так, мы получаем гаджет такого вида, который вы видели на тестовом блоге. 

var showcomments = "on";
var showdate = "on ";
var showauthor = "on";
var showthumbnail = "on";
var showlabel = "on";
var showcontent = "on";
var showTotal = "on";

Если прописать showdate = "off "; showcomments = "off"; showcontent = "off"; showlabel = "off"; т.е отключаем, будем иметь такой вид.

Выключаем showcontent и showdate -  получаем в итоге это.

Если позволяет ширина сайдбара, то можно увеличить width:300px, например до 500. Будет совершенно другой вид. Такой вариант, кстати, не плохо будет смотреться в подвале блога. Или даже на главной странице.

Вот такой необычный, легко настраиваемый, можно сказать универсальный виджет последних комментариев. Код хоть и кажется слишком большим, на самом деле не несёт большой нагрузки.

идеей поделился  

Я же сегодня на этом закончу. Спасибо за ваш визит и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email