Виджет последние сообщения по ярлыкам.

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


Виджет последние сообщения по категориям (ярлыкам) с прокруткой немного необычный. Наши читатели имеют возможность видеть не просто новые сообщения, а опубликованные посты по каждому ярлыку. Достаточно нажать на определённую категорию. Занимает совсем немного места в сайдбаре. И устанавливается в блоге через всеми любимый гаджет HTML/JavaScript. Предложу вам посмотреть его в футере  тестового блога здесь.



А сейчас об установке его. Копируем в блокнот код, который приведён ниже. И потом разберём настройки.

<div style="overflow:auto;width:100%px;height:300px;padding:10px;border:3px solid #">">
    <span id="pbl_labels"></span>
    <div id="pbl_posts"> последние сообщения</div>
    <script type="text/javascript">
    var jumlah_maksimum_post = 5;
    var dengan_ringkasan = true;
    var jumlah_karakter_ringkasan = 100;
    </script>
    <script type='text/javascript'>
var num     = jumlah_maksimum_post;
var wsumm   = dengan_ringkasan;
var summlen = jumlah_karakter_ringkasan;

var json; var labels;

function entryHasLabel(entry, label){
    if(label == "*"){return true;} // always true if label is "*"
    var labels = getPostLabels(entry);
    return isExists(labels, label);
}
function getAllLabels(json){
    var labels  = [];
    var entries = json.feed.entry;
    for(var i=0; i<entries.length; i++){
        var entry = entries[i];
        var categories = entry.category;
        if(!categories){подробнее;}
        for(var j=0; j<categories.length; j++){
            var category = categories[j];
            var label = category.term;
            if(!isExists(labels, label)){labels.push(label);}
        }
    }
    labels.sort();
    return labels;
}
function getContent(entry){
    if(!wsumm){return "";}
    var content = entry.content ? entry.content.$t : entry.summary.$t;
    content = stripHTML(content);
    if(content.length <= summlen){return content;}
    content = content.substr(0, summlen);
    if(content.charAt(content.length-1) != " "){content = content.substr(0, content.lastIndexOf(" ")+1);}
    content += "...";
    return content;
}
function getPermalink(entry){
    var links = entry.link;
    if(!links){return null;}
    for(var i=0; i<links.length; i++){
        var link = links[i];
        if(link.rel == "alternate"){return link.href;}
    }
    return null;
}
function getPostLabels(entry){
    var labels     = [];
    var categories = entry.category;
    if(!categories){return labels;}
    for(var i=0; i<categories.length; i++){
        labels.push(categories[i].term);
    }
    return labels;
}
function getRecentPosts(json, label){
    // this widget is made by copycat91 in his blog
    var posts   = [];
    var entries = json.feed.entry;
    var i = 0;
    while(posts.length < num){
        if(i == entries.length){break;}
        var entry   = entries[i];
        if(entryHasLabel(entry, label)){
            var title   = entry.title.$t;
            var href    = getPermalink(entry);
            var content = getContent(entry);
            var post    = {"title" : title, "href" : href, "content" : content};
            posts.push(post);
        }
        i++;
    }
    return posts;
}
function isExists(array, val){
    for(var i=0; i<array.length; i++){
        if(array[i] == val){return true;}
    }
    return false;
}
function onLoadFeed(json_arg){
    json   = json_arg;
    labels = getAllLabels(json);
    showLabels(labels);
    showLabeledPosts("*");
}
function showLabeledPosts(label){
    // set label == "*" if you want to show all posts
    posts = getRecentPosts(json, label);
    showPosts(posts);
}
function showLabels(labels){
    var s = "";
    s += "<select onchange='showLabeledPosts(this.value)'>";
    s += "<option value='*'/>категории";
    for(var i=0; i<labels.length; i++){
        var label = labels[i];
        s += "<option value='"+label+"'/>" + label;
    }
    s += "</select>";
    document.getElementById("pbl_labels").innerHTML = s;
}
function showPosts(posts){
    var s = "";
    if(!wsumm){s += "<ul>";}
    for(var i=0; i<posts.length; i++){
        var post = posts[i];
        if(wsumm){
            s += "<p>";
            s += "<b><a href='"+post.href+"'>" + post.title + "</a></b> <br/>";
            s += post.content;
            s += "<br/><a href='"+post.href+"'> дальше&gt;&gt; </a>";
            s += "</p>";
        } else {
            s += "<li><a href='"+post.href+"'>" + post.title + "</a></li>";
        }
    }
    if(!wsumm){s += "</ul>";}
    document.getElementById("pbl_posts").innerHTML = s;
}
function stripHTML(s) {
    var c;
    var intag = false; var newstr = "";
    for(var i=0; i<s.length; i++){
        c = s.charAt(i);
        if(c=="<"){intag = true;}
        else if(c==">"){intag = false;}
        if(c == ">"){newstr += " ";}
        else if(!intag){newstr += c;}
    }
    return newstr;
}
    </script>
    <script src="http://www.shpargalochki.ru/feeds/posts/default?alt=json-in-script&callback=onLoadFeed">
    </script></div>

height:300px;padding:10px;border:3px solid #FFFFFF">-высота поля гаджета. Ширина и цвет рамки. Если последняя не нужна просто уберите из кода border:3px solid #FFFFFF.
Красным цветом я выделила количество отображаемых сообщений. Жёлтым название категории или ярлыки, или рубрики. В строку, отмеченную синим цветом, вставляем адрес вашего блога.

Вот и всё. Мы облегчили нашим посетителям навигацию по блогу. И заострили внимание на последних публикациях.

И сегодня у меня всё. Спасибо, что заглядываете в мои шпаргалки. Всегда рада вас видеть.
Удачи нам всем.

Ой, а что это там ниже? Ну надо же! Нажимаем!

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

Введите Ваш email ...: