Стильный виджет последних сообщений от заданного ярлыка


Всем привет! Сегодня наша тема для тех кто находится в поиске, (вернее находился поскольку  уже нашел) стильного виджета последних сообщений отображающего посты в зависимости от заданного ему ярлыка.

Какова же его польза? Ну к примеру бывают моменты, когда мы не хотим, что бы пользователи видели все, что мы публикуем на своем блоге - сайте. Здесь то нам на помощь и приходит виджет последних сообщений по заданному ярлыку. Дальше веселее, этот виджет так же может принести большую пользу, если на вашем сайте не одна , а несколько тематик, такой проект очень сложно продвигать, но вполне возможно. Правда об этом мы с вами поговорим в следующей нашей статье. А сегодня мы акцентируем наше внимание на том, как установить виджет последних сообщений по заданному ярлыку на свой сайт - блог. Впрочем нет здесь ничего сложного, нужно просто скопировать код и вставить в окошко HTML\Javascript. Ах да, едва не забыли показать вам, как это новшество выглядит

Итак копируем следующий код:
 <style scoped="scoped" type="text/css">
/* Multi Recent Post */
.post-body *,.post-body *:after,.post-body *:before{box-sizing:initial;-webkit-box-sizing:initial;-moz-box-sizing:initial;}
.list-entries{display:table;background:#fdfdfd;margin:1.5% 1%;width:350px;float:left;font-size:80%;}
.list-entries ul,.list-entries li{margin:0;list-style:none}
#feed-list-container ul li{background:#fdfdfd;padding:15px;line-height:normal;border:1px solid #eee;border-top:0;transition:all .3s;}
#feed-list-container ul li:hover{background:#fff;}
#feed-list-container ul li:last-child{border-bottom:0;}
.list-entries .main-title{padding:0;overflow:hidden;}
.list-entries .main-title h4{position:relative;display:block;font:inherit;font-weight:700;padding:1em 1.5em;background-color:#4f93c5;color:#fff;margin:0;line-height:normal;font-size:120%;margin-top:0!important}
.list-entries .main-title h4:after{display:inline-block;content:"\f02c";font-family:fontAwesome;font-size:17.4px;font-style:normal;background-color:#4384b3;color:#fff;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;top: -4px;}
.list-entries .title a{font-size:13px;text-decoration:none;line-height:.5em;color:#333;font-weight:700;transition:all .3s;}
.list-entries .title a:hover{color:#4f93c5}
.list-entries img,.list-entries .fake-img{border:none;background-color:#333;margin:0 1em 0 0;padding:0;float:left}
.list-entries .summary{overflow:hidden;color:#999}
.list-entries .more-link{border-bottom:none;}
.list-entries .more-link a{display:block;line-height:2em;height:2em;overflow:hidden;text-decoration:none;background-color:#444;padding:1em 1.5em;position:relative;font-weight:400;color:#fff;transition:all .3s; }

.list-entries .more-link a:hover{background-color:#f97e76;color:#fff;}
.list-entries .more-link a:after{display:inline-block;content:"\f054";font-family:fontAwesome;font-size:16.4px;font-style:normal;background-color:#333;color:#ccc;top:0;right:0;padding:1em 1.25em;position:absolute;font-weight:400;transition:all .3s;top: -4px;}
.list-entries .more-link a:hover:after{background-color:#ea726a;color:#fff;}
.widget .post-body ul, .widget .post-body ol {position:relative;}

@media (max-width:640px){
.list-entries {width:100%;}
.list-entries{margin:2.5% 1%;}}
</style>

<br />
<div id="feed-list-container">
</div>
<div style="clear: both;">
</div>
<script type="text/javascript">
var multiFeed = {
    feedsUri: [
        {
            name: "Заработок в сети",
            url: "http://www.shablonu-dlya-blogger.ru/",
            tag: "Заработок"
        },

],
    numPost: 7,
    showThumbnail: true,
    showSummary: false,
    summaryLength: 0,
    titleLength: "auto",
    thumbSize: 72,
    containerId: "feed-list-container",
    readMore: {
        text: "Смотреть все сообщения этой категории",
        endParam: "?max-results=7"
    }
};
</script>
<script src="https://cdn.rawgit.com/Arlina-Design/redvision/master/multi-feed.js" type="text/javascript"></script>
После идем в раздел Дизайн - добавить гаджет - HTML\Javascript вставляем туда наш код и сохраняем гаджет.

Выделенное красным меняете на свои значения:
1.Название виджета
2.Адрес вашего блога - сайта
3.Название самого ярлыка сообщения - посты, которого должны отображаться в виджете
4.Количество отображаемых постов - сообщений.

Сохраняете гаджет и проверяете результат.


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Стильный виджет последних сообщений от заданного ярлыка
4/ 5
Oleh